title: jquery wait for ajax method call
body: <p>getOptionsData does an ajax call to fetch a list of options and updates to a fancybox's select div. Once the getOptionsData's ajax call is over,then a fancybox has to be shown by calling openFancyBox. </p>
  
  <p>I think best place for putting openFancyBox method should be inside "success" function in getoptionsData. But, that function is already being used in many places where this fancyBox is not needed.</p>
  
  <p>How can I simulate this behaviour from inside of showFancyBox() method. Because, current implementation below does not wait for getoptionsData ajax to complete before calling fancyBox..</p>
  
  <p>I tried using "then"  : getoptionsData().then(test.openFancyBox()), but it did not solve.</p>
  
  <pre><code>        var test = {
  
          'getOptionsData': function () {
              var uri = encodeURI(ajaxURL);
  
              var success = function (data) {
                  var optionsList = data.optionsList;
                  for (var i = 0; i &lt; optionsList.length; i++) {
                      $("#selectDiv").append("&lt;option value='" + optionsList[i].key + "'&gt;" + optionsList[i].value + "&lt;/option&gt;");
                  }
              }
  
              $.ajax({
                  url: uri,
                  dataType: "json",
                  type: "GET",
                  success: success
              });
  
          },
  
  
          'showFancyBox': function () {
  
            test.getOptionsData(); //Does not wait for Ajax call to be completed
            openFancyBox();
  
          },
  
      }
  </code></pre>