Jquery ajax refresh, can't get it to work

Question

Okay so to make a long story short I am using this script in a jquery mobile envoirment. I am using ajax in it to grab results from the database. I currently works, however it does not refresh automatically. I have read numerous online posts about how to use the set interval function and I have tried that. However when I try it, it works, but it keeps adding duplicate content( the same database record over and over again). I just can't seem to get this to work. Any help would be much appreciated, thanks in advance!

Here is my code (*not I removed the setinterval function):

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

Thank you so much for the help, so just to be clear, my code should now look like this?:

<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

It keeps adding duplicate content because you're using the append function, which adds to the current DOM in the element. Use html instead (you may also need to create the div tags). See this SO question for more info.

Answer 2

if you use

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

Then that should solve your problem of duplicate content.

Answer 3

If you are trying to do the refresh on an interval, you should put a setTimeout in the callback of your jquery ajax. This will allow the function to wait until after the request is complete to call the function again.

I would write the call into a separate function, then call it once when the page loads, and the recursively with setTimeout(myFunction,1000) every time the ajax request finishes. This will prevent you from having multiple requests to the server at the same time which could cause problems, as you would with setInterval.