JQuery / AJAX: Carregando DIVs externos usando conteúdo dynamic

Eu preciso criar uma página que carregará divs de uma página externa usando Jquery e AJAX.

Encontrei alguns bons tutoriais, mas todos são baseados em conteúdo estático, meus links e conteúdo são gerados pelo PHP.

O tutorial principal em que baseio meu código é:
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

A function exata que eu preciso é a seguinte:

  1. A página principal contém uma lista div permanente de links que contém um parâmetro.
  2. Após clique, o link passa o parâmetro para a página externa.
  3. A página externa filtra o conjunto de registros contra o parâmetro e preenche div com resultados.
  4. A nova div contém um novo conjunto de links com novos parâmetros.
  5. A div externa é carregada debaixo das principais páginas primeiro div.
  6. O processo pode então ser repetido criando uma cadeia de divs entre si.
  7. A última div na cadeia direcionará para uma nova página que coloque todas as querystrings usadas anteriormente.

Eu posso lidar com todo o trabalho do PHP com a população dos divs nas páginas principal e externa.
É a parte JQuery e AJAX com a qual estou lutando.

$(document).ready(function(){ var sections = $('a[id^=link_]'); // Link that passes parameter to external page var content = $('div[id^=content_]'); // Where external div is loaded to sections.click(function(){ //load selected section switch(this.id){ case "div01": content.load("external.php?param=1 #section_div01"); break; case "div02": content.load("external.php?param=2 #section_div02"); break; } }); 

O problema que estou tendo é fazer com que o JQuery passe os parâmetros gerados dinamicamente para a página externa e, em seguida, recupere a nova div.
Atualmente, só posso fazer isso com links estáticos (como acima).

Não tenho certeza se você já resolveu isso, mas estou surpreso com a qual não mencionou a function ajax ().

Isso permitiria que você definisse o tipo de solicitação como GET:

 function loadContent(id) { $.ajax({ type: "GET", url: "external.php", dataType: 'html', data: {param: id}, success: function(html){ $("#container").html(html); }, error: function(){ }, complete: function(){ } }); } 

Basta chamar essa function em vez de usar a carga. Obviamente, você terá que mexer com o código (principalmente o que está na function de sucesso) um pouco, mas isso deve dar-lhe um bom ponto de partida.

Você pode usar o argumento de dados opcional para passar parâmetros para a solicitação GET. Leia a documentação . Isso é muito melhor do que construir o URL você mesmo. Você pode, naturalmente, adicionar dados dynamics gerados à lista de parâmetros.

 function loadDiv(evt) { // these params will be accessible in php-script as $_POST['varname']; var params = {name:'myDiv', var1:123, var2:'qwer'}; $.post('http://host/divscript.php', params, onLoadDiv); } function onLoadDiv(data) { $('#myContainer').html(data); } $(document).ready(function() { $('#divButton').click(loadDiv); }); 

Neste exemplo, o script do lado do servidor deve retornar o conteúdo interno da sua div. Claro que você pode retornar dados serializados em XML ou JS para eval etc … depende da tarefa. O exemplo é simplificado, então, estenda-o para atender às suas necessidades.

Este tutorial sobre o carregamento do conteúdo AJAX é bom:

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

Especialmente a parte que explica como ler os resultados com o Firebug.

 var params = { param: 1, otherParam: 2 }; content.load("external.php #section_div01", params); 

irá carregar “external.php? param = 1 & otherParam = 2”