469,934 Members | 2,648 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,934 developers. It's quick & easy.

Problem with Update Panel - dynamic data fetch

dj12345
14
Hi,

(Asp.net + Ajax)

I am creating a page which will fetch data from server without postbak of a page..

I have 2 controls on this page TextBox and Lable. I have assigned TextBoxWatermark extender to TextBox. Inside a Update panel i have Lable.. and the update panel refreshes each 3 seconds and it fetches data and displays it. But my problem is whenever the data is fetched from Server the textbox watermark flickers. i dont know why it filckers. Does anybody has the idea.

I am giving the sample code. Check that the after fetching data the TextBox flickers.

Expand|Select|Wrap|Line Numbers
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdatePanelJavascript.aspx.cs" Inherits="UpdatePanelJavascript" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head id="Head1" runat="server">
  7.     <title>Untitled Page</title>
  8.      <style type="text/css">
  9.    .watermarked
  10. {
  11.     height: 20px;
  12.     width: 150px;
  13.     padding: 2px 0 0 2px;
  14.     border: 1px solid #BEBEBE;
  15.     background-color: #ebebeb;
  16.     color: Gray;
  17. }
  18. </style>
  19.  
  20. </head>
  21. <body>
  22.     <form id="form1" runat="server">
  23.     <div>
  24.         <asp:ScriptManager ID="ScriptManager1" runat="server" />
  25.  
  26.         <script language="javascript">
  27.     var prm = Sys.WebForms.PageRequestManager.getInstance();
  28.  
  29.     setTimeout("Update()", 3000);
  30.  
  31.  
  32.     function Update()
  33.     {
  34.     prm._doPostBack('UpdatePanel1', '');
  35.     setTimeout("Update()", 3000);
  36.     }
  37.  
  38.         </script>
  39.  
  40.     </div>
  41.     <br />
  42.     <table width="300px" height="300px">
  43.         <tr>
  44.             <td>
  45.             </td>
  46.             <td>
  47.                 <asp:TextBox ID="TextBox1" runat="server" Width="280px"></asp:TextBox>
  48.                 <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"
  49.                     TargetControlID="TextBox1" WatermarkText="type any title here  " WatermarkCssClass="watermarked">
  50.                 </ajaxToolkit:TextBoxWatermarkExtender>
  51.             </td>
  52.         </tr>
  53.     </table>
  54.     <table width="300px" height="300px">
  55.         <tr>
  56.             <td>
  57.                 <asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">
  58.                     <ContentTemplate>
  59.                         <asp:Label ID="Label1" runat="server" Text="Label" Width="315px"></asp:Label>
  60.                     </ContentTemplate>
  61.                 </asp:UpdatePanel>
  62.             </td>
  63.         </tr>
  64.     </table>
  65.     </form>
  66. </body>
  67. </html>
.cs code

Expand|Select|Wrap|Line Numbers
  1. using System;
  2. using System.Data;
  3. using System.Configuration;
  4. using System.Collections;
  5. using System.Web;
  6. using System.Web.Security;
  7. using System.Web.UI;
  8. using System.Web.UI.WebControls;
  9. using System.Web.UI.WebControls.WebParts;
  10. using System.Web.UI.HtmlControls;
  11.  
  12. public partial class UpdatePanelJavascript : System.Web.UI.Page
  13. {
  14.     protected void Page_Load(object sender, EventArgs e)
  15.     {
  16.  
  17.     }
  18.     protected void UpdatePanel1_Load(object sender, EventArgs e)
  19.     {
  20.         Label1.Text = "It's Now " + DateTime.Now.ToString();
  21.     }
  22. }
Thanks
Yogesh Sapkale
May 25 '09 #1
10 7070
gits
5,390 Expert Mod 4TB
could you post the rendered html-code as it appears in the browser after page-load? so that we might see how the control creates the watermark ... otherwise i could move that post over to the ASP.NET forum where you probably could better help with that. it doesn't seem to be a javascript/ajax issue more one with the .net-Ajax-toolkit or asp.net control ...

kind regards
May 25 '09 #2
dj12345
14
Hi,
Thank you for reply,

