Question

Hi I am using ajax post and json in jquery to read the database output from php. now once i get the data onClick if I press the button again the data again gets populated below it. I want to replace the data with new content instead. I am a bit new to jquery & ajax.
The code i am using is:

    $.ajax({
type:'POST',
dataType: 'json',
url:'database.php',
data:{search: $("#search").val()},
success:function(rows){
    for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').html($('#output').html() + '<tr><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>'        
        );
});

Answer 1

You can use empty() method and then append() the new data, Try the following:

success:function(rows){
    $('#output').empty(); // Removes all child nodes of the set of matched elements from the DOM.
    for (var i = 0, len = rows.length; i < len; i++) {
        $('#output').append('<tr><td>'+ rows[i].Cat_Name +'</td><td>'+ rows[i].Drug_Caty +'</td><td>'+ rows[i].G_Name +'</td><td>'+ rows[i].B_Name +'</td><td>'+ rows[i].D_Indications +'</td></tr>'        
    };
}