How to refresh a table inside a div tag using ajax php

Question

I have an ajax table click event that gets database data according to the clicked name from the first table and display the second table with employee information. The problem now is that the employee information data only pile up in the second table, I want to refresh the second table every name that the user clicked. By the way the second table is inside a div tag. Here is my ajax code:

function putThis(control){
var getid = control.innerText;
var first = $("#from[name=from]").val();
var second = $("#to[name=to]").val();
$.ajax({
    type:'POST',
    url: 'testtable.php',
    data: {id: getid,from: first,to: second},
    cache: false,
    global: false,
    success:function(data)
    {
    $("#result").append(data);
    alert("Success: " + getid + " " + first + " to " + second);
    }
});
}

Answer 1

If I am reading your question properly (and correct me if I am not), you want to replace the contents of the element rather than append the data to the element.

This can be accomplished with your code by changing this line :

$("#result").append(data);

To this :

$("#result").html(data);

append will put data at the end of the element before the closing tag, while html will consume the element with the data you are inserting.

Answer 2

In your code as I can see you want to click on user name from left panel and call ajax for his/her information from database . But as you are appending that information to div and this append call append the data a the end of the div instead you can call $("#result").html(data); . So final ajax call will be-

$.ajax({
    type:'POST',
    url: 'testtable.php',
    data: {id: getid,from: first,to: second},
    cache: false,
    global: false,
    success:function(data)
    {
    $("#result").html(data);
    alert("Success: " + getid + " " + first + " to " + second);
    }
});

if still issue persists you can do following steps - 1. check any error in console tab in firebug. 2. if ajax is failing at any point .