Here is Html rendered code



Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml" >
  4. <head id="Head1"><title>
  5.     Untitled Page
  6. </title>
  7.      <style type="text/css">
  8.    .watermarked
  9. {
  10.     height: 20px;
  11.     width: 150px;
  12.     padding: 2px 0 0 2px;
  13.     border: 1px solid #BEBEBE;
  14.     background-color: #ebebeb;
  15.     color: Gray;
  16. }
  17. </style>
  18.  
  19. </head>
  20. <body>
  21.     <form name="form1" method="post" action="UpdatePanelJavascript.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">
  22. <div>
  23. <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
  24. <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
  25. <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIMjQxNzI0OTYPZBYCAgMPZBYCAgcPZBYCZg9kFgICAQ8PFgIeBFRleHQFHUl0J3MgTm93IDUvMjUvMjAwOSA3OjAxOjI5IFBNZGRk0FyNq9VUJiSMDXSZtsjFF050Yvc=" />
  26. </div>
  27.  
  28. <script type="text/javascript">
  29. //<![CDATA[
  30. var theForm = document.forms['form1'];
  31. if (!theForm) {
  32.     theForm = document.form1;
  33. }
  34. function __doPostBack(eventTarget, eventArgument) {
  35.     if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
  36.         theForm.__EVENTTARGET.value = eventTarget;
  37.         theForm.__EVENTARGUMENT.value = eventArgument;
  38.         theForm.submit();
  39.     }
  40. }
  41. //]]>
  42. </script>
  43.  
  44.  
  45. <script src="/HDI-AJAX-P-PersistentComm-UpdatePanels-CS/WebResource.axd?d=u-PcELcngniLsN0Ztw1WXQ2&amp;t=633777572371735481" type="text/javascript"></script>
  46.  
  47.  
  48. <script src="/HDI-AJAX-P-PersistentComm-UpdatePanels-CS/ScriptResource.axd?d=8WjDUP0Zqh0vGOH9XdSVaaiE05-swWUwPfsOXbBxIlZIXlq7PqeEylNSj9jMtpPd0Cx1MG6NEoNZ3T4Lr__4ycQu11CB9EVCkqABQ9HHyrI1&amp;t=ffffffffc67cfc94" type="text/javascript"></script>
  49. <script type="text/javascript">
  50. //<![CDATA[
  51. if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
  52. //]]>
  53. </script>
  54.  
  55. <script src="/HDI-AJAX-P-PersistentComm-UpdatePanels-CS/ScriptResource.axd?d=8WjDUP0Zqh0vGOH9XdSVaaiE05-swWUwPfsOXbBxIlZIXlq7PqeEylNSj9jMtpPdqw6-YdKzq-Oy-gnWKWzaFMbgfRf7zyhinXdo8VN1nw-k6i7sUxDgVib0_7CpE3GW0&amp;t=ffffffffc67cfc94" type="text/javascript"></script>
  56. <script src="/HDI-AJAX-P-PersistentComm-UpdatePanels-CS/ScriptResource.axd?d=Y1wI7o-PqlEKfrKdSSrX8Zre7CqwykPtrI8XwaNiVAULEcUApjpnq7eZ1LFfbGdQxmEqRHMkJW3RglVUAySYZg2&amp;t=3069cd27" type="text/javascript"></script>
  57. <script src="/HDI-AJAX-P-PersistentComm-UpdatePanels-CS/ScriptResource.axd?d=Y1wI7o-PqlEKfrKdSSrX8Zre7CqwykPtrI8XwaNiVAW0-bD4-P-Yh-5BI_oI4ojOQS1MkWOwV2DpN0X-4aWQyGlh7WGQqPk9bXn_2VAdHIU1&amp;t=3069cd27" type="text/javascript"></script>
  58. <script src="/HDI-AJAX-P-PersistentComm-UpdatePanels-CS/ScriptResource.axd?d=Y1wI7o-PqlEKfrKdSSrX8Zre7CqwykPtrI8XwaNiVAUXXgRmWFJNmfJ8N2nWlItBdtqZLY1Gw9K_-zTWJRUiC53jMR0GySEQ9cnVMHZFHh41&amp;t=3069cd27" type="text/javascript"></script>
  59. <script type="text/javascript">
  60. //<![CDATA[
  61. function WebForm_OnSubmit() {
  62. null;
  63. return true;
  64. }
  65. //]]>
  66. </script>
  67.  
  68. <div>
  69.  
  70.     <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLqnv7UCwLs0bLrBgKL9pj0Ajxul2FD1MCtAXtDtCirrIV11Y5B" />
  71. </div>
  72.     <div>
  73.         <script type="text/javascript">
  74. //<![CDATA[
  75. Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));
  76. Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1'], [], [], 90);
  77. //]]>
  78. </script>
  79.  
  80.  
  81.         <script language="javascript">
  82.     var prm = Sys.WebForms.PageRequestManager.getInstance();
  83.  
  84.     setTimeout("Update()", 3000);
  85.  
  86.  
  87.     function Update()
  88.     {
  89.     prm._doPostBack('UpdatePanel1', '');
  90.     setTimeout("Update()", 3000);
  91.     }
  92.  
  93.         </script>
  94.  
  95.     </div>
  96.     <br />
  97.     <table width="300px" height="300px">
  98.         <tr>
  99.             <td>
  100.             </td>
  101.             <td>
  102.                 <input name="TextBox1" type="text" id="TextBox1" style="width:280px;" />
  103.                 <input type="hidden" name="TextBoxWatermarkExtender1_ClientState" id="TextBoxWatermarkExtender1_ClientState" />
  104.             </td>
  105.         </tr>
  106.     </table>
  107.     <table width="300px" height="300px">
  108.         <tr>
  109.             <td>
  110.                 <div id="UpdatePanel1">
  111.  
  112.                         <span id="Label1" style="display:inline-block;width:315px;">It's Now 5/25/2009 7:01:29 PM</span>
  113.  
  114. </div>
  115.             </td>
  116.         </tr>
  117.     </table>
  118.  
  119.  
  120. <script type="text/javascript">
  121. //<![CDATA[
  122. Sys.Application.initialize();
  123. Sys.Application.add_init(function() {
  124.     $create(AjaxControlToolkit.TextBoxWatermarkBehavior, {"ClientStateFieldID":"TextBoxWatermarkExtender1_ClientState","WatermarkCssClass":"watermarked","WatermarkText":"type any title here  ","id":"TextBoxWatermarkExtender1"}, null, null, $get("TextBox1"));
  125. });
  126. //]]>
  127. </script>
  128. </form>
  129. </body>
  130. </html>
