Return a value inside a promise

Question

I have defined a beforeSubmit method in a jqGrid like this: (notice I'm using AngularJS, which provides $http service to get and post data)

beforeSumit: function(data) {
    // I need this to be filled with default data atomatically
    if(data.someField == "") {
        $http.get('defaultValue/' + data.id).success(function(getData) {
            // I put the default value into the data model returned to server
            data.someField = getData;
            // return sentence, jqGrid should continue saving without message
            return [true, null];
        }).error(function() {
            // return sentence, jqGrid should keep the edit form, showing a message
            return [false, "Couldn't get data from server"];
        });
    } else {
        // return sentence, jqGrid should continue saving without message
        return [true, null];
    }
}

What I'm doing is to check if someField is empty, and if it's empty I get a default value from server.

The problem is that return statement is throwing an undefined method error when I uses it inside the success/error of $http.get.

Is it posible to return a value there? I need to notify jqGrid if it should continue the process of saving data or not...

EDIT: Thanks to @Oleg and @Sacho comments I've realised I can't use asynchronous functions inside beforeSubmit, so finally I have put the $http call in the onselectrow event of jqGrid.

Now I need to ask the user, beforeSubmit edit form, if wants to set the default value or wants to go back to the edit form and write a custom value for the field. I can do it with a modal using $modal AngularJS's service but I'm afraid it's asynchronous too so I get the same problem than before.

Is there a way to open a modal synchronously? It doesn't matter if the browser frezees as the process won't continue until the user decides.

This is the code now:

beforeSubmit: function(data) {
    // I get this value in the onselectrow event
    var defaultValue = $scope.defaultalue;
    var modalInstance = $modal.open({
        templateUrl: 'app/partials/selectOptionDialog.html',
        controller: 'SelectOptionDialogCtrl',
        windowTemplateUrl: 'app/partials/modalTemplate.html',
        size: 'sm',
        resolve: {
            defaultValue: function() {
                return $scope.defaultValue;
            }
        }
    }).result.then(function(resolution) {
        if (resolution == true) {
            // user wants to put default value
            data.someField = defaultValue;
            // jqGrid should continue
            return [true, null];
        } else {
            // jqGrid should go back to edit form with error message
            return [false, "Please, fill the 'Archive Folder Name' field"];
        }
    });
}

The modal is a window with some test including the defaultValue and two buttons, one which closes the modal with value true (save) and other which closes the modal with value false (go back).

SOLUTION: After all, it's not posible to do what I want the way I want. Finally, I get the default value when users click a row using jqGrid event onSelectRow. I've replaced jqGrid's edit button with a custom one. What my edit button does is to check if the row has the field that I want to check empty. If so, the dialog to ask the user is shown and when the user selects an option the edit form is shown (with the field filled if user selected "Set default value" or not if selected "Another value". I have changed colModel to have the field mandatory filled, so if user selects "Another value" in the dialog and then doesn't fill the field, an error will be shown in the jqGrid.

Answer 1

it's clear that you can't use asynchronous call to the server inside of beforeSubmit callback. You can fix your code by usage synchronous Ajax call like the usage of jQuery.ajax with async:false parameter for example, but the usage of synchronous call will block your page for some time. Mush better will be to include defaultValue in your main grid data during initial loading of the grid.

As an alternative you can makes asynchronous call inside of beforeInitData for example (it will be called buring opening of the form). You can save the results somewhere and use it later inside of beforeSubmit.

UPDATED: If you already have default value (or default values) loaded from the server then you can for example implement the following scenario:

• if beforeSubmit discovers a problem it can change empty field to default values (the field of editing form have the same id values like name property of the corresponding column) and make the changes visible for the user. For example one can use jQuery effects (Highlight Effect, or many other) or jQuery UI effect (Highlight, Color Animation). For example one can use toggleClass with "ui-state-error" class. beforeSubmit should return error if at least one field are modified to default value.
• At the next beforeSubmit call (after the user click "Submit" after the modification described above) it can return [true] and allow to post the data to the server.

Answer 2

If jqGrid supports a beforeSubmit that returns a promise (that is to say, an asynchronous beforeSubmit), then @Pam is correct. If not, as @Sacho says, then you need the promise to already be resolved when beforeSubmit is executed. The only way to ensure that is to write beforeSubmit inside the promise's callback.

$http.get('defaultValue/' + data.id).success(function (defaultValue) {
    /* all the code dependending on this defaultValue variable should go here */
    ...
    beforeSubmit: function (data) {
        if (data.someField == "") {
            data.someField = defaultValue;
            return [true, null]
        } else {
            ...
        }
    },
    ...
})
.error(function () { /* handle network or server-side error */ }

Answer 3

Since $http promise is being returned, I think you need to change the $http.get(..) to return $http.get(..).

Also note that, using .success() will return the original promise and .then() will return a new promise. Since each call would be returning a new promise, .then() would be driving the sequential operations.