Auto selectores de ajax con jquery.

Question

Estoy tratando de hacer una prueba de concepto de sitio web, pero quiero una degradación perfecta. Como tal, primero voy a codificar el sitio web en XHTML y luego agregaré las clases & amp; IDs para engancharlos en jQuery.

Una cosa que quiero hacer es eventualmente habilitar Ajax xmlhttprequest para todos mis enlaces, para que se muestren en un div de ventana gráfica. Quiero que esta vista sea un " universal " volcado para cualquier xmlhttprequest desde varias páginas externas.

Me preguntaba si puedo codificar algo como:

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

etc. Como puede ver, doy todas las etiquetas de enlace de las que quiero llamar solicitudes Ajax con la clase ajax. En mi JS basado en jQuery, quiero poder codificarlo de tal manera que todos los filtros positivos de $ {" a "). ((& Quot. / p>

Por favor ayuda. Soy un n00b.

Answer 1

Con tu ejemplo, deberías poder hacer:

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

Sugeriría usar una clase diferente de " ajax " porque hace que el código sea un poco extraño de leer, porque $ ('. ajax') podría interpretarse erróneamente como $ .ajax () .

La parte $ ('. ajax'). click () registra un controlador de eventos onClick para cada elemento en la página con la clase " ajax " que es exactamente lo que quieres. Luego utiliza $ (this) .attr ('href') para obtener la href del enlace en particular y luego haga lo que necesite.

Answer 2

Algo como:

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

Es necesario analizar todo lo que está fuera del #content div para que la navegación no se muestre más de una vez. Estaba pensando en una expresión regular pero probablemente sea más fácil de usar jQuery para hacerlo, así que actualicé el ejemplo.