Jquery + AJAX + double calls

Question

I am building ajax based navigation and everything works fine except for one thing:

When I look in Firebug, I see that with each click on the site ajax is called and loaded twice.

This is the script:

$(document).ready(function () { //Check if url hash value exists (for bookmark) $.history.init(pageload); //highlight the selected link $('a[href=' + document.location.hash + ']').addClass('selected'); //Seearch for link with REL set to ajax $('a[rel=ajax]').click(function () { //grab the full url var hash = this.href; //remove the # value hash = hash.replace(/^.*#/, ''); //for back button $.history.load(hash); //clear the selected class and add the class class to the selected link $('a[rel=ajax]').removeClass('selected'); $(this).addClass('selected'); //hide the main and show the progress bar $('#main').hide(); $('#loading').show(); //run the ajax getPage(); //cancel the anchor tag behaviour return false; }); }); //AJAX Navigation Helper function function pageload(hash) { //if hash value exists, run the ajax if (hash) getPage(); } //AJAX Navigation Helper function function getPage() { //generate the parameter for the PHP  var data = 'page=' + encodeURIComponent(document.location.hash); $.ajax({ url: "loader.php", type: "GET", data: data, cache: false, success: function (html) { //hide the progress bar $('#loading').hide(); //add the main retrieved from ajax and put it in the #main div $('#main').html(html); //display the body with fadeIn transition $('#main').fadeIn('slow'); //reload site scripts $.getScript("js/script.js"); } }); } 

Therefore, whenever I click on a list in my navigation, the page loads just fine in #main, but it happens twice (as shown in Firebug). Maybe Any1 has an idea why? :)

I noticed that this does not happen when I access a specific page by url (than only one ajax call does this), so I think the problem is somewhere in the click function.

ps I use the jquery history plugin, but I don’t think there is a problem or?

Answer 1

I am going to assume that getPage is called twice. Place the debugger instruction at the beginning of the function (debugger;) and open firebug to see if it is. Here is one way to fix the problem if it is called twice:

 //AJAX Navigation Helper function function getPage() { if(getPage.isLoaded != true) { //generate the parameter for the PHP  var data = 'page=' + encodeURIComponent(document.location.hash); $.ajax({ url: "loader.php", type: "GET", data: data, cache: false, success: function (html) { //hide the progress bar $('#loading').hide(); //add the main retrieved from ajax and put it in the #main div $('#main').html(html); //display the body with fadeIn transition $('#main').fadeIn('slow'); //reload site scripts $.getScript("js/script.js"); } }); } getPage.isLoaded = true; } 

Answer 2

I believe your click event is boiling to an anchor.

to try:

  $('a[rel=ajax]').click(function (event) { //cancel the anchor tag behaviour event.preventDefault(); //grab the full url var hash = this.href; //remove the # value hash = hash.replace(/^.*#/, ''); //for back button $.history.load(hash); //clear the selected class and add the class class to the selected link $('a[rel=ajax]').removeClass('selected'); $(this).addClass('selected'); //hide the main and show the progress bar $('#main').hide(); $('#loading').show(); //run the ajax getPage(); }); 

Edit: simply returning false does not cancel the jquery-related event.

Edit: @wildrot is right.

Answer 3

Just speculate, but ... Can the material you download via AJAX ever again contain the same script?

Answer 4

Just add

 $('a[rel=ajax]').die('click').click(function (event) { -> will load once.. 

Hope this helps