jquery jqmodal asp.net按钮必须单击两次

时间:2014-01-23 11:37:43

标签: jquery asp.net jqmodal

好的,jQuery很新,需要知道我做错了什么。

我正在使用jqModal来显示从SQL Server数据库中恢复的数据的报告对话框。

我从网站上的例子开始,一切都很完美,但是。

如果我将按钮的CssClass字段设置为jqModal(我假设jQModel使用它来执行jQModal代码),则不会调用后面的按钮单击方法,但是如果不设置CssClass字段,按钮单击方法的结束,然后触发后面的代码,但我必须再次单击该按钮以显示模式对话框。

按钮被动态添加到表中以显示系统内的错误。单击该按钮后,模态对话框将显示有关错误的更多详细信息。

最令人愤怒的是,如果我点击第一张不同的记录,则显示记录数据。

所以基本上,我的问题是,如何在点击按钮时从后面的代码中触发qgModal代码?

好的,所以这里有一些代码来解释上述内容。

<h2>Header Section</h2>
<title></title>
<script src="../Scripts/jquery-1.8.2.min.js"></script>
<script src="../Scripts/jqModal.js"></script>
<script>
    $().ready(function () {
        $('#dialog').jqm({ modal: true });
    });
</script>
<link href="../Content/themes/jqModal.css" rel="stylesheet" />
<style>
    .jqmWindow {
        display: none;
        position: fixed;
        top: 17%;
        left: 50%;
        margin-left: -300px;
        width: 600px;
        background-color: #EEE;
        color: #333;
        border: 1px solid black;
        padding: 12px;
    }

    .jqmOverlay { background-color: #000; }

    /* Fixed posistioning emulation for IE6
       Star selector used to hide definition from browsers other than IE6
       For valid CSS, use a conditional include instead */
    * html .jqmWindow {
        position: absolute;
        top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
    }
    #img_Close
    {
        text-decoration: none;
        border: 0;
        outline: none;
       float:right;
    }
</style>

<h2>Body Section</h2>

<form id="form1" runat="server">

    <a href="#" class="jqModal">view</a>

    <asp:HyperLink ID="HyperLink1" runat="server" CssClass="jqModal">HyperLink</asp:HyperLink>

    <asp:Label ID="Label1" runat="server" CssClass="jqModal" Text="Label"></asp:Label>


    <asp:Button ID="Button1" runat="server"  Text="Button" />

    <div class="jqmWindow" id="dialog">
        <a href="#" class="jqmClose">
            <asp:Image ID="img_Close" runat="server" ImageUrl="~/Images/close_window-small.png" />
        </a>
        <div id="JustTesting">
            <p id="test" runat="server"></p>
        </div>
        <hr/>
        <em>READ ME</em> -->
        This is a "vanilla plain" jqModal window. Behavior and appeareance extend far beyond this.
        The demonstrations on this page will show off a few possibilites. I recommend walking
        through each one to get an understanding of jqModal <em>before</em> using it.
        <br />
        <hr />
    </div>
</form>

实际上,这是jqModal网站上示例的直接副本。

如果单击任何类,将类设置为jqModal,则模态窗口可以正常工作。如果您注意到asp:按钮没有设置CssClass选项,但是如果您设置它也可以。

所以我的代码背后有这个:

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        test.InnerText = "Hello.."
        Button1.CssClass = "jqModal"
End Sub

正如您所看到的,它是使用Hello更新JustTesting Div中的p标记,然后将CssClass设置为jqModal。

单击按钮时,没有任何反应,但再次单击它会触发模态窗口。

这显然与类的设置有关,导致jqModal触发。

另外,我尝试在page_load中设置CssClass,这与在html中设置它基本相同。后面的代码没有被调用,但模态窗口工作正常。

我希望这比第一次尝试更好。

1 个答案:

答案 0 :(得分:0)

为解决问题,我刚停止使用jqModal