javascript - Can't get jQuery to execute code in the correct order -

I have some ordering issues. I have some code that does the following: On page load, through 3 tables From the loop and grab the contents from the server and prepare the table with the table and answer the table to the content

I am having problems to do this work. I get this right by inspecting the element (calling function) I can, but it is not user friendly. I To know that I am Is there any way that I can perform the function, choose this command. What I've been doing so far:

  $ (document) .ready (function () {if (dateCounter == null) {// Start the calendar from today's date var current = new DateChange (current, "", 0); // function to grab all the contents // create the table on the responsive liar = false; updateTables = function (if) (if (($ (window) .width () & amp; amp; amp; amp; Off; off) {console.log ("Window Width <992px"); Close True = ;. $ ("table.responsive") Each ( Function (i, element) {console.log ("splitting table"); splitTable ($ (element))}}; return true;} else if (closed & amp; & amp; ($ (v Indo) .width ()> 992) {stop = false; $ ("table."). Each (function (i, element) {unplitTable ($ (element))}};}}; function SplitTable (original) {...} function unplitTable (original) {...}}}); In theory, on page load, the first table should be populated, then the table should be responsive, but this is not the case. It seems that everything is being presented concurrently and therefore I get many unavailable / hidden content in my table. I do not know that there is nothing to prevent from displaying my table correctly in AJAX Call Change Functions in my date.  
 The date change function has a code snippet:  
  function dateChange (dateInput, nGuests, vName) {// format dates // for every table (3 tables) $ ("Title"). Take HTML / server from server ready to grab content from each function (index, element) {// pop up in table $ .ajax ({url: "/grab_Content.asp?boatType="+boatName+"& ; Date = "+ dateInput +" & amp; guests = "+ guests +" & boatName = "+ VName +", data type: "html", success: function (data) {table.html (data);}})} Yes, AJAX calls are asynchronous  $ .jax  
 

makes a promise that you can use to control the sequence. First of all, return the promise DateChange :

  function dateChange (dateInput, nGuests, vName) {$ .ajax ({// ...}) return;}  

< P> Then when you call it:

  dateChange (current, "", 0) .then (function () {// make table response var Switched = false; //}  

This will ensure that the AJAX call will be completed before the table is responsive.

If you have multiple AJAX calls, you must store promises in an array and $ When :

  var promises = []; Must use $ ('. Whatever') (Function () {var promise = $ .ajax ({/*...*/}); promise.pash (promise);}); $ when. Apple ($, promise). Don (function () {Console.log ('all done'); // do work ....});  

Note that we need to use Function.prototype.apply because $ When treats an array of promises like a promise.