May 25 '09 #3
gits
5,390 Expert Mod 4TB
i guess the form is reloaded or the 'watermark'-code is executed again after the update ... but i'm not familiar with ASP.NET ... so may be you could trace or exclude the mentioned issues?

kind regards
May 25 '09 #4
dj12345
14
Hi can anybody answer to my question on the following link

<Threads merged>

Thanks
May 25 '09 #5
Frinavale
9,735 Expert Mod 8TB
I took a look at the source code for the TextboxWatermark extender and they are clearing the text box when the page is submitted (in code).

It makes sense though...

The TextboxWatermark extender is putting default text in a TextBox...

But this text shouldn't really be there (since it's a watermark) so it is cleared when the page is submitted to the server.

It's tied into the page request manager so this means that whenever your page does a postback (even an asynchronous postback) to the server it will remove the default watermark text from the TextBox. Even if you place the textbox and it's watermark in it's own update panel it will still be cleared.

My suggestion would be to avoid using the TextboxWatermark if you don't want the flicker.
May 25 '09 #6
dj12345
14
Hi Frinavale,

Thanks for you suggestion.

I have one more question.

I have one aspx page on which there is ModalPopUp Extender, Buttons, and Update Panel. What I am doing is on Button Click showing the ModalPopUp. and it shows the ModalPopup Properly. But when the Asychronous postback happens it shows the popup but the popup background is not properly displayed.

Can you please check my Code. so will identify what is the problem is

