Problem with Update Panel - dynamic data fetch

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

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdatePanelJavascript.aspx.cs" Inherits="UpdatePanelJavascript" %>
 
<!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 id="Head1" runat="server">

    <title>Untitled Page</title>

     <style type="text/css">

   .watermarked

{

    height: 20px;

    width: 150px;

    padding: 2px 0 0 2px;

    border: 1px solid #BEBEBE;

    background-color: #ebebeb;

    color: Gray;

}

</style>
 
</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ScriptManager ID="ScriptManager1" runat="server" />
 
        <script language="javascript">

    var prm = Sys.WebForms.PageRequestManager.getInstance();
 
    setTimeout("Update()", 3000);
 
    function Update()

    {

    prm._doPostBack('UpdatePanel1', '');

    setTimeout("Update()", 3000);

    }
 
        </script>
 
    </div>

    <br />

    <table width="300px" height="300px">

        <tr>

            <td>

            </td>

            <td>

                <asp:TextBox ID="TextBox1" runat="server" Width="280px"></asp:TextBox>

                <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server"

                    TargetControlID="TextBox1" WatermarkText="type any title here  " WatermarkCssClass="watermarked">

                </ajaxToolkit:TextBoxWatermarkExtender>

            </td>

        </tr>

    </table>

    <table width="300px" height="300px">

        <tr>

            <td>

                <asp:UpdatePanel ID="UpdatePanel1" runat="server" OnLoad="UpdatePanel1_Load">

                    <ContentTemplate>

                        <asp:Label ID="Label1" runat="server" Text="Label" Width="315px"></asp:Label>

                    </ContentTemplate>

                </asp:UpdatePanel>

            </td>

        </tr>

    </table>

    </form>

</body>

</html>

.cs code

Expand|Select|Wrap|Line Numbers

 using System;

using System.Data;

using System.Configuration;

using System.Collections;

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;
 
public partial class UpdatePanelJavascript : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {
 
    }

    protected void UpdatePanel1_Load(object sender, EventArgs e)

    {

        Label1.Text = "It's Now " + DateTime.Now.ToString();

    }

}

Thanks
Yogesh Sapkale

May 25 '09 #1

Subscribe Post Reply

7360

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

Hi,
Thank you for reply,

Here is Html rendered code

Expand|Select|Wrap|Line Numbers

 <!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 id="Head1"><title>

    Untitled Page

</title>

     <style type="text/css">

   .watermarked

{

    height: 20px;

    width: 150px;

    padding: 2px 0 0 2px;

    border: 1px solid #BEBEBE;

    background-color: #ebebeb;

    color: Gray;

}

</style>
 
</head>

<body>

    <form name="form1" method="post" action="UpdatePanelJavascript.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="form1">

<div>

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUIMjQxNzI0OTYPZBYCAgMPZBYCAgcPZBYCZg9kFgICAQ8PFgIeBFRleHQFHUl0J3MgTm93IDUvMjUvMjAwOSA3OjAxOjI5IFBNZGRk0FyNq9VUJiSMDXSZtsjFF050Yvc=" />

</div>
 
<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['form1'];

if (!theForm) {

    theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

        theForm.__EVENTTARGET.value = eventTarget;

        theForm.__EVENTARGUMENT.value = eventArgument;

        theForm.submit();

    }

}

//]]>

</script>
 
<script src="/HDI-AJAX-P-PersistentComm-UpdatePanels-CS/WebResource.axd?d=u-PcELcngniLsN0Ztw1WXQ2&amp;t=633777572371735481" type="text/javascript"></script>
 
<script src="/HDI-AJAX-P-PersistentComm-UpdatePanels-CS/ScriptResource.axd?d=8WjDUP0Zqh0vGOH9XdSVaaiE05-swWUwPfsOXbBxIlZIXlq7PqeEylNSj9jMtpPd0Cx1MG6NEoNZ3T4Lr__4ycQu11CB9EVCkqABQ9HHyrI1&amp;t=ffffffffc67cfc94" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');

//]]>

</script>
 
<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>

