jquery + AJAX + double appels

Je suis la construction d'un ajax basé sur la navigation et tout fonctionne bien, sauf une chose:

Quand je me regarde dans Firebug je vois que sur chaque clic sur le site en ajax est appelée et chargé à deux reprises.

C'est le 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"); 

        }       
    });

}

Donc à chaque fois que je clique sur une liste dans ma navigation, la page est chargé de l'amende juste en #main, mais ça arrive deux fois (comme affiché dans Firebug). Any1 a peut-être une idée de pourquoi? 🙂

J'ai remarqué qu'il ne se passe lorsque je accéder à une page par url (qu'il ne fait un appel ajax), donc je suppose que le problème est quelque part dans la fonction de clic.

p.s. je suis à l'aide de jquery plugin de l'historique, mais je ne pense pas que le problème est là, ou?

Eh bien, combien de fois est getPage appelé -- et pourquoi?
Son être appelé qu'une seule fois dans la fonction de clic pour obtenir le contenu et une fois dans la fonction pageload dans le cas où l'utilisateur accède directement via le navigateur je ne peux pas voir le problème 🙁
Est-ce que votre code jQuery se trouvent à l'intérieur de toute chargés dynamiquement/modifié le contenu (c'est à dire le contenu chargé à partir d'une requête AJAX, un modal popup région, etc?).
Non, pas vraiment. Tout le code est au bas de la page sous la forme de plusieurs fichiers et une partie directement dans la page.
trouver la meilleure réponse ici stackoverflow.com/questions/209029/...

OriginalL'auteur r0skar | 2011-09-23

ajax jquery

Je vais deviner que getPage est appelée deux fois. Mettre un débogueur déclaration au début de la fonction (débogueur;) et ouvrir firebug pour voir si il est. Voici une façon de résoudre le problème si il est appelé à deux reprises:

//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;

}

Bon, je pense que c'est le travail une fois que j'ai mis getPage.isLoaded dos à faux sur cliquez sur. Merci beaucoup!!

OriginalL'auteur Ryan Wright

Je crois que votre événement click est en train de remonter à l'ancre.

essayer:

    $('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: de retour faux de ne pas annuler un jquery lié événement.

Edit: @wildrot est droit

En fait, vous devriez faire de l'événement.preventDefault() avant toute chose. Certains "navigateurs" gérer de procéder à l'événement avant même d'arriver à la preventDefault().
Merci à vous deux! Malheureusement, sa fais encore 2 appels lorsque je clique sur un lien. Peu importe où je l'ai mis de l'événement.preventDefault(). Et qu'un appel lorsque j'accède à la page directement via l'URL.
Juste spéculer, mais se pourrait-il que l'histoire plugin est en train de faire un deuxième appel à chaque fois à "cache" la nouvellement chargée de contenu?

OriginalL'auteur Geoff

1

Juste spéculer, mais ... les choses que vous chargez via AJAX, par hasard, contiennent le même script à nouveau?

Salut, Pas de la substance contient du code html seulement, et le getScript appelle une script.js qui a contenu 0 encore.

OriginalL'auteur vzwick

Juste ajouter

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

Espère que cette aide

OriginalL'auteur Arunkumar

Vous devez vous connecter pour publier un commentaire.