Aspx page
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head runat="server">
  4.     <title>Untitled Page</title>
  5.       <style type="text/css">
  6.         .modalBackground
  7.         {
  8.             background-color: Gray;
  9.             filter: alpha(opacity=70);
  10.             opacity: 0.7;
  11.         }
  12.         </style>
  13.         <script type="text/javascript" language="javascript">
  14.             function hidePopup() 
  15.             {
  16.                 var modal = $find('modalpop');
  17.                 if (modal)
  18.                 {
  19.                     modal.hide();
  20.                 }
  21.             }
  22.  
  23.             function showpopup() 
  24.             {
  25.                 var modal = $find('modalpop');
  26.                 if (modal) {
  27.                     modal.show();
  28.                 }
  29.             }
  30.         </script>
  31. </head>
  32. <body>
  33.     <form id="form1" runat="server">
  34.     <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
  35.     <div>
  36.         <asp:UpdatePanel ID="updPanel" runat="server">
  37.             <ContentTemplate>
  38.                 <table border="1" width="800px" height="800px">
  39.                     <tr>
  40.                         <td>
  41.                             <asp:Label ID="lblText" runat="server" Text=""></asp:Label>
  42.                         </td>
  43.                     </tr>
  44.                 </table>
  45.                 <table border="1" width="800px" height="800px">
  46.                     <tr>
  47.                         <td>
  48.                             <asp:Button ID="btnShowPop" runat="server" Text="Show Popup" OnClientClick="return showpopup();" />
  49.                         </td>
  50.                     </tr>
  51.                 </table>
  52.             </ContentTemplate>
  53.             <Triggers>
  54.                 <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
  55.             </Triggers>
  56.         </asp:UpdatePanel>
  57.         <asp:Timer ID="Timer1" runat="server" Interval="3000">
  58.         </asp:Timer>
  59.         <asp:Panel ID="pnlPopup" runat="server" Style="display: none">
  60.             <table border="1" height="300px" width="300px">
  61.                 <tr>
  62.                     <td align="center" valign="middle">
  63.                         Helllooooooooo
  64.                     </td>
  65.                 </tr>
  66.                 <tr>
  67.                     <td>
  68.                         <asp:Button ID="btnOk" Text="Ok" runat="server" />
  69.                     </td>
  70.                 </tr>
  71.             </table>
  72.         </asp:Panel>
  73.         <ajaxToolkit:ModalPopupExtender ID="modalpop" runat="server" BackgroundCssClass="modalBackground"
  74.             PopupControlID="pnlPopup" TargetControlID="pnlPopup" OkControlID="btnOk" OnOkScript="hidePopup()">
  75.         </ajaxToolkit:ModalPopupExtender>
  76.     </div>
  77.     </form>
  78. </body>
  79. </html>
cs code
Expand|Select|Wrap|Line Numbers
  1. using System;
  2. using System.Data;
  3. using System.Configuration;
  4. using System.Web;
  5. using System.Web.Security;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  8. using System.Web.UI.WebControls.WebParts;
  9. using System.Web.UI.HtmlControls;
  10.  
  11. public partial class _Default : System.Web.UI.Page 
  12. {
  13.     protected void Page_Load(object sender, EventArgs e)
  14.     {
  15.         lblText.Text = "Time is : " + DateTime.Now.ToString();
  16.     }
  17. }

Thanks
Jun 1 '09 #7
Frinavale
9,735 Expert Mod 8TB
Try placing your modalBackground style in an external style sheet.
I had this problem before but can't remember the other way to solve it....but the external style sheet should fix it.
Jun 1 '09 #8
dj12345
14
I placed it in style sheet, but it is still not working. On Mozilla Firefox it is working properly but on IE it is not working...
Jun 2 '09 #9
dj12345
14
Hey Frinavale,

I found the solution finally,

we have to change ModalBackground for madal pop up as
Expand|Select|Wrap|Line Numbers
  1. .modalBackground
  2. {
  3.     background-color: Gray;
  4.     filter: alpha(opacity=70) !important;
  5.     opacity: 0.7;
  6.     top: 0px !important;
  7.     left: 0px !important;
  8.     position: absolute !important;
  9.     z-index: 1 !important;
  10. }

I didnt get the proper description about this, but it helped me...

Thanks
Jun 2 '09 #10
Frinavale
9,735 Expert Mod 8TB
I think I misunderstood your what your problem was (I'm assuming it was a CSS related problem as apposed to a AJAX/CSS problem), sorry.
I'm glad that you solved it!

Thanks for sharing your solution :)
Jun 2 '09 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by DanWeaver | last post: by
2 posts views Thread by =?Utf-8?B?TUNN?= | last post: by
1 post views Thread by Peter | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.