Problème avec jqmodal dans un panneau de mise à jour

J'ai un contrôle que j'ai besoin d'afficher en tant que page ou en tant que boîte de dialogue modale. Dans l'événement page_load, je vérifie si la propriété modale est définie et si c'est le cas, j'inscris un script pour appeler jqmodal. Voici le code:Problème avec jqmodal dans un panneau de mise à jour

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); 
    } 
}

Ce contrôle est utilisé sur une page disposant d'un panneau de mise à jour. Tout cela fonctionne bien dans Firefox et IE pour le chargement de la page INITAL et toutes les actualisations. Cependant quand je publie j'ai des problèmes dans IE et FF: Dans IE, la div qui représente le modal (dans ce cas, le sélecteur) est décalée vers le bas et vers la droite environ 500 px. Dans Firefox, la zone sombre autour de la div devient progressivement plus sombre à chaque publication.

Si je supprime le panneau de mise à jour de la page hôte (il s'agit en fait de la page maître), ce code fonctionne.

J'ai essayé de ne pas exécuter le code ci-dessus lors de la publication, mais cela désactive simplement jqmodal. Je suis vraiment perplexe Si quelqu'un peut aider avec cela, je l'apprécierais.

Source

2009-04-01 Anonymous

Le problème est que lors de la publication, la div jquery est déplacée vers le bas et vers la droite. Le div après page chargement ressemble à ceci (rend correctement):
DIV class = "jqmWindow jqmID1" id = sélecteur style = "AFFICHAGE: bloc; Z-INDEX: 3000; LARGEUR: 1100px; HAUTEUR: 600px" _jqm = "1 "jQuery1238701349279 =" 3 ">

Après async postback il ressemble à ceci (rend mal):
classe DIV =" jqmWindow jqmID2" id = style sélecteur = "display: block; Z-INDEX: 3000; WIDTH: 1100px; TOP: 146px; HEIGHT: 600px "_jqm =" 2 "jQuery1238701490978 =" 5 ">
La suppression du panneau de mise à jour résout ce problème ...... Je ne sais pas que c'est le problème.

J'ai créé un projet avec quelques pages avec le code juste pertinent. Les pages sont site.master, List.aspx/cs et 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; 
    } 

}

Source

2009-04-02 20:04:28

Problème avec jqmodal dans un panneau de mise à jour

Répondre

Questions connexes