当前位置： 文江博客话题详情

更新面板内的 jqmodal 问题

发布于 2024-07-15 22:46:12 字数 1078 浏览 5 评论 0原文

我有一个控件需要显示为页面或模式对话框。 在 page_load 事件中，我查看是否设置了 modal 属性，如果设置了，我注册一个脚本来调用 jqmodal。 代码如下：

protected void Page_Load(object sender, EventArgs e)
{
    if (this.Modal)                                         // Show as a modal dialog
    {

        selector.Attributes.Add("class", "jqmWindow");
        selector.Attributes.Add("style", "width:1100px;height:600px;");
        string script = "<script type=\"text/javascript\">$().ready(function() { $(" + "'#" + selector.ClientID + "').jqm({ modal: true }).jqmShow();});</script>";
        //script = "<script type=\"text/javascript\">confirm('hello');</script>";
        ScriptManager.RegisterStartupScript(this,this.GetType(),"duh",script,false);
    }
}

该控件用在具有更新面板的页面上。 这一切在 Firefox 和 IE 中都可以很好地用于初始页面加载和任何刷新。 但是，当我回发时，我在 IE 和 FF 中遇到问题： 在 IE 中，表示模式的 div（在本例中为选择器）向下并向右移动约 500 px。

在 Firefox 中，div 周围的黑暗区域随着每次回发而逐渐变暗。

如果我从主页中删除更新面板（它实际上在主页中），则此代码可以工作。

我尝试在回发时不执行上述代码，但这只是禁用了 jqmodal。 我真的很困惑如果有人可以帮助我，我将不胜感激。

原文

I have a control that I need to display as a page or as a modal dialog.
In the page_load event I look to see if the modal property is set and if so, I register a script to invoke jqmodal. Here is the code:

protected void Page_Load(object sender, EventArgs e)
{
    if (this.Modal)                                         // Show as a modal dialog
    {

        selector.Attributes.Add("class", "jqmWindow");
        selector.Attributes.Add("style", "width:1100px;height:600px;");
        string script = "<script type=\"text/javascript\">$().ready(function() { $(" + "'#" + selector.ClientID + "').jqm({ modal: true }).jqmShow();});</script>";
        //script = "<script type=\"text/javascript\">confirm('hello');</script>";
        ScriptManager.RegisterStartupScript(this,this.GetType(),"duh",script,false);
    }
}

This control is used on a page that has an update panel.
This all works well in Firefox and IE for the INITAL page load and any refreshes. However when I postback I get problems in IE and FF:
In IE, the div that represents the modal (in this case, selector) is shifted down and to the right about 500 px.

In firefox, the darkened area around the div becomes progressively darker with each postback.

If I remove the update panel from the host page (it's actually in the master page) this code works.

I have tried not executing the above code on postback but that simply disables jqmodal. I'm really stumped If anyone can help with this I would appreciate it.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

紅太極 2024-07-22 22:46:12

问题在于，在 PostBack 上，jQuery div 向下并向右移动。 页面加载后的 div 看起来像这样（正确渲染）：

DIV class="jqmWindow jqmID1" id=selector style="DISPLAY: block; Z-INDEX: 3000; WIDTH: 1100px; HEIGHT: 600px" _jqm="1" jQuery1238701349279="3">

异步回发后看起来像这样（渲染不正确）：

DIV class="jqmWindow jqmID2" id=selector style="DISPLAY: block; Z-INDEX: 3000; WIDTH: 1100px; TOP: 146px; HEIGHT: 600px" _jqm="2" jQuery1238701490978="5">

删除更新面板解决了这个问题......我不知道这是问题。

我创建了一个项目，其中包含一些带有相关代码的页面。 这些页面是 site.master、List.aspx/cs 和 PartSelector.ascx/cs

// site.master - nothing in codebehind
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://localhost/Scripts/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://localhost/Scripts/jqueryUI/ui/ui.core.js" type="text/javascript"></script>
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" > </asp:ScriptManager>
    <div>
        <asp:updatepanel id="upmaincontent" runat="server" updatemode="conditional">
            <contenttemplate>
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>


// list.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" CodeFile="List.aspx.cs" Inherits="List" Title="Parts Master List" %>
<%@ Register Assembly="System.Web.Entity, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" Namespace="System.Web.UI.WebControls" tagprefix="asp" %>
<%@ Register Src="~/Controls/PartSelector.ascx" TagName="PartSelector" TagPrefix="sam"  %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />
    <center>
        <div><center><h3><%= "Part Selector" %></h3></center></div>
        <div>
            <center>
                <sam:PartSelector ID="PartSelector1" runat="server" Modal="true" ActiveOnly="false" />
            </center>
        </div>
    </center>
</asp:Content>




// list.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;
using System.Web.DynamicData;
using System.Linq.Expressions;

public partial class List : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {

        if (!IsPostBack)
        {
            PartSelector1.ActivateSelector("");
        }
    }
}


