Jquery Ajax rafraîchir, ne peut pas le faire fonctionner

Question

Okay donc pour faire une longue histoire courte, j'utilise ce script dans un environnement mobile jquery. J'utilise ajax pour récupérer les résultats de la base de données. Je travaille actuellement, mais il ne se réactualise pas automatiquement. J'ai lu de nombreux articles en ligne sur la façon d'utiliser la fonction d'intervalle et j'ai essayé cela. Cependant quand je l'essaye, cela fonctionne, mais il continue à ajouter le contenu en double (le même enregistrement de base de données encore et encore). Je n'arrive pas à faire fonctionner ça. Toute aide serait grandement appréciée, merci d'avance!

Voici mon code (* pas que je retiré la fonction setInterval):

<script type="text/javascript"> 
$(document).delegate("#member_home", "pagecreate", function() 
{ 
var member= new Array(); 
$.ajaxSetup({cache: false}) 
$.ajax({ 
url: '/scripts/alert_display.php', 
data: "", 
isajax: 1, 
dataType: 'json', 
success: function(data) 
    { 
    $.each(data, function(key, val) { 

var friend = val['friend']; 

$('#member_alerts').append(friend+"&nbsp;Wants to be your friend<input type='hidden' value='"+friend+"' id='hidden4' /><button type='submit' id='add'>Accept</button><br />"); 
                 }); 
                } 
              }); 

           }) 
        </script> 

Merci beaucoup pour l'aide, si juste pour être clair, mon code devrait ressembler à ceci ?:

<script type="text/javascript"> 
$(document).delegate("#member_home", "pagecreate", function() 
{ 
var refreshId = setInterval(function() 
{ 
var member= new Array(); 
$.ajaxSetup({cache: false}) 
$.ajax({ 
url: '/scripts/friend_request_display.php', 
data: "", 
isajax: 1, 
dataType: 'json', 
success: function(data) 
    { 
    $.each(data, function(key, val) { 

var friend = val['friend']; 

$('#member_alerts').html(friend+"&nbsp;Wants to be your friend<input type='hidden' value='"+friend+"' id='hidden4' /><button type='submit' id='add'>Accept</button><br />"); 
                 }); 
                } 
              }); 
       }, 1000); 
           }) 
        </script> 

Answer 1

Il continue à ajouter du contenu en double car vous utilisez la fonction append, qui ajoute au DOM actuel dans l'élément. Utilisez plutôt html (vous devrez peut-être également créer les balises div). Voir this SO question pour plus d'informations.

Answer 2

si vous utilisez

$('#member_alerts').html(yourcontenthere); 

cela devrait résoudre votre problème de contenu en double.

Answer 3

Si vous essayez de faire l'actualisation sur un intervalle, vous devez mettre un setTimeout dans le rappel de votre jquery ajax. Cela permettra à la fonction d'attendre jusqu'à ce que la requête soit terminée pour rappeler la fonction.

J'écrirais l'appel dans une fonction distincte, puis je l'appelle une fois lors du chargement de la page et la récursivement avec setTimeout (myFunction, 1000) à chaque fois que la requête ajax se termine. Cela vous évitera d'avoir plusieurs requêtes au serveur en même temps, ce qui pourrait causer des problèmes, comme avec setInterval.