在同一ASP按钮上使用jQuery警报和确认弹出窗口?

时间:2012-08-24 18:46:54

标签: c# asp.net jquery-ui

我有一种情况,我需要同一个ASP按钮上的警报和确认弹出窗口。我需要提醒验证,一旦用户输入所有必要的信息我需要确认弹出窗口发送电子邮件或提交另一个条目。

我已经在使用jQuery对话框弹出警报和确认,但不知道如何将它们组合在同一个按钮上。

//我的确认码

<script type="text/javascript">
    jQuery(function() {
        var dlg = jQuery("#dialog").dialog({

            draggable: false,
            autoOpen: false,
            minHeight: 10,
            minwidth: 10,
            zIndex: 99999

        });
        $('#<%=btnStart.ClientID%>').click(function() {
            $('#dialog').dialog('open');
        });
        $(".ui-dialog-titlebar").hide();
        $(".ui-dialog-titlebar-close").hide();
       dlg.parent().appendTo(jQuery("form:first"));
    });
<asp:Button  id="btnStart" runat="server" Text="btnStart"  onclick="btnStart_Click" />
<div id="dialog" style="text-align: center; display: none;font-size:14px;">
    <table>
        <tr>
            <td colspan="2">
                <asp:Label Text="Do you want to exclude these dates?" runat="server" ID="lbl"></asp:Label>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Button ID="btnOk" runat="server" Text="Yes" OnClick="btnOK_Click" Style="width: 60px;" />
            </td>
            <td>
                <asp:Button ID="Button1" runat="server" Text="No" OnClick="btnCancel1_Click" Width="60px" />
            </td>
        </tr>
    </table>
</div>

//我的提醒弹出窗口

    $(document).ready(function() {
   $('#<%=btnStart.ClientID%>').click(function() {
        alert("Correct it!");
    });

    });

这是.net网络应用程序。

2 个答案:

答案 0 :(得分:1)

不确定您使用jQuery .click事件的设置是多少,但您可以使用onClientClick属性直接在按钮上调用多个函数,如下所示:

<asp:button runat="server" text="submit" OnClientClick="alert('fn1');alert('fn2');" onclick="ServerSubmitLogicMethod" />

编辑1:澄清一下,您可以直接在事件中运行脚本,甚至无需定义匿名函数(隐式创建onclick事件中的所有内容)在生产中我会将所有这些逻辑拉入像submit这样的函数中( ),但你可以做这样的事情:

<asp:button runat="server" text="submit" OnClientClick="if(formIsValid()){alert('confirmed!');}" onclick="ServerSubmitLogicMethod" />

,其中

function formIsValid()
{
//some validation logic ultimately leading to a Boolean return//
return true;
}

这就是说,没有理由你不能像现在这样把你的验证警告放在你的代码中的验证逻辑中的validates()函数调用中,如下所示:

    jQuery(function() {
        var dlg = jQuery("#dialog").dialog({

            draggable: false,
            autoOpen: false,
            minHeight: 10,
            minwidth: 10,
            zIndex: 99999

        });
        $('#<%=btnStart.ClientID%>').click(function() {
            if(validates())
            {           
              $('#dialog').dialog('open');
            }
        });
        $(".ui-dialog-titlebar").hide();
        $(".ui-dialog-titlebar-close").hide();
       dlg.parent().appendTo(jQuery("form:first"));
    });

function validates(){
//...validation logic...//
alert("Correct it!");
return false;
}

答案 1 :(得分:0)

如果您使用jqueryUI中的Dialog插件,则可以使用close事件:

从他们的网站:

关闭活动

关闭对话框时会触发此事件。

代码示例

提供一个回调函数来处理close事件作为init选项。

$( ".selector" ).dialog({
   close: function(event, ui) { ... }
});
//Bind to the close event by type: dialogclose.
$( ".selector" ).bind( "dialogclose", function(event, ui) {
  ...
});

弹出窗口关闭后会触发。

编辑:你不会在同一个按钮中使用它,但首先打开其中一个对话框,然后在关闭此对话框时调用另一个对话框,这样它就可以作为回调函数。