locked
How to add a confirmation dialog box depending on user input after ASP.NET validation has been performed? RRS feed

  • Question

  • User1935984934 posted

    I have got a jquery dialog box shown when ASP.NET validation fails, this is working fine. I need to add a confirmation dialog depending on the user input after the validation has been done and is succesful.

    I added the dialog box, which comes up fine as expected but it doesn't wait for the user input and performs the server side process when I am expecting the user to decide to go on with the server side process or not

    function WebForm_OnSubmit() {
    
         if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
             $("#validation_dialog").dialog({
                 title: "¡No pudimos publicar!",
                 modal: true,
                 resizable: false,
                 buttons: {
                     Close: function () {
                         $(this).dialog('close');
                     }
                 }
             });
             return false;
         }
         else
         {
             if ($("#<%=hClientePrivado.ClientID %>").val() === 'G') {
                 if ($("#<%=hRubroGratis.ClientID %>").val() !== '0' || $("#<%=hoptTipo.ClientID %>").val() !== '0' || $("#<%=hWeb.ClientID %>").val() !== '0') {
                     $("#dialog-confirm").dialog({
                         resizable: false,
                         title: "¡Favor confirmar!",
                         modal: true,
                         buttons: {
                             Yes: {
                                 text: 'Si quiero publicar',
                                 click: function () {
                                     return true;
                                 }
                             },
                             No: {
                                 text: 'No quiero publicar',
                                 click: function () {
                                     return false;
                                 }
                             }
                         }
                     });
                 }
                 else { return true;}
             }
             else { return true;}
         }
        }

    I am expecting to display the #dialog-confirm dialog and wait until the user chooses Yes or No; if yes then to proceed with the server process and if no just close the dialog and coming back to the form

    Friday, January 11, 2019 3:39 PM

Answers

  • User475983607 posted

    How do I make it stop then ?

    If you want the code to stop then use the JavaScript alert not the jQuery Dialog.

    I wrote my code based upon the documentation you're suggesting

    JavaScript does not work like yo think it does.  The WebForm_OnSubmit function opens the Dialog and returns false.  Your left with the Dialog and an unsubmitted form.  The next step is writing code in the  jQuery dialog click handler to submit the form when the user clicks an "Ok"  button.   I provided sample code in my initial post.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 11, 2019 6:24 PM

All replies

  • User-474980206 posted

    the dialog is async. you need can the post back. then call it again on the close or the yes. 

    hint: pass a flag to skip the dialog

    function WebForm_OnSubmit(skipDialog) { 
       if (skipDialog) return true;
    ...
    }

    Friday, January 11, 2019 4:00 PM
  • User475983607 posted

    I think you are assuming the code stops executing similar to how the JavaScript alert works.  The jQuery dialog does not stop the code.  It is up to you to write a button click handler that submits the from when the user clicks a button.

    See the reference documentation.

    https://jqueryui.com/dialog/#modal-confirmation

    Ok: function() {
      document.getElementById("myForm").submit();
    }

    Friday, January 11, 2019 4:04 PM
  • User1935984934 posted

    I think you are assuming the code stops executing similar to how the JavaScript alert works.  The jQuery dialog does not stop the code. 

    How do I make it stop then ? I wrote my code based upon the documentation you're suggesting 

    It is up to you to write a button click handler that submits the from when the user clicks a button.

    That is what I thought I did by writing the code shown below.

                                 buttons: {
                                     Yes: {
                                         text: 'Si quiero publicar',
                                         click: function () {
                                             return true;
                                         }
                                     },
                                     No: {
                                         text: 'No quiero publicar',
                                         click: function () {
                                             return false;
                                         }
                                     }
                                 }

    Friday, January 11, 2019 5:41 PM
  • User1935984934 posted

    the dialog is async. 

    If you see this videocast you see that the dialog shown by the ASP.NET validation works fine (at the 4th second ) but the dialog shown by the extra validation I have to made is not, as you can see at the end of the demo 

    Friday, January 11, 2019 5:48 PM
  • User475983607 posted

    How do I make it stop then ?

    If you want the code to stop then use the JavaScript alert not the jQuery Dialog.

    I wrote my code based upon the documentation you're suggesting

    JavaScript does not work like yo think it does.  The WebForm_OnSubmit function opens the Dialog and returns false.  Your left with the Dialog and an unsubmitted form.  The next step is writing code in the  jQuery dialog click handler to submit the form when the user clicks an "Ok"  button.   I provided sample code in my initial post.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 11, 2019 6:24 PM
  • User1935984934 posted

    If you want the code to stop then use the JavaScript alert not the jQuery Dialog.

    If you look at this videocast you can see that the jQuery Dialog does stop for the validation part, not mine so I guess something under hood makes the difference. 

    That said it sound strange that a "Dialog box" doesn't .... dialog, I mean a dialog is basically an exchange. 

    Will go deeper on this. 

    Friday, January 11, 2019 6:50 PM
  • User1935984934 posted

    If you want the code to stop then use the JavaScript alert not the jQuery Dialog.

    Using the Javascript alert did indeed the trick. It is not at nice looking as the jQuery Dialog box but it's working fine. For the time being I'll go with it. 

    Friday, January 11, 2019 6:59 PM
  • User475983607 posted

    The validation framework you are using stops the form post because the form failed validation. 

    As far as I can tell the main problem is you are assuming the jQuery Dialog should work like the JavaScript alert.  Secondly, your presentation of what's actually happening is incorrect.  The jQuery Dialog is a event driven JavaScript widget.  You are writing the code as if JavaScript executes synchronously.  JavaScript events are asynchronous which means it is up to the developer to handle event order. 

    I think your perception will change if you start using the debugger in dev tools (F12) to step through the code.  Also learning about JavaScript events and common programming patterns will help fix your understanding.

    Friday, January 11, 2019 7:17 PM
  • User1935984934 posted

    I think your perception will change if you start using the debugger in dev tools (F12) to step through the code.  Also learning about JavaScript events and common programming patterns will help fix your understanding.

    You' re right, Javascript and jQuery never were my favorites so a little bit of reading on this topic wouldn't be a waste of time. That said most of the code I posted were written but somebody who knows much more than me about jQuery and Javascript but who is right now MIA.

    Anyway it is working so it'll give me some breathing space to get somebody better me on client side's programing to have a look at it. 

    Thank you for your help.

    Friday, January 11, 2019 7:40 PM