Question

I am building a webapp using jQuery Mobile and AJAX to pull out SQL from the server with the help of PHP.

The callback is fine as it’s displaying the correct values that I want. The problem is every time the page is accessed, the same data is being appended into the list thereby creating duplicates.

This is the ajax query:

function getNews() {
  $.ajax({
    url: 'http:mylivesite/news_ajax.php?',
    dataType: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function(data, status) {
      $.each(data, function(i, item){
        var newNews = '<li>'+
        '<p>'+item.title+'</p>'+
        '<p>'+item.content+'</p>'+
        '</li>';
        $('#currentNews').append(newNews);  
      });
    },
    error: function() {
      output.text('There was an error loading the data.');
    }
  });
}

I have added cache: false, but the same result. What have I missed?

Answer 1

Well, that’s what happens when you append stuff. Stuff gets appended.

Empty the target element first if that’s the semantics you need:

success: function(data, status) {
        $('#currentNews').empty(); // <-----------------
        $.each(data, function(i, item) {
            var newNews = '<li>'+
                                '<p>'+item.title+'</p>'+
                                '<p>'+item.content+'</p>'+
                               '</li>';
            $('#currentNews').append(newNews);
        });
}