http://forums.asp.net/p/1342950/2731765.aspx
-----------------------
Hello,
I ran into a problem with the TextBoxWatermarkExtender inside of a MultiView within an UpdatePanel. After some research, I realized that this problem occurs for Safari 3 and Chrome with all AJAX functionality inside of a non-default View in a MultiView that is inside of an UpdatePanel. Some people also experienced this problem with RadControls (made by telerik), so the problem is not limited to the Ajax Control Toolkit. The problem does not occur with IE 7, Firefox 1.5/2/3, or Opera 9. Here is some trivial code to replicate the problem:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<div>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:MultiView ID="mvTest" runat="server" ActiveViewIndex="1">
<asp:View runat="server">
<asp:TextBox ID="txtTest" runat="server" />
<ajax:TextBoxWatermarkExtender ID="txtTest_TextBoxWatermarkExtender" runat="server" TargetControlID="txtTest" WatermarkText="mm/dd/yyyy" />
<ajax:MaskedEditExtender ID="txtTest_MaskedEditExtender" runat="server" TargetControlID="txtTest" MaskType="Date" Mask="99/99/9999" />
<asp:Button ID="btnSwitch" runat="server" Text="Switch" OnClick="btnSwitch_Click" />
</asp:View>
<asp:View runat="server">
<asp:Button ID="btnSwitch2" runat="server" Text="Switch" OnClick="btnSwitch_Click" />
</asp:View>
</asp:MultiView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSwitch" />
<asp:AsyncPostBackTrigger ControlID="btnSwitch2" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSwitch_Click(object sender, EventArgs e)
{
mvTest.ActiveViewIndex = (mvTest.ActiveViewIndex == 0 ? 1 : 0);
}
}
PLEASE help! I am at a complete loss on this issue and I really need the functionality.Thanks a million.
---
Hi kcraft
This problem is caused by the incorrect creation of MaskedEditExtender, if you remove the following lines, the page will work normally:
<ajax:TextBoxWatermarkExtender ID="txtTest_TextBoxWatermarkExtender" runat="server" TargetControlID="txtTest" WatermarkText="mm/dd/yyyy" />
<ajax:MaskedEditExtender ID="txtTest_MaskedEditExtender" runat="server" TargetControlID="txtTest" MaskType="Date" Mask="99/99/9999" />
You can report the issue on the Issue Tracker of CodePlex:
http://www.codeplex.com/AjaxControlToolkit/WorkItem/AdvancedList.aspx
Thanks.
Lance Zhang
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
----
Lance,
Thanks for the reply. Can you explain what you mean by "incorrect creation of MaskedEditExtender" so I can describe the problem more thoroughly in the issue report?
It seems to me like the problem is occuring because these extenders rely on JavaScript to be run when the page is finished loading, but since the extenders aren't added to the page until AFTER the page is loaded (since they are in an inactive view of a multiview), the "page load" code is never run for them in Webkit browsers. I have made the following observations about this problem:
If I click the "Switch" button fast enough after the page loads, the watermark will appear. This might be because the page load event hasn't fired, so the new scripts get added before the page load event and subsequently get run as expected.
Using ajax:ToolkitScriptManager with combinescripts="true" instead of asp:ScriptManager solves this particular problem (but causes others). I believe the ToolkitScriptManager causes ALL of the scripts, including those for the watermark and mask, to be included when the page is initially loaded rather than when the multiview activeindex changes.
Using Firebug with Firefox, I can see that a new script block is added for each extender EVERY TIME I change the multiview's active index to the one that contains the extenders. The result is a very long and redundant list of script blocks. In other words, if I click the "Switch" button 4 times (thus switching back-and-forth twice), then 2 sets of script blocks will have been added for the watermark and mask.
I have been searching for a workaround to this problem because I really need the functionality that is provided by the AJAX extenders (I am using others besides the watermark and mask). One way I have settled on but cannot get to work is dynamically switching UpdatePanel AsyncPostbackTriggers to PostbackTriggers for Webkit browsers. I have been completely unsuccessful at this. The approach I have taken is to put a function in my base Page class that detects Webkit browsers, then scans the page for UpdatePanels. I then iterate through the UpdatePanel's Triggers collection and replace all AsyncPostbackTriggers with PostbackTriggers. This results in an error that I haven't tracked down yet. Do you have any other ideas for a workaround?
Thanks again for your help.
Comments: In my project i made use of Update Panel with File Upload Control. <asp:UpdatePanel ID="upPaySlip" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:FileUpload ID="flPhoto" runat="server" /> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /> On Submit Button click i save File that was browsed using FileUpload control. When I browse the file and click on submit button. FileUpload control shows no file selectected. But next time agian, Browse the file and click on Submit button, FileUpload control shows File. So basically this problem occur for the first time when i click on submit Button.
-----------------------
Hello,
I ran into a problem with the TextBoxWatermarkExtender inside of a MultiView within an UpdatePanel. After some research, I realized that this problem occurs for Safari 3 and Chrome with all AJAX functionality inside of a non-default View in a MultiView that is inside of an UpdatePanel. Some people also experienced this problem with RadControls (made by telerik), so the problem is not limited to the Ajax Control Toolkit. The problem does not occur with IE 7, Firefox 1.5/2/3, or Opera 9. Here is some trivial code to replicate the problem:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<div>
<asp:UpdatePanel runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:MultiView ID="mvTest" runat="server" ActiveViewIndex="1">
<asp:View runat="server">
<asp:TextBox ID="txtTest" runat="server" />
<ajax:TextBoxWatermarkExtender ID="txtTest_TextBoxWatermarkExtender" runat="server" TargetControlID="txtTest" WatermarkText="mm/dd/yyyy" />
<ajax:MaskedEditExtender ID="txtTest_MaskedEditExtender" runat="server" TargetControlID="txtTest" MaskType="Date" Mask="99/99/9999" />
<asp:Button ID="btnSwitch" runat="server" Text="Switch" OnClick="btnSwitch_Click" />
</asp:View>
<asp:View runat="server">
<asp:Button ID="btnSwitch2" runat="server" Text="Switch" OnClick="btnSwitch_Click" />
</asp:View>
</asp:MultiView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnSwitch" />
<asp:AsyncPostBackTrigger ControlID="btnSwitch2" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnSwitch_Click(object sender, EventArgs e)
{
mvTest.ActiveViewIndex = (mvTest.ActiveViewIndex == 0 ? 1 : 0);
}
}
PLEASE help! I am at a complete loss on this issue and I really need the functionality.Thanks a million.
---
Hi kcraft
This problem is caused by the incorrect creation of MaskedEditExtender, if you remove the following lines, the page will work normally:
<ajax:TextBoxWatermarkExtender ID="txtTest_TextBoxWatermarkExtender" runat="server" TargetControlID="txtTest" WatermarkText="mm/dd/yyyy" />
<ajax:MaskedEditExtender ID="txtTest_MaskedEditExtender" runat="server" TargetControlID="txtTest" MaskType="Date" Mask="99/99/9999" />
You can report the issue on the Issue Tracker of CodePlex:
http://www.codeplex.com/AjaxControlToolkit/WorkItem/AdvancedList.aspx
Thanks.
Lance Zhang
Microsoft Online Community Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help.
----
Lance,
Thanks for the reply. Can you explain what you mean by "incorrect creation of MaskedEditExtender" so I can describe the problem more thoroughly in the issue report?
It seems to me like the problem is occuring because these extenders rely on JavaScript to be run when the page is finished loading, but since the extenders aren't added to the page until AFTER the page is loaded (since they are in an inactive view of a multiview), the "page load" code is never run for them in Webkit browsers. I have made the following observations about this problem:
If I click the "Switch" button fast enough after the page loads, the watermark will appear. This might be because the page load event hasn't fired, so the new scripts get added before the page load event and subsequently get run as expected.
Using ajax:ToolkitScriptManager with combinescripts="true" instead of asp:ScriptManager solves this particular problem (but causes others). I believe the ToolkitScriptManager causes ALL of the scripts, including those for the watermark and mask, to be included when the page is initially loaded rather than when the multiview activeindex changes.
Using Firebug with Firefox, I can see that a new script block is added for each extender EVERY TIME I change the multiview's active index to the one that contains the extenders. The result is a very long and redundant list of script blocks. In other words, if I click the "Switch" button 4 times (thus switching back-and-forth twice), then 2 sets of script blocks will have been added for the watermark and mask.
I have been searching for a workaround to this problem because I really need the functionality that is provided by the AJAX extenders (I am using others besides the watermark and mask). One way I have settled on but cannot get to work is dynamically switching UpdatePanel AsyncPostbackTriggers to PostbackTriggers for Webkit browsers. I have been completely unsuccessful at this. The approach I have taken is to put a function in my base Page class that detects Webkit browsers, then scans the page for UpdatePanels. I then iterate through the UpdatePanel's Triggers collection and replace all AsyncPostbackTriggers with PostbackTriggers. This results in an error that I haven't tracked down yet. Do you have any other ideas for a workaround?
Thanks again for your help.
Comments: In my project i made use of Update Panel with File Upload Control. <asp:UpdatePanel ID="upPaySlip" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:FileUpload ID="flPhoto" runat="server" /> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /> On Submit Button click i save File that was browsed using FileUpload control. When I browse the file and click on submit button. FileUpload control shows no file selectected. But next time agian, Browse the file and click on Submit button, FileUpload control shows File. So basically this problem occur for the first time when i click on submit Button.