Correctly displaying results from an ajax request to html

Question

I just made a simple request using JQuery's AJAX function that will be retrieving data when it's done requesting. This is my code :

('.submit').on('click', function(e){

  e.preventDefault();
  var tobesent  = $('input.test').val();
  $.ajax({
     type : 'POST',
     dataType : 'json',
     url : '<?php echo base_url("ajaxcontroller/submit"); ?>',
     data : {'content' : tobesent}
  })
  .done(function(data){
     $.each(data, function(k, v){
        $('div.placedhere').append(v.fullname);
     })
   })
   .fail(function(data){
     console.log(data);
    })
});

It worked very nice, it did receiving data. But the problem is, each time I click the submit button to make a new request, the retrieved results get appended to the end of the previous results.

I know it happens because the $('div.placedhere').append(v.fullname) .

How can I clean the div before I start making a new request so the div only shows the newest results?

I've done things like $('div.placedhere').remove() before $('div.placedhere').append(v.fullname) but the div only shows the last record from the retrieved data.

I had also tried to change the append() function to html() function, I've got the same result, the div only showed me the last record of the data.

How can I clean the div before I start making a new request so the div only shows the newest results?

Answer 1

How can I clean the div before I start making a new request so the div only shows the newest results?

You can use .empty()

 var div = $("div.placedhere"); // cache selector outside of `click` handler

---

 .done(function(data) {
   div.empty(); // remove child nodes of `div.placedhere`
   $.each(data, function(k, v){
    div.append(v.fullname);
   })
 })

Answer 2

You can do it by 2 way

1)clear div before ajax call

('.submit').on('click', function(e){

   e.preventDefault();

   $('div.placedhere').empty(); //clear div before ajax call

   var tobesent  = $('input.test').val();
   $.ajax({
     type : 'POST',
     dataType : 'json',
     url : '<?php echo base_url("ajaxcontroller/submit"); ?>',
     data : {'content' : tobesent}
  })
  .done(function(data){
     $.each(data, function(k, v){
     $('div.placedhere').append(v.fullname);
  })
}).fail(function(data){
     console.log(data);
  })
});

2)use HTML instead of APPEND ( html makes div empty then appends new value)

('.submit').on('click', function(e){

   e.preventDefault();

   var tobesent  = $('input.test').val();
   $.ajax({
     type : 'POST',
     dataType : 'json',
     url : '<?php echo base_url("ajaxcontroller/submit"); ?>',
     data : {'content' : tobesent}
  })
  .done(function(data){
     $.each(data, function(k, v){
     $('div.placedhere').html(v.fullname); // use `html` like this
  })
}).fail(function(data){
     console.log(data);
  })
});