<script src="/HDI-AJAX-P-PersistentComm-UpdatePanels-CS/ScriptResource.axd?d=Y1wI7o-PqlEKfrKdSSrX8Zre7CqwykPtrI8XwaNiVAULEcUApjpnq7eZ1LFfbGdQxmEqRHMkJW3RglVUAySYZg2&amp;t=3069cd27" type="text/javascript"></script>

<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>

<script src="/HDI-AJAX-P-PersistentComm-UpdatePanels-CS/ScriptResource.axd?d=Y1wI7o-PqlEKfrKdSSrX8Zre7CqwykPtrI8XwaNiVAUXXgRmWFJNmfJ8N2nWlItBdtqZLY1Gw9K_-zTWJRUiC53jMR0GySEQ9cnVMHZFHh41&amp;t=3069cd27" type="text/javascript"></script>

<script type="text/javascript">

//<![CDATA[

function WebForm_OnSubmit() {

null;

return true;

}

//]]>

</script>
 
<div>
 
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLqnv7UCwLs0bLrBgKL9pj0Ajxul2FD1MCtAXtDtCirrIV11Y5B" />

</div>

    <div>

        <script type="text/javascript">

//<![CDATA[

Sys.WebForms.PageRequestManager._initialize('ScriptManager1', document.getElementById('form1'));

Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tUpdatePanel1'], [], [], 90);

//]]>

</script>
 
        <script language="javascript">

    var prm = Sys.WebForms.PageRequestManager.getInstance();
 
    setTimeout("Update()", 3000);
 
    function Update()

    {

    prm._doPostBack('UpdatePanel1', '');

    setTimeout("Update()", 3000);

    }
 
        </script>
 
    </div>

    <br />

    <table width="300px" height="300px">

        <tr>

            <td>

            </td>

            <td>

                <input name="TextBox1" type="text" id="TextBox1" style="width:280px;" />

                <input type="hidden" name="TextBoxWatermarkExtender1_ClientState" id="TextBoxWatermarkExtender1_ClientState" />

            </td>

        </tr>

    </table>

    <table width="300px" height="300px">

        <tr>

            <td>

                <div id="UpdatePanel1">
 
                        <span id="Label1" style="display:inline-block;width:315px;">It's Now 5/25/2009 7:01:29 PM</span>
 
</div>

            </td>

        </tr>

    </table>
 
<script type="text/javascript">

//<![CDATA[

Sys.Application.initialize();

Sys.Application.add_init(function() {

    $create(AjaxControlToolkit.TextBoxWatermarkBehavior, {"ClientStateFieldID":"TextBoxWatermarkExtender1_ClientState","WatermarkCssClass":"watermarked","WatermarkText":"type any title here  ","id":"TextBoxWatermarkExtender1"}, null, null, $get("TextBox1"));

});

//]]>

</script>

</form>

</body>

</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

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

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

      <style type="text/css">

        .modalBackground

        {

            background-color: Gray;

            filter: alpha(opacity=70);

            opacity: 0.7;

        }

        </style>

        <script type="text/javascript" language="javascript">

            function hidePopup() 

            {

                var modal = $find('modalpop');

                if (modal)

                {

                    modal.hide();

                }

            }
 
            function showpopup() 

            {

                var modal = $find('modalpop');

                if (modal) {

                    modal.show();

                }

            }

        </script>

</head>

