如果单击，仅重新加载TR

Question

I am listing items from SQL in a HTML table <tr>'s and <td>'s. The table is inside a div that is refreshed with jQuery AJAX in every 30 seconds (that is why the div has a unique id). This part works fine. Here is the HTML:

function auto_load()
{
    $.ajax({
        url: "/folder/content.php",
        cache: false,
        success: function(data){
            $("#live").html(data);
        } 
    });
}

$(document).ready(function(){
    auto_load(); //Call auto_load() function when DOM is Ready
});
setInterval(auto_load,30000);

<div id="live">
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <!-- and so on -->
    </table>
</div>

Now what I want to do is make each of the clickable, but so that if it is clicked, 1) a GET request is sent to a PHP file indicating which particular was clicked; 2) and only that particular (or content inside that ) is refreshed right after that, not the whole page.

I cannot do it with a regular http link, as that way if a is clicked, the whole page would be reloaded.

As this is where my knowledge is short, maybe someone kind can share me some ideas on how to solve this. Thanks!

</div>

Answer 1

NOt sure what you want exactly, but if I understand you want to load the row? So you want to listen for a click on the row, read the cells, make an ajax call, and replace the content.

$("#live").on("click", "tbody tr", function() {  //listen for click on a table row
    var tr = $(this),  //the row
        tds = tr.find("td"),  //the cells of the row
        id = tds[0].text(),  //the first column text
        output = tds[1]; //where to output

    $.ajax({
        method: "POST",
        url: "some.php",  //where to post the data
        data: { id: id }  //value to pass to the server
    })
    .done(function( result ) {
        output.html(result);   //output the returned value
    })
    .fail(function() {
        alert( "error" );
    });
});

If that is not right, and you want to load the entire table, than you just need to look up the tree to get the div.

$(document).on("click", "tr", function() { 
    var div = $(this).closest("div");
    console.log(div.attr("id"));
    div.load("foo.php?id=" + div.attr("id")); 
});