更新パネル内のjqmodalに問題があります

私はページとして、またはモーダルダイアログとして表示する必要のあるコントロールを持っています。 page_loadイベントで私はmodalプロパティが設定されているかどうかを調べ、もしそうならjqmodalを呼び出すスクリプトを登録します。コードは次のとおりです。更新パネル内の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でINITALページの読み込みと更新がうまく機能します。しかし、私はポストバック時にIEとFFで問題が発生します。 IEでは、モーダル（この場合はセレクタ）を表すdivは右下に500ピクセルほど右にシフトされます。

firefoxでは、各ポストバックでdivの周囲の暗い部分が徐々に暗くなります。

ホストページ（実際にはマスターページにあります）から更新パネルを削除した場合、このコードは機能します。

私はポストバックで上記のコードを実行しようとしませんでしたが、単にjqmodalを無効にします。私は本当に困っている誰もがこれを助けることができればそれを感謝します。

出典

2009-04-01 Anonymous

問題は、ポストバック時にjquery divが右下に移動することです。 div後のページの読み込みは、次のようになります（正しくレンダリングされます）。
DIV class = "jqmWindow jqmID1" id =セレクタスタイル= "DISPLAY：ブロック; Z-INDEX：3000; WIDTH：1100px; HEIGHT：600px" _jqm = "1 3 ">

非同期ポストバック後、それは、この（誤ってレンダリング）のように見える：
DIV CLASS =" "= jQuery1238701349279" jqmWindow jqmID2" ID =セレクタスタイル= "DISPLAY：ブロック; 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; 
    } 

}

出典

2009-04-02 20:04:28

更新パネル内のjqmodalに問題があります

答えて

関連する問題