title: Updating or empty a div and then re-populate from a function in jQuery
body: <p>What I'm trying to achieve is when a database is updated the div that lists the database data is updated without refreshing the page. I have a function that sends a <code>$get.json</code> request to a php processing page that returns the data held in the database and displays the returned data in the div, I know this works because the function is called on document ready and the data is displayed in the div. I have tried to empty the div, which I can achieve easily, but when I call the function that would essentially reload the div from the database it will not run.</p>
  
  <p>What I have tried is the following</p>
  
  <pre><code>$('#adminResult').empty();
  $('#adminResult').listJuniorAdmin();
  </code></pre>
  
  <p>When I run this within my code the <code>#adminResult</code> is emptied however the <code>.listJuniorAdmin();</code> doesn't seem to work as the div is not repopulated with the database data. If the page is refreshed the div is populated from the <code>.listJuniorAdmin();</code> which will show any updates from the database. It's almost as if once the <code>.empty()</code> function fires it exits the code. I have also looked at reloading the div with <code>.load()</code>but needs html from a php page to work I believe. Can anyone show me how to empty the div and then call my already working function please.</p>
  
  <p>This is my jquery function</p>
  
  <pre><code>  listJuniorAdmin: function () {
  &lt;!--start of getting and adding the list of junior admin to the junior admin list--&gt;
  
      $.getJSON('includes/juniorAdminList.php', function(data)    { &lt;!--jason call to juniorAdminList.php processing page--&gt;
  
          $.each(data, function(key, val) { &lt;!--iterate through the responce from the juniorAdminList.php processing page--&gt;
  
          var Junior_Admin_ID = val.Junior_Admin_ID; &lt;!--assign each Junior_Admin_ID from the database to the variable Junior_Admin_ID--&gt;
          var Junior_Admin_Name = val.Junior_Admin_Name; &lt;!--assign each Junior_Admin_Name from the database to the variable Junior_Admin_Name--&gt;
  
  //console.log(Junior_Admin_ID); &lt;!--print out Junior_Admin_ID variable in browser console for error checking purposes. Commented out in final code--&gt;
  //console.log(Junior_Admin_Name);   &lt;!--print out Junior_Admin_Name variable in browser console for error checking purposes. Commented out in final code--&gt;
  
  $('#adminResult').append('&lt;input id="' + key + '" class="deleteCheckBox" type="checkbox" value="Delete"&gt;')
  &lt;!--$('#adminDelete').append('&lt;input id="' + key + '" class="deleteCheckBox" type="checkbox"&gt;')--&gt;
  $('#adminResult').append('&lt;div id="' + key + '" class="list_junior_admin_ID"&gt;' + Junior_Admin_ID + '&lt;/div&gt;');
  &lt;!--$('#adminDelete').append('&lt;div id="' + key + '" class="delete_list_junior_admin_ID"&gt;' + Junior_Admin_ID + '&lt;/div&gt;');--&gt;
  $('#adminResult').append('&lt;div id="' + key + '" class="list_junior_admin_Name"&gt;' + Junior_Admin_Name + '&lt;/div&gt;');
  &lt;!--$('#adminDelete').append('&lt;div id="' + key + '" class="delete_list_junior_admin_Name"&gt;' + Junior_Admin_Name + '&lt;/div&gt;');--&gt;
  
          }); &lt;!--end of iterate through the responce from the juniorAdminList.php processing page--&gt;
  
  
      }); &lt;!--end of jason call to juniorAdminList.php processing page--&gt;
  &lt;!--end of getting and adding the list of junior admin to the junior admin list--&gt;,
      },
  
  &lt;!--        myfunction2: function () --&gt;
     &lt;!-- {--&gt;
     &lt;!-- }--&gt;
  
  
  });
  &lt;!--end of declare listJuniorAdmin function--&gt;
  </code></pre>
  
  <p>This is my html code for the results div</p>
  
  <pre><code>&lt;!--start of admin display div--&gt;
  &lt;div id="adminDisplay"&gt;
  &lt;label class="label5"&gt;List of Junior Admin&lt;/label&gt;
  
  &lt;!--start of admin result div--&gt;
  &lt;div id="adminResult"&gt;&lt;/div&gt;
  &lt;!--end of admin result div--&gt;
  
  &lt;/div&gt;
  &lt;!--end of admin display div--&gt;
  
  
  &lt;!--start of admin delete div--&gt;
  &lt;div id="adminDelete"&gt;
  
  &lt;label class="label4"&gt;Delete Junior Admin&lt;/label&gt;
  
  &lt;/div&gt;
  &lt;!--end of admin delete div--&gt;
  
  
  &lt;input type="button" class="button3" id="closeAdmin" value="Close Admin"&gt;
  
  &lt;/div&gt;
  &lt;!--end define admin div--&gt;
  </code></pre>