ボタンを使用して2つの別々のAJAX呼び出しを作成しようとしています。私は何が起こりたいですか:Button1がクリックされたときProductsTableはWebサービスからのデータを表示します。 Button2をクリックすると、OtherTableはWebサービスからの独自のデータを表示します。しかし、今、いずれかのボタンをクリックすると、何も表示されません。私は、コードが1つしかなく、それが.click関数にラップされていない場合、コードが動作することを知っています。JQueryで複数のAJAX呼び出しを別々に行う方法
エラーメッセージはありません。 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>
これは奇妙ですが、我々はページ内にできるだけ多くのAJAX reqeustsを持つことができます:答えは使用でありますバックエンドのブレークポイント – kobe
クリックした後にリクエストが送信されていますが、それだけで十分です。私の構文は間違っていますか? – dotnetN00b
レンダリングされたHTMLの外観はどのようなものですか? –