jQuery Function Runs 1 Function Per Page Load

jQuery Function Runs 1 Function Per Page Load

Hi Guys,

      I have this jQuery $_ POST for Create and Delete the problem is I can only activate one and I have to load the entire page before executing either of the two. How can I execute one function after the other one is done?

Now I just load the div where all the data is attached so that I don't have to load the whole page.
Here's my code.

  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  2. <script type='text/javascript'>
  3. $(document).ready(function(){ 
  4.    
  5.     $("#addNewVendor").click(function() {
  6.         $.ajax({ 
  7.             type: "POST", 
  8.             //dataType: "json",
  9.             url: "create.php", 
  10.             data: {vendorName: $("#vendorName_new").val(), owner: $("#owner_new").val(), city: $("#city_new").val()},
  11.             success: function(){ 
  12.                 $(this).hide();
  13.                 //$('div.success').fadeIn();
  14.             showUsers()
  15.            
  16.             } 
  17.         });
  18.     return true
  19.     });
  20.    
  21.     $(".deleteBtn").click(function() {
  22.         if(confirm('Are you sure?')){
  23.             var $id2 = $(this).val();
  24.             $.post("delete.php", { id: $id2 })
  25.             .done(function(data) {
  26.                 showUsers();
  27.             });
  28.         }
  29.     });
  30. });
  31. function showUsers(){
  32.     $('#pageContent').load('read.php', function(){ $('#loaderImage').hide(); });
  33. }
  34. </script>