JQuery/AJAX：動的コンテンツを使用して外部DIVをロードする

Question

JqueryとAJAXを使用して外部ページからdivをロードするページを作成する必要があります。

私はいくつかの良いチュートリアルを見てきましたが、それらはすべて静的コンテンツに基づいており、リンクとコンテンツはPHPによって生成されています。

私は上の私のコードを基づかています主なチュートリアルからです：
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

次のように私は必要な正確な機能は次のとおりです。

1. メインページには、パラメータを含むいくつかのリンクをリスト永久DIVが含まれています。
2. クリックすると、リンクがパラメータを外部ページに渡します。
3. 外部ページは、パラメータに対してレコードセットをフィルタリングし、divに結果を設定します。
4. 新しいdivには、新しいパラメータを持つ新しいリンクセットが含まれています。
5. 外部divは、メインページの最初のdivの下にロードされます。
6. プロセスを繰り返して、divの連鎖を作成します。
7. チェーンの最後のdivは、以前に使用したすべてのクエリーストリングを照合する新しいページに移動します。

メインページと外部ページにdivを設定して、PHPのすべての処理を処理できます。
これは私が苦労しているJQueryとAJAXの部分です。

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

私が午前問題は、外部のページへの動的に生成されたパラメータを渡し、その後、新しいdiv要素を取得するためのjQueryを得ています。
私は現在、静的リンクでのみこれを行うことができます（上記のように）。

Answer 1

これを既に解決しているかどうかはわかりませんが、ajax（）関数を使用する人はいません。

これは、あなたが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(){ 
     } 
    }); 

} 

だけ負荷を使用しての代わりに、この関数を呼び出します。明らかに、コード（主に成功関数に含まれるもの）を少し修正する必要がありますが、これはあなたに良い出発点を与えるはずです。

Answer 2

オプションのdata引数を使用して、パラメータをGETリクエストに渡すことができます。 documentationを読んでください。これは自分でURLを作成するよりはるかに優れています。もちろん、動的に生成されたデータをパラメータリストに追加することもできます。

Answer 3

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

がロードされます "external.php？PARAM = 1 & otherParam = 2" あなたのdivの内側の内容を返す必要があります。この例で、サーバーサイドスクリプトで

Answer 4

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

。もちろん、XMLシリアル化されたデータやJSをevalなどに返すことができます。これはタスクに依存します。この例は単純化されているので、ニーズに合わせて拡張してください。

Answer 5

AJAXコンテンツをロードするにこのチュートリアルでは良いです：

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

のFirebugとの結果を読み取る方法を説明する。特に一部。