Ajaxでさまざまなファイルをロードする

Question

私は、ページ上のモーダルフォームとして使用される1つから複数のHTMLスニペットを動的にロードするHTMLページを持っています。このページはCMSから出力されるため、ビジネスユーザーは「このページに1つのフォームが必要です」または「このページに6つのフォームが必要です」と決めることができます。それぞれのリンクとその読み込み情報は、一緒に移動して任意のページに配置できるモジュールである必要があります。これらのリンクがページ上で選択されると、ページが読み込まれたときにAjaxロードスクリプトを呼び出すコードスニペットが出力されます。

スニペット例：

<script> 
$(document).ready(function() 
{ 
load('/web_fragments/file.html', 'content_item1'); 
$('#item1').click(function(){    
    $('#rmi_item1').dialog("open");   
    return false;  
}); 
$('#rmi_item1.modal').dialog({autoOpen: false, modal:true, 
    dialogClass:'modal', width:590});}); 
</script> 
<a href="#" id="item1">Request More Information</a> 
<div id="rmi_item1" class="appLvl mod modal dialog"> 
<div id="content_item1"> 
</div> 
</div> 

ページのIDとのdivのそれぞれは、一意の識別子を持って、私は読みやすくするためにここでそれらを単純化してきました。問題は、loadメソッドです。これらのどれがページ上にあるかわからないので、実際には複数の読み込みメソッドを作成することはできません。ページにアイテムが1つしかない場合は、すべてうまくいきます。ここに私が持っているロードメソッドがあります。私はAjax/jQueryを初めて使っているので、私は謝罪して親切にしてくれるようお願いします！ :)

function load(url, target) 
{ 
    document.getElementById(target).innerHTML = ' Fetching data...'; 
    if (window.XMLHttpRequest) { 
    req = new XMLHttpRequest(); 
    } else if (window.ActiveXObject) { 
     req = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    if (req != undefined) { 
     req.onreadystatechange = function() {targetDiv(url, target);}; 
     req.open("GET", url, true); 
     req.send(""); 
    } 
} 

function targetDiv(url, target) 
{ 
    if (req.readyState == 4) { // only if req is "loaded" 
    if (req.status == 200) { // only if "OK" 
    document.getElementById(target).innerHTML = req.responseText; 
    } 
    } 
} 

私は今正式にこのエラーで私の心を失うことになっているので、任意の提案や助けが歓迎です！ありがとう！

Answer 1

私はあなたの問題はあなたが変数reqを使用（および暗黙的に宣言します）ここで

req = new XMLHttpRequest(); 

このラインから来ていると思います。この変数は、

これはREQのVARを上書きするために第2のスニペットを防ぎ、最初のゴミ箱ます。この

var req = new XMLHttpRequest(); 

のように、これは負荷の関数に対してローカルVARください グローバルスコープ（windowオブジェクト）で宣言されています ちょうど解雇されたがまだ受信されていないスニペットリクエスト。

jquery loadメソッドを見てください。これはあなたのコードを小さくし、 この問題を回避する必要があります。

希望します。