Selettori ajax automatici con Jquery

Question

Sto cercando di provare il sito web del concept, ma voglio un perfetto degrado. Come tale ho intenzione di codificare prima il sito Web in semplice XHTML e quindi aggiungere classi e amp; id per agganciarli in jQuery.

Una cosa che voglio fare è abilitare Ajax xmlhttprequest per tutti i miei collegamenti, in modo che vengano visualizzati in un div viewport. Voglio che questo viewport sia un "universale" dump per qualsiasi richiesta xmlhttp da più pagine esterne.

Mi chiedevo se sono in grado di scrivere qualcosa come:

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

ecc. Come puoi vedere, do tutti i tag di link che desidero chiamare richieste Ajax dalla classe ajax. Nel mio JS basato su jQuery, voglio essere in grado di codificarlo in modo tale che tutti i filtri $ {" a "). Positivi (" .ajax ") caricheranno automaticamente i loro rispettivi hrefs [variabili] come una richiesta ajax.

Per favore aiuto. Sono un n00b.

Answer 1

Con il tuo esempio, dovresti essere in grado di fare:

$('.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.
});

Suggerirei di utilizzare una classe diversa da " ajax " perché rende il codice un po 'strano da leggere, perché $ ('. ajax ') potrebbe essere letto male come $ .ajax () .

La parte $ ('. ajax'). click () registra un gestore di eventi onClick per ogni elemento della pagina con la classe "quot" ajax " che è esattamente quello che vuoi. Quindi usi $ (this) .attr ('href') per fare clic sull'href di quel particolare link e poi fai quello che ti serve!

Answer 2

Qualcosa del tipo:

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;
});

Devi analizzare tutto ciò che è al di fuori del div #content in modo che la navigazione non venga visualizzata più di una volta. Stavo pensando a un regexp ma probabilmente più facile da usare jQuery per farlo, quindi ho aggiornato l'esempio.