Auto ajax seletores com jQuery

Question

Eu estou tentando fazer uma prova de conceito website, mas eu quero degradação perfeito. Como tal, eu estou indo para o código do site em XHTML simples primeiro e depois adicionar classes e ids para ligá-los em jQuery.

Uma coisa que eu quero fazer é, eventualmente, permitir Ajax XMLHttpRequest para todos os meus links, para que eles exibir em uma janela div. Quero que este visor para ser um despejo "universal" para qualquer xmlhttprequest de várias páginas externas.

Eu queria saber se eu sou capaz de codificar algo como:

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

etc. Então, como você pode ver, eu dou todas as tags de link que eu quero chamar requisições Ajax a partir com o ajax classe. Em meus JS baseados em jQuery, eu quero ser capaz de código-lo de tal forma que todos os $ positiva { "um" filtro). (. "Ajax") será carregado automaticamente seus respectivos hrefs [variáveis] como um pedido ajax.

Por favor, ajuda. Eu sou um n00b.

Answer 1

Com o seu exemplo, você deve ser capaz de fazer:

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

Gostaria de sugerir usando uma classe diferente de "ajax", porque torna o código um pouco estranho ler, porque $('.ajax') poderia ser mal interpretado como $.ajax().

A parte $('.ajax').click() registra um manipulador de eventos onClick para cada elemento na página com a classe "ajax", que é exatamente o que você quer. Então você usa $(this).attr('href') para obter o href do link específico clicado e, em seguida, fazer o que você precisa!

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

Você precisa analisar tudo o que está fora da div #content para que a navegação não é exibido mais de uma vez. Eu estava pensando em uma expressão regular, mas mais fácil provável usar jQuery para fazê-lo assim que eu atualizei o exemplo.