// PartSelector.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PartSelector.ascx.cs" Inherits="PartSelector" %>

<link href="http://localhost/Scripts/jqModal/jqModal.css" rel="stylesheet" type="text/css" />
<script src="http://localhost/Scripts/jqModal/jqModal.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
    var IsModal = false;                            // Initialize a variable to indicate if the page is to be displayed inside a jqModal dialaog
    $().ready(function() { displayPage(); });       // Execute dispalyPage when the dom is ready

    function displayPage() {
        confirm('displaypage');     
        IsModal = <%= this.Modal ? "true" : "false" %>  // Set IsModal based on a property in codebehind

        if(IsModal)
        {
            Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(displayPageAsync);     // handle async postbacks
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler); // clean up before starting an async postback
            $("#selector").addClass("jqmWindow");                           // add some css to resize the display to fit the modal dialog
            $("#selector").css({width:"1100px", height: "600px"});
            $("#selector").jqm({ modal: true, onHide: hidejqm }).jqmShow();
        }
    }

    function displayPageAsync(sender, args)
    {
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        if (prm.get_isInAsyncPostBack() ) {             // Prevent displayPage from being called twice on the initial page load
            confirm('page loaded, async postback.');
            displayPage();
        }
    }

    function beginRequestHandler(sender, args) {
        confirm('begin async postback');
        $("#selector").jqmHide();   // Hide a dialog from last postback 
    }

    function hidejqm(hash) {
        confirm('hidejqm');
        hash.w.fadeOut('2000', function() { hash.o.remove(); });
    }
</script>

<div id="selector">
    <center>
    <asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to postback" OnClick="Postback_Click"></asp:LinkButton><br /><br />
    <asp:LinkButton ID="CancelButton" runat="server" Text="Cancel" OnClick="CancelButton_Click" CssClass="CommandButton"></asp:LinkButton>
    </center>
</div>




// PartSelector.ascx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq.Expressions;


public partial class PartSelector : System.Web.UI.UserControl
{
    public bool Modal { get; set; }


    public void ActivateSelector(string searchString)
    {
        this.Visible = true;
    }

    protected void CancelButton_Click(object sender, EventArgs e)
    {
        this.Visible = false;
    }

    protected void Postback_Click(object sender, EventArgs e)
    {
        int x = 1;
    }

}

The problem is that on PostBack, the jQuery div is moved down and to the right. The div after page load looks like this (renders correctly):

DIV class="jqmWindow jqmID1" id=selector style="DISPLAY: block; Z-INDEX: 3000; WIDTH: 1100px; HEIGHT: 600px" _jqm="1" jQuery1238701349279="3">

After Async PostBack it looks like this (renders incorrectly):

DIV class="jqmWindow jqmID2" id=selector style="DISPLAY: block; Z-INDEX: 3000; WIDTH: 1100px; TOP: 146px; HEIGHT: 600px" _jqm="2" jQuery1238701490978="5">

Removing the update panel solves this problem......I don't know that it is the problem.

I created a project with some pages with the just relevent code. The pages are site.master, List.aspx/cs and PartSelector.ascx/cs

