JQuery ajax обновить, не может заставить его работать

Question

Итак, чтобы сделать длинный рассказ, я использую этот скрипт в мобильном enquirment jquery. Я использую ajax в нем для получения результатов из базы данных. В настоящее время я работаю, однако он не обновляется автоматически. Я прочитал многочисленные онлайн-сообщения о том, как использовать функцию заданного интервала, и я пробовал это. Однако, когда я пытаюсь это сделать, он работает, но он продолжает добавлять повторяющийся контент (одна и та же запись базы данных снова и снова). Я просто не могу заставить это работать. Любая помощь будет высоко оценена, спасибо заранее!

Вот мой код (* не я удалил 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> 

Большое спасибо за помощь, так просто быть ясно, мой код должен теперь выглядеть следующим образом ?:

<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

Он продолжает добавлять повторяющийся контент, потому что вы используете функцию append, которая добавляет текущую DOM в элемент. Вместо этого используйте html (вам также может понадобиться создать теги div). См. this SO question для получения дополнительной информации.

Answer 2

если вы используете

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

Тогда это должно решить проблему дублированного контента.

Answer 3

Если вы пытаетесь сделать обновление на интервале, вы должны поместить setTimeout в обратный вызов jquery ajax. Это позволит функции ждать, пока запрос не будет завершен, чтобы снова вызвать функцию.

Я хотел бы написать вызов в отдельную функцию, затем вызвать его один раз при загрузке страницы и рекурсивно с помощью setTimeout (myFunction, 1000) каждый раз, когда заканчивается запрос ajax. Это предотвратит одновременное обращение нескольких запросов к серверу, что может вызвать проблемы, как и с setInterval.