Comment faire des appels AJAX multiples mais séparés dans JQuery

Question

J'essaye de faire 2 appels AJAX séparés en utilisant des boutons. Ce que je veux arriver est: quand Button1 est cliqué, ProductsTable montre des données du webservice; lorsque Button2 est cliqué, OthersTable affiche ses propres données depuis le webservice. Mais maintenant, lorsque l'un des boutons est cliqué, rien ne s'affiche. Je sais que le code fonctionne s'il n'y en a qu'un et qu'il n'est pas enroulé autour d'une fonction .click.

Aucun message d'erreur. ASP.NET 4.0, JQuery 1.4.4. Ne pas utiliser ScriptManager. Ne pas utiliser UpdatePanels.

code ci-dessous:

<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. J'ai découvert que le bouton ASP: provoquait un postback/rechargement juste après l'appel ajax. Donc, il semblait que rien n'était ajouté. La réponse est l'utilisation:

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

utiliser la fonction suivante que j'ai écrit

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

pour l'utiliser, vous pouvez

onclick = "jqajax (yoururlhere, returnedhtml_div_here) "

Answer 3

Comme je l'ai dit regarder le panneau .net et voir si les résultats viennent pour les clics. S'ils viennent, vous avez un bug dans le code html.

Il suffit de retirer votre reliure et alerter le complet et voir si elle imprime. Ensuite, vous pouvez facilement imprimer. Utilisez firebug, panneau de .net, vous pouvez facilement résoudre le problème.