CODEWITHSUNDEEP
jqueryajax
fortm
fortm

Reputation: 4208

jquery wait for ajax method call

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.

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.

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..

I tried using "then" : getoptionsData().then(test.openFancyBox()), but it did not solve.

        var test = {

        'getOptionsData': function () {
            var uri = encodeURI(ajaxURL);

            var success = function (data) {
                var optionsList = data.optionsList;
                for (var i = 0; i < optionsList.length; i++) {
                    $("#selectDiv").append("<option value='" + optionsList[i].key + "'>" + optionsList[i].value + "</option>");
                }
            }

            $.ajax({
                url: uri,
                dataType: "json",
                type: "GET",
                success: success
            });

        },


        'showFancyBox': function () {

          test.getOptionsData(); //Does not wait for Ajax call to be completed
          openFancyBox();

        },

    }

Upvotes: 1

Views: 104

Answers (3)

Khanh TO
Khanh TO

Reputation: 48982

From jQuery version 1.5

Try:

var test = {

        'getOptionsData': function () {
            var uri = encodeURI(ajaxURL);

            var success = function (data) {
                var optionsList = data.optionsList;
                for (var i = 0; i < optionsList.length; i++) {
                    $("#selectDiv").append("<option value='" + optionsList[i].key + "'>" + optionsList[i].value + "</option>");
                }
            }

            return $.ajax({ //return the promise
                url: uri,
                dataType: "json",
                type: "GET",
                success: success
            });
        },

        'showFancyBox': function () {

          test.getOptionsData().done(function(){ //use done instead of then if the version is below 1.8
                test.openFancyBox();
          }); 
        },
    }

Upvotes: 1

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

You can use callbacks.

Here is an example;

var test {

        'getOptionsData': function (callback) {
            var uri = encodeURI(ajaxURL);

            var success = function (data) {
                var optionsList = data.optionsList;
                for (var i = 0; i < optionsList.length; i++) {
                    $("#selectDiv").append("<option value='" + optionsList[i].key + "'>" + optionsList[i].value + "</option>");
                }
                callback();
            }

            $.ajax({
                url: uri,
                dataType: "json",
                type: "GET",
                success: success
            });

        },


        'showFancyBox': function () {

          test.getOptionsData(function() {
            openFancyBox();
          }); 
        },

    }

showFancyBox will be called after getOptionData finished

Upvotes: 3

Felix
Felix

Reputation: 38112

Try to use $.when:

$.when(test.getOptionsData()).done(openFancyBox);

Upvotes: 1

Related Questions