Do a postback in jQuery UI dialog

Question

This has been already asked by many SO users and have solutions also. But none of them is working for me.

In aspx

<asp:Button ID="btnConfirm" ClientIDMode="Static" runat="server" Text="Confirm" OnClick="btnConfirm_Click"/>

<script type="text/javascript">
    $(function inPageLoad() {
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {

            //Confirmation Dialog
            $(document).on('click', '#btnConfirm', function (e) {
                e.preventDefault();
                $('<div></div>').appendTo('body')
                  .html('<div><h6>Yes or No?</h6></div>')
                  .dialog({
                      modal: true, title: 'message', zIndex: 10000, autoOpen: true,
                      width: 'auto', resizable: false,
                      buttons: {
                          Yes: function () {
                              $(this).dialog("close");
                              __doPostBack('btnConfirm','');
                          },
                          No: function () {
                              $(this).dialog("close");
                          }
                      },
                      close: function (event, ui) {
                          $(this).remove();
                      }
                  });
            });
        });
    });

    $(document).ready(inPageLoad);

</script>

In aspx.cs

protected void btnConfirm_Click(object sender, EventArgs e)
{
    SomeFunction();
}

I want to do a postback(go to 'btnConfirm_Click' event in codebehind) if the click is 'Yes'. Eventhough the dialog popups nicely it doesn't do the postback. All help appreciated!

Answer 1

The above solution didn't work for my situation, so I want to give people an alternative in case they end up in the same situation I was in - the below worked for me:

The event I wanted to raise was coming from an Button click within a repeater - so it made my situation unique. The following is the markup I ended up using:

<asp:Button runat="server" ID="btnPersonRemove" Style="width: 15px" Text="Remove" OnClientClick="return confirmation(this);" UseSubmitBehavior="false" OnClick="btnRemove_Click" />

With this panel (outside of the repeater):

<asp:Panel ID="pnlConfirmationMessage" runat="server" Style="display: none" CssClass="confirmation">
    <asp:HiddenField ID="hdnPersonID" runat="server" />
    <asp:Label ID="lblConfirm" runat="server">Are you sure you'd like to remove this member?</asp:Label>
</asp:Panel>

Notice that I'm passing this to the JS and returning the result from the confirmation method. You'll see below that passing this allows me to retrieve the unique ID from the clicked control by using the JS .name property.

<script type="text/javascript">
     $(function () {
        $("#<%= pnlConfirmationMessage.ClientID %>").dialog({
             autoOpen: false,
             modal: true,
             resizable: false,
             draggable: false
         });
     });

     function confirmation(control) {
         $("#<%= pnlConfirmationMessage.ClientID %>").dialog('option', 'buttons', {
             'Confirm': function () {
                 $(this).dialog('close');
                 return evaluate(true, control);
             },
             'Cancel': function () {
                 $(this).dialog('close');
                 return evaluate(false, control);
             }
         });

         $("#<%= pnlConfirmationMessage.ClientID %>").dialog('open');
     }

     function evaluate(value, control) {
         if (value) {
             __doPostBack(control.name, '');
         }
     }
 </script>

Note that we're not binding the buttons to the jQuery dialog box until the event is actually raised. This delays the postback from actually occurring until the user interacts with the dialog box.

If they click 'Confirm' in the jQuery UI dialog box, we call the evaluate(value) method and pass true to it; if they click 'Cancel' we pass false.

The __doPostBack(id, eventArg) is what initiates the postback with the button click event attached to it from control.name.

Although this is from within a Repeater, I could see it being applied to other situations as well. Hope this can help someone.

Answer 2

instead of __doPostBack('btnConfirm','');

 Yes: function () {
  $("[id*=btnConfirm]").click();
 },  

UPDATING MY ANSWER

Take another button, with display none property and trigger that Button

css

.hidden
{
display:none;
}

aspx

<asp:Button id="btnhidden" runat="server" onclick="btnhidden();" cssClass=hidden/>

javascript

  Yes: function () {
      $("[id*=btnhidden]").click();
     },