I posted a problem with a jquery control on asp.net and got my hand slapped. Unfortunate, since many jquery controls are great to work with and provide real value. I hope you guys dont mind if I ask about jqmodal because it's a great control when it works and making it work with .net will only benefit us all.
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
<code>
// 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;
}
}
</code>