Reload an AJAX loaded page after update

Question

I'm trying to understand how a dynamic page loaded with AJAX can be reloaded after one of the records is updated. I've got the following jquery script on my page.

<script type="text/javascript">
function showUser(str) {
    if (str == "") {
        $("#txtHint").empty();
        return;
    }
    $("#txtHint").load("data_ajax.php?q=" + str);
}
$(document).ready(function () {
    $("#txtHint").delegate(".update_button", "click", function () {
        var id = $(this).attr("id");
        var dataString = 'id='+ id ;
        var parent = $(this).parent();
        $.ajax({
            type: "POST",
            url: "data_update_ajax.php",
            data: dataString
        });

        return false;
    });
});
</script>

I thought I could get this done with the code below if I call it from within the data_ajax.php page after it loads the corresponding data from the database, but it refreshes the whole page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#ref_butn").click(function(){
 location.reload();
  });
});
</script>

I know this can be done, just not sure where to turn after searching for an answer for a while.

Answer 1

You would just do what you did to initially populate it:

$("#txtHint").load("data_ajax.php?q=" + str);

That will load your "new" AJAX and overwrite what's currently inside #txtHint with it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#ref_butn").click(function(){
    //location.reload();
    $("#txtHint").load("data_ajax.php?q=" + str); // I don't know where str comes from, but you get the idea.
  });
});
</script>

Answer 2

A part/block/div of the page cannot be refreshed but can be dynamically updated with the data on a callback.

On the server side, echo the data you'd like to show on the client-side. For example:

//Successful update in the database
$callback = array('heading' => 'Success!', 'message' => 'The data was successfully submitted');
echo json_encode($callback);

To retrieve the data you've to pass success callback function to your ajax block.

        $.ajax({
            type: "POST",
            url: "data_update_ajax.php",
            data: dataString,
            dataType: 'json',
            success: function(data) {
                         $('#yourDiv .heading').text(data.heading);
                         $('#yourDiv .message').text(data.message);
                     }
        });

Answer 3

Ben's answer worked, but he lead me to figure out an easier way to do this. So I essentially called the original function showUser(str) { on the button and just had to give it the selected $_GET value.

<button name="users" onClick="showUser(this.value)" value="<?php echo $_GET['q']; ?>">Refresh Content</button>

This button was placed on the data_ajax.php page, not the parent index.php for anyone looking to do the same. So, every time I hit the Refresh Content button, the table refreshes without reloading the page and I no longer lose the loaded content.