Question

‘m trying to call a server side function in nested jquery dialogs

the design is like this:

[first dialog]

• clicking a button opens up second dialog
• clicking another button runs server a side method. (works fine)
• a gridview gets updated by a server side method.

[second dialog]

• clicking a button run a server side method
  var btnConfirm = document.getElementById(“<%= BtnAvailEmpAccept.ClientID %>”);
  btnConfirm.click();

[first dialog] works fine as intended, but nothing happens in [second dialog].
[second dialog] javascript code gets executed but never hit the server side method.

Two “div”s for each dialog are enclosed in an updatepanel, since I have gridviews to be updated by button click events.

This is [second dialog]

 $confirmWindow = jQuery("#empConfirmDiv");
                            $confirmWindow.show();
                            $confirmWindow.dialog("open");
                            //instantiate the dialog
                            $confirmWindow.dialog({
                                dialogClass: "empConfirmDialog",
                                maxHeight: 600,
                                width: 1200,
                                resizable: false,
                                modal: true,
                                position: 'center',
                                autoOpen: false,
                                title: 'Exception - Confirmation',
                                overlay: { opacity: 0.5, background: 'black' },
                                buttons: {
                                    "Decline": function () {
                                        var btnDecline = document.getElementById("<%= BtnAvailEmpReject.ClientID %>");
                                        btnDecline.click();

                                    },
                                    "Left Message": function () {
                                        var btnMsg = document.getElementById("<%= BtnAvailEmpMsg.ClientID %>");
                                        btnMsg.click();
                                    },
                                    "Confirm": function () {
                                        var btnConfirm = document.getElementById("<%= BtnAvailEmpAccept.ClientID %>");
                                        btnConfirm.click();
                                    },
                                    "Cancel": function () {
                                        $(this).dialog("close");
                                    }

                                }
                            });

asp:button to run a server side method:

<asp:Button ID="BtnAvailEmpAccept" runat="server" Width="10px" Height="10px" OnClientClick="return SetValidateTrue()"
                            OnClick="BtnAvailEmpAccept_Click" />

Does anyone have ideas why button.Click() does not invoke the server side method?

> Edited: Here is my answer!

    var showDialogConfirmEmp = function () {
        $confirmWindow = jQuery("#empConfirmDiv");
        $confirmWindow.show();
        $confirmWindow.dialog("open");
    }

    var myWindowConfirmEmp =          
        jQuery("#empConfirmDiv").dialog({
            dialogClass: "empConfirmDialog",
            maxHeight: 600,
            width: 1200,
            resizable: false,
            modal: true,
            position: 'center',
            autoOpen: false,
            title: 'Exception - Confirmation',
            overlay: { opacity: 0.5, background: 'black' },
            buttons: {
                "Decline": function () {
                    var btnDecline = document.getElementById("<%= BtnAvailEmpReject.ClientID %>");
                    btnDecline.click();
                },
                "Left Message": function () {
                    var btnMsg = document.getElementById("<%= BtnAvailEmpMsg.ClientID %>");
                    btnMsg.click();
                },
                "Confirm": function () {
                    var btnConfirm = document.getElementById("<%= BtnAvailEmpAccept.ClientID %>");
                    btnConfirm.click();
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }

            }
        });

    var showDialogAvailEmp = function () {
        SetValidateTrue();
        if (IsScheduleWorkChecked()) {
            var button = document.getElementById("<%= btnListEmp.ClientID %>");
            button.click();
            $myWindowAssign = jQuery("#availEmpDiv");
            $myWindowAssign.show();
            $myWindowAssign.dialog("open");
            $myWindowAssign.parent().appendTo(jQuery("form:first"))
        }
        else {
            alert("Please select a work to assign!");
        }

    }
    var myWindowAvailEmp = jQuery("#availEmpDiv").dialog({ maxHeight: 600,
        width: 700,
        resizable: false,
        modal: true,
        position: 'center',
        autoOpen: false,
        title: 'Exception - Available Employees',
        overlay: { opacity: 0.5, background: 'black' },
        buttons: [{
            text: "Proceed",
            "id": "btnProceed",
            click: function () {                        
                Page_IsValid = true;
                if (Page_IsValid) {
                    var btnProceed = document.getElementById("<%= btnProceed.ClientID %>");
                    btnProceed.click();
                }
                $confirmWindow = jQuery("#empConfirmDiv");
                $confirmWindow.show();
                $confirmWindow.dialog("open");
                myWindowConfirmEmp.parent().appendTo(jQuery("form:first"));

            }
        },
            {
                text: "Cancel",
                "id": "btnAvailCancel",
                click: function () {
                    $(this).dialog("close");
                }
            }]
    }); // myWindow


    // JQuery UI: Diaglog
    jQuery(document).ready(function () {

        jQuery("#BtnAssign").click(showDialogAvailEmp);
        //variable to reference window
        myWindowAvailEmp.parent().appendTo(jQuery("form:first"));
        ...

Answer 1

I had to add “form:first” :
“The reason for this is that the dialog function pulls your element and puts it in a window container which are placed outside the Form tag”

like:

myDialog.parent().appendTo(jQuery("form:first"));

http://labs.kaliko.com/2011/08/jquery-ui-dialog-aspnet-postback.html
helped me!