jquery + AJAX + double calls

Question

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

When i look in Firebug I can see that on each click the ajax site gets 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 script
    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"); 

        }       
    });

}

So whenever I click on a list in my navigation, the page gets loaded just fine into #main, but it happens twice (as displayed in Firebug). Any1 maybe has an idea why? :)

I noticed that it doesnt happen when i access a certain page by url (than it only does one ajax call), so I guess the problem is somewhere in the click function.

p.s. i am using the jquery history plugin, but I dont think the problem is there, or?

Its being called once in the click function to get the content and once in the pageload function in case the user navigates to it directly via browser - I cant see the problem there :( — r0skar, Sep 23 '11 at 19:15
Does your jQuery code lie inside any dynamically loaded/modified content (i.e. content loaded from an AJAX request, a modal popup region, etc?). — Ryan Wright, Sep 23 '11 at 19:51
No not realy. Whole code is at bottom of the page in seperate files and some part directly in the page. — r0skar, Sep 23 '11 at 19:54
find best answer here http://stackoverflow.com/questions/209029/best-way-to-remove-an-event-handler-in-jquery — mahipal purohit, Aug 31 '13 at 08:53

score 5 · Accepted Answer · answered Sep 23 '11 at 20:22

I'm going to guess that getPage is called twice. Put a debugger statement at the beginning of the function (debugger;) and open firebug to see if it is. Here's one way to fix the problem if it is getting called twice:

//AJAX Navigation Helper function   
function getPage() {

    if(getPage.isLoaded != true) {

        //generate the parameter for the php script
        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;

}

Alright, I think that does work once I set getPage.isLoaded back on false on click. Thanks a lot!! — r0skar, Sep 23 '11 at 20:38

Geoff · Answer 2 · 2011-09-23T19:18:41.960

4

I believe your click event is bubbling to the anchor.

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 won't cancel a jquery bound event.

Edit: @wildrot is right

edited Sep 23 '11 at 19:18

answered Sep 23 '11 at 19:12

Geoff

9,290
7
35
48

Actually, you should do the event.preventDefault() before anything else. Some "browsers" manage to proceed with the event before they even get to the preventDefault(). – vzwick Sep 23 '11 at 19:16
Thanks you two! Unfortunately its still doing 2 calls when I click a link. No matter where i put the event.preventDefault(). And only one call when I navigate to the page directly via URL. – r0skar Sep 23 '11 at 19:22
Just speculating, but could it be that the history plugin is doing a second call each time to "cache" the newly loaded content? – r0skar Sep 23 '11 at 19:25

score 1 · Answer 3 · edited May 02 '14 at 04:56

1

Just add

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

Hope this helps

edited May 02 '14 at 04:56

Hiral

14,954
11
36
57

answered May 02 '14 at 04:39

Arunkumar

11
1

score 1 · Answer 4 · answered Sep 23 '11 at 19:14

1

Just speculating, but … Does the stuff you load via AJAX by any chance contain the same script again?

answered Sep 23 '11 at 19:14

vzwick

10,424
5
39
60

Hi, No the stuff contains html code only and the getScript calls a script.js, which has 0 content yet. – r0skar Sep 23 '11 at 19:17

jquery + AJAX + double calls

4 Answers4