Display a confirmation box and wait for user input when editing data using jqgrid-CodePudding

I'm using jqgrid to display different data entries in my frontend. When adding a new entry or editing an existing one I'd like to check the value the user entered for the column foo. An empty string is considered valid input but the user should confirm that he left the field blank intentionally.

I tried using beforeSubmit in the editOptions like to:

    beforeSubmit: function(postdata, formid) {
        if (postdata['foo'] === '') {
                var dialog = $("#dialog-confirm").dialog({
                    resizable: true,
                    height: 180,
                    width: 320,
                    modal: true,
                    buttons: {
                        "OK": {
                            text: "OK",
                            id: "ok",
                            click: function () {
                                $(dialog).dialog("close");
                                stop();
                                return [true, ''];
                            }
                        },
                        "Cancel": {
                            text: "Abbrechen",
                            id: "cancel",
                            click: function () {
                                var checkBox = $(e.target);
                                var checkState = checkBox.prop("checked");
                                checkBox.prop("checked", !checkState);
                                $(dialog).dialog("close");
                                return [false, 'ERROR MESSAGE'];
                            }
                        }
                    }
                });
                var keepWaiting = true;
                function waitForUserInput() {
                    if (keepWaiting) {
                        console.log("Working in the background");
                        setTimeout(waitForUserInput, 500);
                    }
                }
                function stop() {
                    keepWaiting = false;
                }
                waitForUserInput();
        }
    },

But the script is not pausing. Does anyone know why and has a solution?

CodePudding user response：

Greta,

The problem here is that you return a value of beforeSubmit within dialog function, which of course will do nothing.

The return [true, '']; or return [false, 'ERROR MESSAGE']; should be within beforeSubmit and not within dialog.

I kindly suggest you to do a very simple thing and use the build in javascript confirm function

beforeSubmit: function(postdata, formid) {
        if (postdata['foo'] === '') { 
            if( confirm("Are you sure to set the empty data?") ) {
                 return [true, ''];
            } else {
                  return [false, 'ERROR MESSAGE'];
            }
        }
  },

This is the the very simple and clean solution.

If you want to use jQueryUI dialog for this purpose - one possible solution is to define your custom button on the edit form (see docs and Gurrido demos), disable(hide) the submit, preform your check when click the custom button and depending on the choose to trigger or not the build in Submit form button.