ASP.NET AJAX Discussion and Suggestions

Re: UpdatePanel and JQuery Dialog Problem

sravi — Sat, 04 Jul 2009 00:07:46 GMT

There are issues you need to take care of when using Jquery Dialog with Asp.net and Update panels. Have a look at this blog post for a sample implementation.

http://blog.roonga.com.au/2009/07/using-jquery-ui-dialog-with-aspnet-and.html

cheers

Re: UpdatePanel and JQuery Dialog Problem

Lance Zhang - MSFT — Mon, 16 Feb 2009 06:29:24 GMT

Based on my experience, I think the facing issue is because of the architecture of these two Ajax client libraries is different. If we mix them up together, sometimes the different architectures may generate JavaScript conflict.

So, in this scenario, I would like to suggest you try to read the following articles which talk about ASP.NET and JQuery working together:

jQuery effects not working after UpdatePanel Asynchronous request is over
http://imak47.wordpress.com/2008/10/18/jquery-effects-not-working-after-updatepanel-asynchronous-request-is-over/

Integrating jQuery with ASP.NET
http://ferry.ferryandtheria.com/?p=3

3 mistakes to avoid when using jQuery with ASP.NET AJAX
http://encosia.com/2008/06/05/3-mistakes-to-avoid-when-using-jquery-with-aspnet-ajax/

Thanks.

Re: UpdatePanel and JQuery Dialog Problem

Shayke — Thu, 12 Feb 2009 17:56:51 GMT

I tried to make div "a" a server control (using runat=server) and replaced the #a with #<%=a.ClientID%>. It didn't work... :(

Re: UpdatePanel and JQuery Dialog Problem

Danny117 — Thu, 12 Feb 2009 16:44:09 GMT

I see its at the bottom id="a"? $("#a") lol that looks like comic bad language text doesn't it?

The update panel replaces a block of html on the client and I believe it implements itemplate inaming which will add a prefix to the client ids...

UpdatePanel and JQuery Dialog Problem

Shayke — Thu, 12 Feb 2009 06:48:26 GMT

Hi,

I'm facing the weirdest thing, and I just can't find a way to solve it.

Here is what I'm doing:
1. I have a textbox on my page, let's call it "TextBox A" and a hidden div with another textbox, let's call it "TextBox B".
2. The hidden div (with TextBox B) is shown as a dialog using the JQuery UI library.
3. When the user writes text in TextBox A and clicks on a button, the dialog is opened with the text from TextBox A in TextBox B.
4. If the user changes TextBox B content and clicks OK, the content from TextBox B should be inserted to TextBox A.
It's just a kind of synchronization between them.

This works great until I put all of this inside an UpdatePanel and executes a callback... then it starts behaving really really weird...
I've uploaded a screencast where I present my problem: http://screencast.com/t/Lv6MIFreT.

The code to reproduce this behavior is very simple:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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">
    <title></title>
	<link href="JQuery/theme/ui.theme.css" rel="stylesheet" type="text/css" />
	<script src="JQuery/jquery.js" type="text/javascript"></script>
	<script src="JQuery/jquery-ui.js" type="text/javascript"></script>	
	
	<script type="text/javascript">
		function SynchTextBoxes(sourceTB, targetTB) {
			if (sourceTB == null) {
				sourceTB = "#<%=TextBox1.ClientID %>";
				targetTB = "#<%=TextBox2.ClientID %>";
			}
			
			var txtBoxValue = $(sourceTB).val();
			$(targetTB).val(txtBoxValue);			
		}
			
	
		function ShowDialog() {
			$("#a").dialog({
				bgiframe: true,
				resizable: false,
				height: 140,
				width: 300,
				modal: true,
				overlay: {
					backgroundColor: '#000',
					opacity: 0.5
				},
				buttons: { 'OK': function() { $(this).dialog('close'); SynchTextBoxes("#<%=TextBox2.ClientID %>", "#<%=TextBox1.ClientID %>"); } }
			});
		}
	</script>
</head>
<body>
    <form id="form1" runat="server">
    
    <asp:ScriptManager ID="ScriptManager1" runat="server">
	</asp:ScriptManager>
	<asp:UpdatePanel ID="UpdatePanel1" runat="server">
	<ContentTemplate>
	<div>
		<asp:Button ID="Button2" runat="server" Text="Do Callback" /><br />
	
		<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Button ID="Button1"
			runat="server" Text="Open Dialog" OnClientClick="SynchTextBoxes(); ShowDialog(); return true;" UseSubmitBehavior="false" />
    </div>
    
    <div id="a" title="Lalala">
		<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox></div>
		</ContentTemplate>
	</asp:UpdatePanel>
    </form>
</body>
</html>

Does anyone knows a solution?
Thanks,
Shay