将AJAX加载程序附加到单个链接上的菜单/导航栏

Question

I'm using the following theme for our site: http://themes.vivantdesigns.com/vpad/#dashboard.html

I want an ajax loader to show NEXT to the link/tab, when a user clicks a link within the drilldown menu on the left. As you can see from the link, content is dynamically loaded within a:

<section id="main-section">Pagename.html loaded here</section>

So basically, I want the ajax loader to show to the right of the menu links and disappear when the dynamic content loads. It will be hard to see this pause on the demo link, but heavier database queries will cause it to sit there a moment, and slower connections of course.

Any immediate help is appreciated very much.

I've tried show/hide onClick methods, hiding class on document ready, and nothing seems to work cleanly.

Answer 1

Okay, after a lot of screwing around trying to find where the ajax was happening, I think I've worked it out (little familiarity with jQuery/never heard of hashchange or bbq before), so give this a shot.

Assuming you have access to it, the page you referenced is including a JavaScript file called global.js.

Add an initially hidden "loading" image/div/whatever next to each menu item, with an id set similarly to the menu item's name eg id="mediaLoading".

Open global.js and head down to line 117:

$('#'+id).length && $('#'+id).remove();

After this line the ajax call is made, so add the code to show the ajax loader, eg

var loaderId = h.replace(/^\#/, "") + "Loading";
document.getElementById(loaderId).style.display = 'block'; 
//or $("#" + loaderId).show() or whatever you would use in jQuery

Finally, to re-hide it, add similar code into the inline 'complete' function (which would now be around line 127):

complete: function(jqXHR, textStatus) { 
    document.getElementById(loaderId).style.display = 'none';
}

Hope that solves it. It was difficult to test locally.

Keep in mind that since the file's called "global," that obviously might impact a bunch of other pages, so you may want to use null-checks for the loader or a separate file...