Asynchronous return of function in jqgrid

Question

First of all sorry for my english,

I am working with jqgrid. I have a table for manage clients. When I want to add a new client I have an ajax validation in beforeSubmit event to check if client exists on a external system. The first parameter of this function is a boolean (if true, execution of adding a client continues, if false it stops)

beforeSubmit: function(postdata, formid) {

      var form = formid[0];
      var hostId = $.trim(form.HOSTID.value);
      var document = $.trim(form.DOCUMENT.value);
      var idMurex = $.trim(form.IDMUREX.value);

      var success;

      processClientData(hostId, document, idMurex).done(function() {

           alert('OK');
           success = true;

      }).fail(function() {

           alert('KO');
           success = false;

      });

      return[success, '']; 

},

The ajax function returns if client exists or not. If client exists it shows a confirmation dialog for continue or not depending if user is agree with the client information. If client doesn´t exist it show an alert dialog showing an error message.

function processClientData(hostId, document, idMurex) {

        var def = $.Deferred();

        //SERVER RESPONSE IF EXISTS CLIENT
        $.post('/watt/cambio_titularidad', {    
                oper: 'datos_cliente', 
                hostId: hostId,
                document: document,
                idMurex: idMurex
            },
            function(response){

                //CLIENT EXISTS (SHOW CONFIRMATION DIALOG WITH CLIENT INFO)
                if (response.success == true) {
                    $("#dialog_info_tablas").dialog({ 
                        title: "CLIENT EXISTS",
                        modal: true,
                        buttons: {
                        "Ok": function()  {
                            $(this).dialog("close");
                            def.resolve();
                        }
                        "Cancel": function()  {
                            $(this).dialog("close");
                            def.reject();
                        }
                    }
                });

                //CLIENT DOESN´T EXIST (SHOW ALERT DIALOG WITH ERROR MESSAGE)
                } else {
                    $("#dialog_info_tablas").dialog({ 
                        title: "CLIENT NOT EXISTS",
                        modal: true,
                        buttons: {
                            "Ok": function()  {
                                $(this).dialog("close");
                                def.reject();
                            }
                        }
                    });
                }        
            }, 
            "json")

            return def.promise();
        }

I use Deferred object to try to synchronize ajax call.

The issue is that return statement is executed before var success has a correct value. I don´t know how to make it synchronous, I need to delay the return until user click on dialog buttons, thus to continue adding client or not. I tried to put the return statements inside done and fail functions but it didn´t work neither

Can anyone help me??

Thanks in advance

score 1 · Accepted Answer · answered Jan 08 '13 at 10:23

1

I would suggest you to use error handling inside of form submitting instead of additional server side validation implemented inside of beforeSubmit. The callback beforeSubmit should be better used for client side validations.

If the submit any data to the server during editing the Ajax request will be sent to the server. The server can validate the input data and return error message. It's important to place any HTTP error code in the server response in the case. You can use errorTextFormat callback of form editing to customize the error message displayed for the user based on the error response returned from the server.

answered Jan 08 '13 at 10:23

Oleg

220,925
34
403
798

Thanks Oleg, The problem is that I need the OK from user for the client information that returns the ajax call. While client doesn´t click on OK or Cancel dialog´s button I can´t return true or false to continue the operation of adding. – Alejandro Cuervo Jan 08 '13 at 11:03
@AlexCuervo: Sorry, but I still don't understand why the user need to click on "OK" of additional dialog every time before clicking on the "Submit" button. If you need some additional validation you can use for example `setTimeout` like jQuery UI Autocomplete do. Alternatively you can add additional button on the side of input field like jQuery UI Datepicker with `showOn: "button"`. In the way the validation will be in *the same dialog* where the user type. In any way implementation of `errorTextFormat` callback I see required in every productive solution. – Oleg Jan 08 '13 at 11:35
@AlexCuervo: See [the answer](http://stackoverflow.com/a/9620311/315935) for examples of the usage Datepicker with button. Exactly like jQuery UI can cteate the button near to the main `` element you can do the same inside of `beforeShowForm` or inside of [dataInit](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editoptions). – Oleg Jan 08 '13 at 11:40
I need to show a confirmation dialog because the user have to accept or decline the client information before continue the adding (the user inputs the id of client and ajax call returns all data client from external system) – Alejandro Cuervo Jan 08 '13 at 11:47
@AlexCuervo: I try to understand *why* you need this and not only *what* you need. The goal of stackoverflow is sharing of *common* problems and the share the corresponding solutions. In any way I still don't understand your problem. If you *really need* to display confirmation dialog: just do this. You can block the grid or the whole page till the server response. See [jQuery BlockUI Plugin](http://stackoverflow.com/a/3514084/315935) – Oleg Jan 08 '13 at 11:57
I´m trying to explain you _why_ I need to show the dialog Oleg. Before adding the client in our system, user have to accept the information of client that we get from other system (name, document, age...). I think the best way to do it, it is in beforesubmit event. I will try BlockUI Plugin. Thanks a lot – Alejandro Cuervo Jan 08 '13 at 12:10
@AlexCuervo: You are welcome! You can consider to add your custom button in the edit form as an alternative. See [the answer](http://stackoverflow.com/a/10324302/315935) for the code example. – Oleg Jan 08 '13 at 12:29

Asynchronous return of function in jqgrid

1 Answers1