javascript - 从嵌套的 jquery 对话框运行服务器端方法

标签 javascript jquery asp.net jquery-ui

试图在嵌套的 jquery 对话框中调用服务器端函数

设计是这样的:

[第一个对话]

  • 点击一个按钮打开第二个对话框
  • 点击另一个按钮运行服务器端方法。 (工作正常)
  • gridview 通过服务器端方法更新。

[第二个对话]

  • 点击按钮运行服务器端方法 var btnConfirm = document.getElementById("<%= BtnAvailEmpAccept.ClientID %>"); btnConfirm.click();

[第一个对话框] 按预期工作正常,但在 [第二个对话框] 中没有任何反应。 [第二个对话框] javascript 代码被执行但从未命中服务器端方法。

每个对话框的两个“div”包含在一个更新面板中,因为我有要通过按钮单击事件更新的 GridView 。

这是[第二个对话]

 $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 运行服务器端方法:

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

有没有人知道为什么 button.Click() 不调用服务器端方法?

> 已编辑:这是我的答案!

    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"));
        ...

最佳答案

我必须添加“form:first”: “这样做的原因是对话框函数拉取您的元素并将其放入放置在 Form 标记外部的窗口容器中”

喜欢:

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

http://labs.kaliko.com/2011/08/jquery-ui-dialog-aspnet-postback.html 帮助过我!

关于javascript - 从嵌套的 jquery 对话框运行服务器端方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10527486/

相关文章:

javascript - 算法得到的数组总和,小于一个限制

javascript - Vanilla JavaScript 异步多个 xhr.open()

javascript - 使用 D3.JS 绘制图表

c# - 在验证器上设置 ControlToValidate

javascript - 如何循环/使用await axios?

javascript - 如何使用 lodash groupby 或其他函数对以下数据进行分组?

jquery - Coinslida jQuery - CSS 问题

jquery - 如何使用 jQuery 对本地 Web 服务进行 RESTful 调用

asp.net - 母版页和内容页的通信问题

asp.net - ASP 计时器控件正在刷新整个页面?