<body>

    <form id="form1" runat="server">

    <ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />

    <div>

        <asp:UpdatePanel ID="updPanel" runat="server">

            <ContentTemplate>

                <table border="1" width="800px" height="800px">

                    <tr>

                        <td>

                            <asp:Label ID="lblText" runat="server" Text=""></asp:Label>

                        </td>

                    </tr>

                </table>

                <table border="1" width="800px" height="800px">

                    <tr>

                        <td>

                            <asp:Button ID="btnShowPop" runat="server" Text="Show Popup" OnClientClick="return showpopup();" />

                        </td>

                    </tr>

                </table>

            </ContentTemplate>

            <Triggers>

                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />

            </Triggers>

        </asp:UpdatePanel>

        <asp:Timer ID="Timer1" runat="server" Interval="3000">

        </asp:Timer>

        <asp:Panel ID="pnlPopup" runat="server" Style="display: none">

            <table border="1" height="300px" width="300px">

                <tr>

                    <td align="center" valign="middle">

                        Helllooooooooo

                    </td>

                </tr>

                <tr>

                    <td>

                        <asp:Button ID="btnOk" Text="Ok" runat="server" />

                    </td>

                </tr>

            </table>

        </asp:Panel>

        <ajaxToolkit:ModalPopupExtender ID="modalpop" runat="server" BackgroundCssClass="modalBackground"

            PopupControlID="pnlPopup" TargetControlID="pnlPopup" OkControlID="btnOk" OnOkScript="hidePopup()">

        </ajaxToolkit:ModalPopupExtender>

    </div>

    </form>

</body>

</html>

cs code

Expand|Select|Wrap|Line Numbers

 
using System;

using System.Data;

using System.Configuration;

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;
 
public partial class _Default : System.Web.UI.Page 

{

    protected void Page_Load(object sender, EventArgs e)

    {

        lblText.Text = "Time is : " + DateTime.Now.ToString();

    }

}

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

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

Hey Frinavale,

I found the solution finally,

we have to change ModalBackground for madal pop up as

Expand|Select|Wrap|Line Numbers

 
.modalBackground

{

    background-color: Gray;

    filter: alpha(opacity=70) !important;

    opacity: 0.7;

    top: 0px !important;

    left: 0px !important;

    position: absolute !important;

    z-index: 1 !important;

}

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

by: Marcus | last post by:

Here is a toy problem describing what I want to do: I have a web page with a single IMG element (say for a 128 x 128 "screen") which is initially blank (image=black pixels). I have AJAX code...

Javascript

Layout within Ajax Update Panel in Visual Studio

by: DanWeaver | last post by:

I have a page where layout of buttons and listboxes etc is important - I would like to make use of Ajax Update panel to asynchronously update various part of the page- in Vis studio whenever I use...

ASP.NET

Usercontrol with ajax update panel causes null reference exception.

by: Wayne Brantley | last post by:

If you expose a public property of a usercontrol that accesses an object on the user control it will give a null reference exception when you wrap that in an update panel. Others are having the...

ASP.NET

AJAX call Javascript function from Update Panel Postback

by: gabe | last post by:

How do you call a client side javascript callback method after an update panel has posted back to the server? I have two update panels (A + B) with a gridview in each panel. GridView B has a...

ASP.NET

[C#-WEB] Trouble finding controls in Update panel

by: karthik25 | last post by:

Hi All, I have a problem in finding control in a dynamically created updated panel. I have given the code below. Following is just a starting effort in a completely dynamic user control. I am...

.NET Framework

Update Panel not updating DOM

by: =?Utf-8?B?TUNN?= | last post by:

I have an asp.net page that contains an update panel. Within the update panel, controls get added dynamically. During partial page post backs the controls within the panel will change. I have a...

.NET Framework

HoverMenuExtender Popup dynamic data

by: Peter | last post by:

ASP.NET 3.5 I am using HowerMenueExtender to do Balloon popups inside a DataList, and it works fine for static data, but I don't know how to display dynamic data, I don't know how/where to...

ASP.NET

GridView inside update panel, fun ensues.

by: BiffMaGriff | last post by:

Hello, I have a GridView that I put inside an update panel. I have a control that attaches to the datasource of the gridview that filters the data, databinds the gridview and then updates the...

ASP.NET

Dynamic Javascript not working in Update Panel

by: majidkorai | last post by:

Hi All, I am working on an application where i have got, a content page within a Master Page. I have placed a gridview on the page. This gridview has three fields, one of them is TemplateFied, a...

ASP.NET

Cloud Servers without Credit Card and Email Registration: A Simpler Way to Get on the Cloud

by: CloudSolutions | last post by:

Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...

General

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem with Update Panel - dynamic data fetch

Similar topics