Comment rafraîchir une div sur un clic sur un bouton

Question

J'ai besoin de votre aide pour faire la partie ajax pour rafraîchir la div sur le bouton "Actualiser". J'ai besoin d'un exemple.

J'ai essayé de le faire pour être rafraîchi evey 15 secondes comme par exemple je l'ai trouvé sur Internet.

mais cela n'a pas fonctionné, pouvez-vous s'il vous plaît aider

Voici mon code:

<script type="text/javascript"> 
function Ajax(){ 
    var xmlHttp; 
    try{  
     xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari 
    } 
    catch (e){ 
     try{ 
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer 
     } 
     catch (e){ 
      try{ 
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch (e){ 
       alert("No AJAX!?"); 
       return false; 
      } 
     } 
    } 

    xmlHttp.onreadystatechange=function(){ 
     if(xmlHttp.readyState==4){ 
      document.getElementById('ReloadThis').innerHTML=xmlHttp.responseText; 
      setTimeout('Ajax()',10000); 
     } 
    } 
    xmlHttp.open("GET","MQSTATUS.jsp",true); 
    xmlHttp.send(null); 
} 

window.onload=function(){ 
    setTimeout('Ajax()',10000); 
} 
</script> 

il me donne une erreur qui est une erreur d'exécution inconnue dans la ligne

<code> 
    xmlHttp.open("GET","MQSTATUS.jsp",true); 
</code> 

Comment dois-je modifier le code, j'ai essayé de changer le nom et faire quelques modifications, mais cela n'a pas fonctionné. J'ai essayé de mettre/url avant l'

<code> 
    xmlHttp.open("GET","/MQSTATUS.jsp",true); </code> 

Answer 1

Je commencerais par séparer l'initialisation et la mise à jour de l'objet XHR et de l'appel AJAX. De cette façon, vous n'avez qu'un seul objet XHR et il fait ce que vous lui dites de faire, tout le temps. Tout d'abord, vous initialisez l'objet XHR à partir du gestionnaire onload de l'objet window. Ensuite, vous émettez de nouvelles demandes à cet objet en appelant updateAjax() dans le gestionnaire onclick de votre bouton d'actualisation. Il ressemblera à quelque chose comme ceci:

<script type="text/javascript"> 
var xmlHttp; 

function initAjax() { 
    try { 
     xmlHttp = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari 
    } catch(e) { 
     try { 
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer 
     } catch(e) { 
      try { 
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch(e) { 
       alert("No AJAX!?"); 
       return false; 
      } 
     } 
    } 

    xmlHttp.onreadystatechange = function() { 
     if(xmlHttp.readyState == 4) { 
      document.getElementById('ReloadThis').innerHTML = xmlHttp.responseText; 
     } 
    } 
} 

function updateAjax() { 
    xmlHttp.open("GET", "MQSTATUS.jsp", true); 
    xmlHttp.send(null); 
} 

window.onload = function() { 
    initAjax(); 
} 
</script> 

Et puis dans votre code HTML mis

<input type="button" value="Refresh" onclick="updateAjax()" /> 

Espérons que cela vous aide un peu.

Answer 2

This peut être ce que vous cherchez, en utilisant jquery. Here est l'exemple (que vous pouvez également trouver dans le lien précédent)

D'autres recherches sur google montrent la même approche: vous "masquer" en quelque sorte la div et vous chargez le contenu à nouveau et l'afficher, en enchaînant les opérations nécessaires. Je ne pense pas, cependant, que vous pouvez le faire avec javascript seulement, vous avez besoin d'une bibliothèque externe (comme jquery)

Answer 3

Essayez d'ajouter un contrôle AJAX 'UpdatePanel' au contrôle de bouton. ajouter ce genre de code sur événement Click bouton:

<asp:UpdatePanel runat="server"> 
     <ContentTemplate>   
      <asp:Label ID="Label1" runat="server"></asp:Label> 
      <asp:Timer ID="timer1" Interval="500" runat="server" ontick="timer1_Tick"></asp:Timer> 
      <%--<asp:Button ID="Button1" runat="server" Text="Button" />--%> 
     </ContentTemplate> 
</asp:UpdatePanel> 

Answer 4

je ne suis pas sûr, mais je pense que vous devriez d'abord supprimer setTimeout (« Ajax() », 10000); dans votre appel AJAX. Deuxièmement, essayez d'ajouter le chemin déployé complet de cette jsp. ie. si vous avez un chemin de déploiement de http://localhost:8080/MYAPPLICATION/MQSTATUS.jsp, essayez avec xmlHttp.open ("GET", "/ MYAPPLICATION/MQSTATUS.jsp", true);