Replacing jQuery AJAX Content Does Not Work

advertisements

I've got a maps page in my project which shows a list of map-thumbnails. When I click on a "ShowMap" button a bigger map is opened and a list of comments is loaded and showed above the big map. I did that with AJAX and jQuery. There is also a "CloseMap" button which hide the div that contains both the big map and the comments. The "ShowMap" works because it loads the right map and the right comments linked to that map. The problem is that if I use APPEND it will of course append the comments of the different maps. So,if I open MAP1,it opens MAP1 and it appends the MAP1's comments. Then I close MAP1 and open MAP2. It correctly opens MAP2 and loads the MAP2's comments BUT it appends them under the MAP1's comments. I WOULD like to substitute the content instead. I've already tried something like $("#output").html(row,idU,text_map) but it does not work :(

function show_comments(i)
{

$.ajax({
  url: 'api.php',
  data: {idMap: i},
  dataType: 'json',
  success: function(rows)
  {
    for (var i in rows)
    {
        var row = rows[i];
        var idU = row[1];
        var text_map = row[3];

   $('#output').append("<b> idU: </b>"+idU+"<b>text </b>"+text_map)
   .append("<hr />");

    }
  }
});

};


If you want to replace the content then first remove its previous content by calling html() and passing empty string in it:

 $('#output').html(""); // this will remove previous content of #output
 $('#output').append("<b> idU: </b>"+idU+"<b>text </b>"+text_map)
   .append("<hr />");