jquery .when not calling the .done function

Question

I am trying to call a function that presents a modal window to the user. I want to wait for the answer then call another function to perform a save. My initial function is being called, but the function in the done is not.

I have attempted to use a settimeout and .then with no luck so far.

    function _bindProviderSectionSave() {
        //Provider Tab Save
        copyProviderService = 0;
        if (serviceProvider != $("#prov-service-prov").val() || serviceProviderSite != $("#prov-service-prov-site").val()) {
            $.when(copyProvider()).done(function () {
                saveProvider();
            });
        } else saveProvider();
    }

    function copyProvider() {
        dfr = $.Deferred();

        copyProviderService = 0;
        app.showDecisionModal('Copy Service Provider to Service Lines', mg.ServiceProviderCopyWarning, 'Yes', 'No', function () {
            copyProviderService = 1;
        }, function () {
            copyProviderService = 0;
        }, d.close);
        //return _copy;
        return dfr.promise();
    }

function saveProvider() {
        //Provider Tab Save
        var data = {};
        data.AuthPlanHeaderId = g.AuthHeaderId;
        data.RequestingProvider = $("#prov-requesting-provider").val();
        data.RequestingProviderSite = $("#prov-requesting-prov-site").val();
        data.RequestContactName = $("#prov-requesting-name").val();
        data.RequestContactPhoneEmail = $("#prov-requesting-contact").val();
        data.ServiceProvider = $("#prov-service-prov").val();
        data.ServiceProviderSite = $("#prov-service-prov-site").val();
        data.ServiceContactPhoneEmail = $("#prov-service-contact").val();
        data.Facility = $("#prov-facilityId").val();
        data.FacilitySite = $("#prov-facility-site").val();
        data.FacilityContactPhoneEmail = $("#prov-facility-contact").val();
        data.copyServices = copyProviderService;

        let ajaxSettings = {
            values: { data: data, userId: g.userId },
            url: g.appPath + '/ServiceRequest/SaveSRReviewProviders'
        };
        app.ajax(ajaxSettings).done(function () {
            _toggleTabButtons(providerTab, false);
            _toggleControls(providerTab, false);
        }); 
    }

The copyProvider function is being called since the modal window is being presented. However, when I click on either of the modal buttons, it just closes the window and does not proceed to the saveProvider function.

Answer 1

You call dfr.promise() to return it to $.when(), but you never resolve that promise for done() to fire.

To fix this, call drf.resolve() and pass the value required, something like the below. Note that it has the added benefit of removing the need for the copyProviderService global variable, as the values are passed directly to the required functions.

Finally, as noted by @Bergi, you don't need to call $.when() at all, as copyProvider() returns a promise itself. Try this:

function copyProvider() {
  var dfr = $.Deferred();
  app.showDecisionModal('Copy Service Provider to Service Lines', mg.ServiceProviderCopyWarning, 'Yes', 'No', function() {
    dfr.resolve(1);
  }, function() {
    dfr.resolve(0);
  }, d.close);
  return dfr.promise();
}

function saveProvider(foo) {
  console.log(foo); // 1 || 0
  // .. the rest of your logic
}

copyProvider().done(function(value) {
  saveProvider(value); // value is the 0 or 1 from the resolved promise.
});