JQuery modal dialog confirmation doesn't appear to the user

Question

I'm working on a WebForms App based in ASP.NET and coded in C#. This application performs CRUD operations, and I need to show a confirm message to the client every time the user wants to perform an action. I decided to create a jQuery function that receives the title of the window, the message to display to the user and the button that represents the action.

This is my Javascript function:

var _confirm = false;
function Confirm(str, strtitle,button) {
  e.preventDefault();
  if (!strtitle) strtitle = 'Mensaje de error';
  $('#dialog').show();
  $('#dialog').html(str);

  $("#dialog").dialog({
    autoOpen: true,
    draggable: false,
    resizable: false,
    modal: true,
    title: strtitle,
    width: 350,
    height: 180,
    show: "slide",
    hide: "puff",

    buttons: {
      "No": function () {
        jQuery(this).dialog("close");
      },

      "Yes": function () {
        jQuery(this).dialog("close");
        _confirm = true;
        button.click();
      }
    },

    close: function () {
      jQuery(this).remove();
    }
  });
  return false;
}

This is the ASP Button:

<asp:button id="btnOk" onclick="btnDGV_Click" 
            onclientclick="Confirm('Desea eliminar el registro', 'Confirmacion', this);" 
            runat="server" text="Eliminar Registro">
</asp:button>

The code of the event onclick on the server side (it is just a confirm message for the time being):

protected void btnDGV_Click(object sender, EventArgs e) {
  ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Registro eliminado exitosamente !!!')", true);
}

The issue is that when I click the button the server side message always appears and the jQuery dialog is never shown. What could be the problem?

@BasvanStein no, without the onclick="btnDGV_Click" it just shows a very thin side and disappears as fast as it appears — Pablo Tobar, Jan 14 '16 at 16:13
At least you need call $('#dialog').show(); after initialization of the dialog but not before. Other thing I think you need remove "btnDGV_Click" from onclick setting and call it somehow in "Yes" button handler. For example you can use jQuery ajax features — AntonE, Jan 14 '16 at 16:16
Hi Pablo, the problem is that your js function "Confirm" exit immediatly, and then the asp button make the submit and the event btnDGV_Click. Try to modify you code as 'onclientclick="Confirm('Desea eliminar el registro', 'Confirmacion', this); alert('i can see the confirm dialog')"' — bdn02, Jan 14 '16 at 16:16
@AntonE yes, I'm agree on use jQuery ajax function, I haven't worked that way because the specifications of the project, but thanks for the tip. — Pablo Tobar, Jan 14 '16 at 16:24
@bdn02 Hello and thanks, I just changed the code in my onclientclick event for the one you suggested but now in the screen appears the alert: i can see a confirm dialog, then appears my jQuery windows but again only for a seconds and then the message for the server-side, do I have to make any other change? — Pablo Tobar, Jan 14 '16 at 16:26
@bdn02 yes, the delete is on the server side code, C#, I just show the ClientScript.RegisterStartupScript... code but all the code that delete the record from the database is on the method btnDGV_Click, do you want me to post it? — Pablo Tobar, Jan 14 '16 at 16:38
Pablo what about put __doPostBack() in "Yes" button handler. I'm not good in ASP.NET web forms. But as I can see here http://stackoverflow.com/questions/3591634/how-to-use-dopostback it can help. In this case you need call "btnDGV" in __doPostBack() and remove it from onclick setting — AntonE, Jan 14 '16 at 16:38
@AntonE thanks again, I understand how to use the __doPostBack() and tried changing that line but still got the same problem, the jQuery modal windows appears in a blink and then disappears and after that the message from the server side shows itself — Pablo Tobar, Jan 14 '16 at 16:49
So as I understand your JS "Confirm" function ended and after that working code from this settings "onclick="btnDGV_Click". So if you remove this setting from button initialize button code server call should not happen till you call __doPostBack() in "Ok" button handler — AntonE, Jan 14 '16 at 17:01
@AntonE something like this: "Yes": function () { jQuery(this).dialog("close"); __doPostBack(button, '') //_confirm = true; //button.click(); } ? sorry, don't know how to post code in comments — Pablo Tobar, Jan 14 '16 at 17:20

score 1 · Accepted Answer · answered Jan 14 '16 at 19:32

Modify your code: onclientclick="Confirm('Desea eliminar el registro', 'Confirmacion', this);return;" This prevent the button to make a postback

and modify: "Yes": function () { jQuery(this).dialog("close"); __doPostBack('<%=btnOk.ClientID%>', '') button.click(); } if you click "yes" this code make a postback and a call to method specified on the onclick attribute of the button

score 0 · Answer 2 · answered Jan 14 '16 at 16:50

0

Here are some things to check which should sort you out:

Check what asp:Button is rendered as on the client (for your edification)
Check if your onclientclick will prevent that element from posting to the server. You might want to return the result of your Confirm function here.
Check the order of your Confirm function. You're trying to show the dialog before it's been initialized.

answered Jan 14 '16 at 16:50

DvS

1,025
6
11

Thanks DvS, could you please clarify the third point, the: "You're trying to show the dialog before it's been initialized" it seems like there is my error but I can't understand, I just starting with jQuery that's not an excuse but I can't find the error – Pablo Tobar Jan 14 '16 at 17:02
Your function calls `$('#dialog').show();` before `$("#dialog").dialog({ ...})` – DvS Jan 14 '16 at 17:37

JQuery modal dialog confirmation doesn't appear to the user

2 Answers2