title: Reload an AJAX loaded page after update
body: <p>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.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  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;
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
    $("#ref_butn").click(function(){
   location.reload();
    });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>I know this can be done, just not sure where to turn after searching for an answer for a while.</p>