Return response to onClientClick based on user button selection

Question

I have an onClientClick event like so:

OnClientClick="return getErrors();" - this of course is within an

the body of the function is:

function getErrors() {
    var errorString = "some errors";
   return $('<div id="dialog-message" title="Required"><p>' + errorString + '</p></div>').dialog(
                        {
                            modal: true,
                            width: 700,
                            buttons:
                           {
                               Ok: function () {
                                   $(this).dialog("close");
                                   return callback_ErrorAction(0);
                               },
                               Cancel: function () {
                                   $(this).dialog("close");
                                   return callback_ErrorAction(1);
                               }
                           }
                        });
return false; //omit this and OnClientClick gets undefined response variable
    }

Also the callback function is defined as:

function callback_ErrorAction(bool) 
{
    if (bool == 0) {
        return true;
    }
    else if (bool == 1) {
        return false;
    }
}

The problem is I need the OnClientClick response to be based on user response, clicking Ok or cancel but the current solution returns a response to onClientClick before the user even has a chance to select OK or Cancel. Thanks for helping

So the user clicks something, this fires the `getErrors()` so the user sees a modal pop-up, but this is not what you want? — Aage, Oct 25 '13 at 11:06
@bump: the user clicks a button > [onClientClick] fires up getErrors() - which is a jquery confirmation dialog > the user makes a selection [OK or cancel] > this then returns true or false to the onClientClick. That is the expected/desired behaviour, but what I have is ... getErrors() is fired and it immediately returns without a chance for the user to select between OK or cancel. I hope my question is clearer. thanks — pi., Oct 25 '13 at 11:12

score 1 · Answer 1 · edited May 23 '17 at 12:31

You can't return the user's response through OnClientClick because the jQuery dialog uses callbacks.

Instead, you need to always return false from your OnClientClick method and manually fire a postback when you need to:

function getErrors() {
    var errorString = "some errors";
    $('<div id="dialog-message" title="Required"><p>' + errorString + '</p></div>').dialog(
                        {
                            modal: true,
                            width: 700,
                            buttons:
                           {
                               Ok: function () {
                                   // Are you sure you want to close the dialog here? It will disappear when the page refreshes anyway
                                   $(this).dialog("close");
                                   // Manually trigger the postback
                                   __doPostBack('<%= btnSubmit.UniqueID %>', '');
                               },
                               Cancel: function () {
                                   $(this).dialog("close");
                                   // Error, do nothing as we will cancel the postback by default
                               }
                           }
                        });
    return false;
    }

See this question for more information on manually invoking the doPostBack call.

Thanks for your help. Some progress has been made with your suggestion. However when for example, the OK button is selected for the postback to continue, it seems that the button's Onclick event is not called - just a 'new postback'. I have used the id of the server button control defined and then used it as: __doPostBack('btnSave', ''); according to the answer recommended. What please is the missing piece? Thanks again — pi., Oct 25 '13 at 12:12

Return response to onClientClick based on user button selection

1 Answers1