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