Wie man mehrere, aber separate AJAX-Anrufe in JQuery macht

Question

Ich versuche, 2 getrennte AJAX-Anrufe mit Tasten zu machen. Was ich möchte ist: Wenn Button1 angeklickt wird, zeigt ProductsTable Daten vom Webservice an; Wenn Button2 angeklickt wird, zeigt OthersTable seine eigenen Daten vom Webservice an. Aber jetzt, wenn einer der Knöpfe angeklickt wird, wird nichts angezeigt. Ich weiß, dass der Code funktioniert, wenn es nur einen von ihnen gibt und nicht um eine .click-Funktion gewickelt ist.

Keine Fehlermeldungen. ASP.NET 4.0, JQuery 1.4.4. ScriptManager wird nicht verwendet. Keine UpdatePanels verwenden.

-Code unten:

<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

Ok. Ich habe herausgefunden, dass der ASP: Button direkt nach dem Ajax-Aufruf ein Postback/Reload verursacht hat. Es sah also so aus, als würde nichts hinzugefügt. Die Antwort ist, Verwendung:

`<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

verwenden Sie die folgende Funktion, die ich

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

geschrieben haben, es zu benutzen Sie können

Onclick = "jqajax (yoururlhere, returnedhtml_div_here) "

Answer 3

Wie schon gesagt, sehen Sie sich das .net-Panel an und sehen Sie, ob die Ergebnisse für die Klicks kommen. Wenn sie kommen, haben Sie einen Fehler im HTML-Code.

Entfernen Sie einfach Ihre Bindung und warnen Sie die komplette und sehen, ob es druckt.Dann können Sie einfach drucken.

Verwenden Sie Firebug, .net-Panel, können Sie das Problem einfach beheben.