ansaurus

Question

problem with jqmodal inside an update panel

Answer 1

A:

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 dont 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"&gt;

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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

ansaurus

tags:

views:

answers:

problem with jqmodal inside an update panel

related questions