// site.master - nothing in codebehind
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="http://localhost/Scripts/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="http://localhost/Scripts/jqueryUI/ui/ui.core.js" type="text/javascript"></script>
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" > </asp:ScriptManager>
    <div>
        <asp:updatepanel id="upmaincontent" runat="server" updatemode="conditional">
            <contenttemplate>
                <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>


// list.aspx
<%@ Page Language="C#" MasterPageFile="~/Site.master" CodeFile="List.aspx.cs" Inherits="List" Title="Parts Master List" %>
<%@ Register Assembly="System.Web.Entity, Version=3.5.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" Namespace="System.Web.UI.WebControls" tagprefix="asp" %>
<%@ Register Src="~/Controls/PartSelector.ascx" TagName="PartSelector" TagPrefix="sam"  %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" />
    <center>
        <div><center><h3><%= "Part Selector" %></h3></center></div>
        <div>
            <center>
                <sam:PartSelector ID="PartSelector1" runat="server" Modal="true" ActiveOnly="false" />
            </center>
        </div>
    </center>
</asp:Content>




// list.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;
using System.Web.DynamicData;
using System.Linq.Expressions;

public partial class List : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {

        if (!IsPostBack)
        {
            PartSelector1.ActivateSelector("");
        }
    }
}


// PartSelector.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PartSelector.ascx.cs" Inherits="PartSelector" %>

<link href="http://localhost/Scripts/jqModal/jqModal.css" rel="stylesheet" type="text/css" />
<script src="http://localhost/Scripts/jqModal/jqModal.js" type="text/javascript"></script>

<script type="text/javascript" language="javascript">
    var IsModal = false;                            // Initialize a variable to indicate if the page is to be displayed inside a jqModal dialaog
    $().ready(function() { displayPage(); });       // Execute dispalyPage when the dom is ready

    function displayPage() {
        confirm('displaypage');     
        IsModal = <%= this.Modal ? "true" : "false" %>  // Set IsModal based on a property in codebehind

        if(IsModal)
        {
            Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(displayPageAsync);     // handle async postbacks
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler); // clean up before starting an async postback
            $("#selector").addClass("jqmWindow");                           // add some css to resize the display to fit the modal dialog
            $("#selector").css({width:"1100px", height: "600px"});
            $("#selector").jqm({ modal: true, onHide: hidejqm }).jqmShow();
        }
    }

    function displayPageAsync(sender, args)
    {
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        if (prm.get_isInAsyncPostBack() ) {             // Prevent displayPage from being called twice on the initial page load
            confirm('page loaded, async postback.');
            displayPage();
        }
    }

    function beginRequestHandler(sender, args) {
        confirm('begin async postback');
        $("#selector").jqmHide();   // Hide a dialog from last postback 
    }

    function hidejqm(hash) {
        confirm('hidejqm');
        hash.w.fadeOut('2000', function() { hash.o.remove(); });
    }
</script>

<div id="selector">
    <center>
    <asp:LinkButton ID="LinkButton1" runat="server" Text="Click here to postback" OnClick="Postback_Click"></asp:LinkButton><br /><br />
    <asp:LinkButton ID="CancelButton" runat="server" Text="Cancel" OnClick="CancelButton_Click" CssClass="CommandButton"></asp:LinkButton>
    </center>
</div>




// PartSelector.ascx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq.Expressions;


public partial class PartSelector : System.Web.UI.UserControl
{
    public bool Modal { get; set; }


    public void ActivateSelector(string searchString)
    {
        this.Visible = true;
    }

    protected void CancelButton_Click(object sender, EventArgs e)
    {
        this.Visible = false;
    }

    protected void Postback_Click(object sender, EventArgs e)
    {
        int x = 1;
    }

}
回复 原文
~没有更多了~

关于作者

日裸衫吸

暂无简介

0 文章
0 评论
21 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

策马西风

文章 0 评论 0

柠檬心

文章 0 评论 0

1331

文章 0 评论 0

七度光

文章 0 评论 0

qq_oc2LaO

文章 0 评论 0

野却迷人

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文