Sélecteurs ajax automatiques avec Jquery

Question

J'essaie de créer un site Web de validation technique, mais je souhaite une dégradation parfaite. En tant que tel, je vais d'abord coder le site Web en langage XHTML simple, puis ajouter des classes & amp; identifiants pour les accrocher dans jQuery.

Une chose que je veux faire est d’activer éventuellement Ajax xmlhttprequest pour tous mes liens, afin qu’ils s'affichent dans un div de viewport. Je souhaite que cette fenêtre soit un "universel". dump pour tout xmlhttprequest à partir de plusieurs pages externes.

Je me demandais si je pouvais coder en dur quelque chose comme:

<a href="blah.html" class="ajax">, <a href="bleat.html" class="ajax">

etc. Donc, comme vous pouvez le voir, je donne toutes les balises de lien vers lesquelles je souhaite appeler des demandes Ajax avec la classe ajax. Dans mon JS basé sur jQuery, je veux pouvoir le coder de telle sorte que tous les filtres $ {"a") positifs (".ajax") chargeront automatiquement leurs [variable] hrefs respectives en tant que demande ajax.

S'il vous plaît aider. Je suis un n00b.

Answer 1

Avec votre exemple, vous devriez pouvoir faire:

$('.ajax').click(function () { 
    // Your code here. You should be able to get the href variable and
    // do your ajax request based on it. Something like:
    var url = $(this).attr('href');
    $.ajax({
        type: "GET",
        url: url
    });
    return false; // You need to return false so the link
                  // doesn't actually fire.
});

Je suggérerais d'utiliser une classe différente de "ajax". parce que cela rend le code un peu étrange à lire, car $ ('. ajax') pourrait être mal interprété comme suit: $. ajax () .

La partie $ ('. ajax'). click () enregistre un gestionnaire d'événements onClick pour chaque élément de la page avec la classe " ajax " qui est exactement ce que vous voulez. Ensuite, vous utilisez $ (this) .attr ('href') pour obtenir le href du lien sur lequel vous avez cliqué, puis faites ce dont vous avez besoin!

Answer 2

Quelque chose comme:

function callback(responseText){
    //load the returned html into a dom object and get the contents of #content
    var html = $('#content',responseText)[0].innerHTML;
    //assign it to the #content div
    $('#content').html(html);
}

$('a.ajax').click(function(){
    $.get(this.href, callback);
    return false;
});

Vous devez analyser tout ce qui se trouve en dehors de #content div afin que la navigation ne soit pas affichée plus d'une fois. Je pensais à une expression rationnelle, mais probablement plus facile d’utiliser jQuery pour le faire, j’ai donc mis à jour l’exemple.