JQueryで複数のAJAX呼び出しを別々に行う方法

Question

ボタンを使用して2つの別々のAJAX呼び出しを作成しようとしています。私は何が起こりたいですか：Button1がクリックされたときProductsTableはWebサービスからのデータを表示します。 Button2をクリックすると、OtherTableはWebサービスからの独自のデータを表示します。しかし、今、いずれかのボタンをクリックすると、何も表示されません。私は、コードが1つしかなく、それが.click関数にラップされていない場合、コードが動作することを知っています。

エラーメッセージはありません。 ASP.NET 4.0、JQuery 1.4.4。 ScriptManagerを使用していません。 UpdatePanelsを使用していません。以下

コード：

<script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script> 
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script> 
<script id="ProductsTemplate" type="text/x-query-tmpl"> 
    <tables id="ProductsTemplate">    
     <thead> 
     </thead> 
     <tbody> 
      {{each d}} 
       {{tmpl($value) '#ProductsRowTemplate'}} 
      {{/each}} 
     </tbody>   
    </tables> 
</script> 
<script id="ProductsRowTemplate" type="text/x-query-tmpl"> 
    <tr> 
     <td>${title}</td> 
     <td>${size}</td> 
     <td>${price}</td> 
    </tr> 
</script> 
<script id="Products2Template" type="text/x-query-tmpl"> 
    <tables id="Products2Template">    
     <thead> 
     </thead> 
     <tbody> 
      {{each d}} 
       {{tmpl($value) '#Products2RowTemplate'}} 
      {{/each}} 
     </tbody>   
    </tables> 
</script> 
<script id="Products2RowTemplate" type="text/x-query-tmpl"> 
    <tr> 
     <td>${title}</td> 
     <td>${size}</td> 
     <td>${price}</td> 
    </tr> 
</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#Button1").click(function() { 
      $.ajax({ 
       type: "POST", 
       url: "JSON-WebService.asmx/getProducts", 
       data: "{}", 
       contentType: "application/json; charset=UTF-8", 
       dataType: "json", 
       success: function (data) { 
        $('#ProductsTemplate').tmpl(data).appendTo('#ProductsTable'); 
        alert("Products works"); 
       }, 
       failure: function (data) { 
        alert("Products didn't work"); 
       } 
      }); 
     }); 

     $("#Button2").click(function() { 
      $.ajax({ 
       type: "POST", 
       url: "JSON-WebService.asmx/getProducts", 
       data: "{}", 
       contentType: "application/json; charset=UTF-8", 
       dataType: "json", 
       success: function (data) { 
        $('#Products2Template').tmpl(data).appendTo('#OthersTable'); 
        alert("Products2 works"); 
       }, 
       failure: function (data) { 
        alert("Products2 didn't work"); 
       } 
      }); 
     }); 

    }); 
</script> 
<title>Using JQuery</title> 

<form id="form1" runat="server"> 

<div id="ProductsTable"> 

</div> 

<div id="OthersTable"> 

</div> 

<div> 
    <asp:Button ID="Button1" runat="server" Text="Products" /> 
    <asp:Button ID="Button2" runat="server" Text="Products2" /> 
</div> 

</form> 

Answer 1

私はASP：Buttonがajax呼び出しの直後にポストバック/リロードを引き起こしていることを知りました。それで、何も追加されていないように見えました。 、私はあなたが持っている放火魔.NETのパネルで結果を見たりすることができ、バックエンドに何か問題があると思い

`<script type="text/javascript"> 
$(document).ready(function() { 
    $("#Button1").click(function (evt) { 
     evt.preventDefault(); 
     $.ajax({ 
      type: "POST", 
      url: "JSON-WebService.asmx/getProducts", 
      data: "{}", 
      contentType: "application/json; charset=UTF-8", 
      dataType: "json", 
      success: function (data) { 
       $('#ProductsTemplate').tmpl(data).appendTo('#ProductsTable'); 
       alert("Products works"); 
      }, 
      failure: function (data) { 
       alert("Products didn't work"); 
      } 
     }); 
    }); 
}); 
</script>` 

Answer 2

はそれを使用するために、私は

function jqajax(urlp,thediv) { 
      $.ajax({ 
      type: "GET", 
      url: urlp, 
      dataType: "html", 
      //data: "header=variable", 
      success: function(data){ 
       if($('#'+thediv)) 
       { 

        $("#"+thediv).html(data); 

       } 
       else 
       { 

        $("#"+thediv).parent().html(data); 
       } 
      } 
      }); 
} 

を書いた次の関数を使用することができます

のonclick = "jqajax（yoururlhere、returnedhtml_div_here） ; "

Answer 3

私が言ったように.netパネルを見て、結果がクリックに対して来ているかどうかを確認します。彼らが来ている場合は、HTMLコードにいくつかのバグがあります。

あなたのバインディングを削除し、完全な状態を警告し、印刷されているかどうかを確認してください。簡単に印刷できます。

Firebug、.netパネルを使用すると、問題を簡単に修正できます。