Ajax onload problem

[sarithak]

hi frnds,

i m new to ajax...i m using the below javascript code. here the functionality is working good. but the page(specific div) takes some time for loading. so, i need to put some loading bar(just 4 indication)...

plz check the below code and add the onload funtion..

jQuery(document).ready(function() {
    jQuery('.postTabs_divs').hide();
    jQuery('.postTabs_curr_div').show();
    jQuery('.postTabsLinks').each(function() {
        jQuery(this).click(function() {
            //alert(jQuery(this).attr('id'));
            var info = jQuery(this).attr('id').split('_');
            postTabs_show(info[1], info[0]);
        });
    });
});

function postTabs_show(tab,post){
		
		jQuery('.postTabs_divs').each(function() {
            jQuery(this).hide();
        });
        jQuery('#postTabs_ul_'+post + ' li').each(function() {
            jQuery(this).removeClass('postTabs_curr');
        });
        jQuery('#postTabs_li_'+tab+'_'+post).addClass('postTabs_curr');
		jQuery("#postTabs_"+tab+"_"+post).show();
		self.focus();

		//Cookies
		var expire = new Date();
		var today = new Date();
		expire.setTime(today.getTime() + 3600000*24);
		document.cookie = "postTabs_"+post+"="+tab+";expires="+expire.toGMTString();

}

function posTabsShowLinks(tab){
	if (tab) window.status=tab;
	else window.status="";
}

function postTabs_getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

<DIV class="Post" id="post-18644" style="padding-bottom: 0px;">
	<DIV class="PostContent">
   
<UL id="postTabs_ul_18644" class="postTabs" style="display:none">
<LI id="postTabs_li_0_18644" class="postTabs_curr">&nbsp;&nbsp;<A id="18644_0" onMouseOver="posTabsShowLinks(Gallery); return true;" onMouseOut="posTabsShowLinks();" class="postTabsLinks">Gallery</A></LI>
<LI id="postTabs_li_1_18644" class=""><A id="18644_1" onMouseOver="posTabsShowLinks(Trailers); return true;" onMouseOut="posTabsShowLinks();" class="postTabsLinks">Movie Trailers</A></LI>
<LI id="postTabs_li_2_18644" class=""><A id="18644_2" onMouseOver="posTabsShowLinks(Videos); return true;" onMouseOut="posTabsShowLinks();" class="postTabsLinks">Videos</A></LI>
</div></div>
</UL>

sry if there are any grammer mistakes..plz be patient and od needful

thanks
Saritha K

[liamfriel]

It would be a better idea just to originally have the load bar inside the div and then let javascript take it out.

If the ajax happens when a user clicks something you need to find where the request happens, not really sure how jQuery does it but using xmlhttp:

if(xmlhttp.readyState==4{
 document.getElementById('test').innerHTML=xmlhttp.responseText}
}

And add an else to it that will fill the div with the loading gif

if(xmlhttp.readyState==4{
 document.getElementById('test').innerHTML=xmlhttp.responseText}
}else{
 document.getElementById('test').innerHTML= 'images/loading.gif'}
}

You can get nice loading gifs @ Ajax Load