jQuery - Launch URL In Same Window, Then Refresh

Question

I'm using jQuery-UI's accordion plugin with hash tag navigation, but I'm running into a problem. Each page of my site has an accordion widget on it. The URLs in the second level of my main navigation menu are supposed to open the correct panel of the accordion using the accompanying hash tag, and they are written like so:

<li class="lvl2"><a href="/thepage.jsp#panel-3">panel 3</a></li>

The problem is, if you're already looking at one panel of any of the accordions, trying to make a different panel open up with the second level nav doesn't work. It passes the hash tag into the address bar, but it doesn't open the accordion panel unless you refresh the page. So I figured I could solve the problem by adding some jQuery that would cause the page to refresh after 500 milliseconds, like so:

$('.lvl2 a').click(function() {
    setTimeout(function() {
        location.reload();
    },500);
});

Except now that sabotages navigation away from the page to a new page and a new accordion panel. Which tells me the answer may be to take full control of the all functionality of the second level navigation and handle it with jQuery.

So how could I alter this to "store" the URL from the href attribute of the anchor tag, pass it to the browser, and then refresh the page?

Answer 1

If lvl2 accordians are dynamic, you may need to use live or liveQuery instead of click.

Answer 2

I played around with it some more and managed to get it to work in what seems to be a consistent manner. Basically, I changed the href attributes in all of the lvl2 anchor tags to rel attributes and then used that attribute in my jQuery function to handle the navigation to the new URL. Then I increased the timeout from 500 to 1000 milliseconds. Anything less seems to refresh the page too soon, before it gets a chance to go to the new URL.

$('.lvl2 a').click(function() {
    location.href=$(this).attr('rel');
    setTimeout(function() {
        location.reload();
    },1000);
});