Showing posts with label updated. Show all posts
Showing posts with label updated. Show all posts

Wednesday, March 28, 2012

pageLoaded event

I have created an ASP.NET custom server control that is updated using AJAX via an UpdatePanel using the Tick event of a Timer control as the asyc trigger. I need to execute javascript each time a partial postback returns so I am using the pageLoaded event. This works perfectly in IE7 but doesn't fire in Firefox 2.0.0.3 or Opera 9. On other browsers it never fires the pageLoaded event, but it does the AJAX updating and other javascript works. I am registering the client code during my control's render method.. I have also tried using the endRequest event. Please help. Why won't it work on other browsers.

Below is the rendered HTML:<!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><title>Untitled Page</title><meta content="text/html;charset=iso-8859-1" http-equiv="content-type" /><meta content="NO-CACHE" http-equiv="PRAGMA" /><meta content="NO-CACHE" http-equiv="CACHE-CONTROL" /><meta content="0" http-equiv="EXPIRES" /><style type='text/css'> a.info:active{z-index:0; position:relative; background-color:#FFF647} a.info label{display: none} a.info:active label{ display:inline; position:absolute; white-space:normal; text-wrap:normal; word-wrap:break-word; left:label.parent.width; top:label.parent.height; width:250px; border:1px solid #91907C; background-color:#EAE7C6; z-index:-1; } </style> </head><body> <form name="form1" method="post" action="Default.aspx" 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="/wEPDwULLTEwMzQxMTA4OTkPZBYCAgMPZBYCAgEPZBYCAgIPZBYCZg9kFgJmDxYGHgtjZWxscGFkZGluZwUBMB4LY2VsbHNwYWNpbmcFATAeBXN0eWxlBSlwYWRkaW5nOjVweDt6LWluZGV4OjIwO3Bvc2l0aW9uOmFic29sdXRlO2RkMUSTfpjSwghJETl9/Jgkha9oZaA=" /></div><script type="text/javascript"><!--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="/WebResource.axd?d=9DvoInn8tlftzCiBPvQagg2&t=632974035101093750" type="text/javascript"></script><script src="/ScriptResource.axd?d=WAnysv6JNp-Tgl_8AndGJnGXdfOUUPdccvGwkhkSJu2uP8RLi_go1jCrdTe0jCpJF0u8GYhfCflHcjQdOJTaXMeB6qn3C9aitPrPuScmgSM1&t=633063657262888841" type="text/javascript"></script><script src="/ScriptResource.axd?d=WAnysv6JNp-Tgl_8AndGJnGXdfOUUPdccvGwkhkSJu2uP8RLi_go1jCrdTe0jCpJF0u8GYhfCflHcjQdOJTaXOmCYkHGf_k8diSD9UcMEoc1&t=633063657262888841" type="text/javascript"></script><script src="/ScriptResource.axd?d=WAnysv6JNp-Tgl_8AndGJnGXdfOUUPdccvGwkhkSJu2uP8RLi_go1jCrdTe0jCpJF0u8GYhfCflHcjQdOJTaXLsHgXZk2LxHv8oSN-rIGKs1&t=633063657262888841" type="text/javascript"></script> <span id="events" style="font-size:Small;"><span id="events_timer1" style="visibility:hidden;display:none;"></span><input name="events$ctl00" type="hidden" id="events_ctl00" /><div id="events_UpdatePanel1"><table cellpadding="0" cellspacing="0" style="padding:5px;z-index:20;position:absolute;"><tr><td rowspan="2" style="border-bottom-style:None;border-bottom-color:#91907C;border-bottom-width:thin;padding-bottom:5px;padding-top:5px;"><img src="../images/greenshd.gif" alt="The IT Road Show.........................." /></td><td style="padding-left:5px;">Tuesday 24 Apr</td><td style="padding-left:15px;">3:30 pm</td></tr><tr><td colspan="2" style="border-bottom-style:None;border-bottom-color:#91907C;border-bottom-width:thin;padding-left:5px;padding-bottom:5px;"><a href="http://www.nova100.com.au" id="events_3160" EventsEventDatesId="3160" LabelId="events_label_0_3160" onfocus="document.getElementById('events_ctl00').value = this.LabelId" onblur="document.getElementById('events_ctl00').value = ''" class="info">The IT Road Show.......................... </a></td></tr><tr><td rowspan="2" style="border-bottom-style:None;border-bottom-color:#91907C;border-bottom-width:thin;padding-bottom:5px;padding-top:5px;"><img src="../images/AKMAL_OVER.gif" alt="The Akmal Show" /></td><td style="padding-left:5px;">Tuesday 24 Apr</td><td style="padding-left:15px;">4:00 pm</td></tr><tr><td colspan="2" style="border-bottom-style:None;border-bottom-color:#91907C;border-bottom-width:thin;padding-left:5px;padding-bottom:5px;"><a href="#" id="events_2749" EventsEventDatesId="2749" LabelId="events_label_1_2749" onfocus="document.getElementById('events_ctl00').value = this.LabelId" onblur="document.getElementById('events_ctl00').value = ''" class="info">The Akmal Show <label id="events_label_1_2749" style="text-decoration:none;">The Akmal Show with Kate Richie Weekdays 4pm-6pm.Akmal was born in Egypt - then moved to Australia. Akmal's mum doesn't think he's that funny - now the rest of Australia think he's ha haa hilarious.</label></a></td></tr><tr><td rowspan="2" style="border-bottom-style:None;border-bottom-color:#91907C;border-bottom-width:thin;padding-bottom:5px;padding-top:5px;"><img src="../images/greenshd.gif" alt="The IT Road Show.........................." /></td><td style="padding-left:5px;">Wednesday 25 Apr</td><td style="padding-left:15px;">3:30 pm</td></tr><tr><td colspan="2" style="border-bottom-style:None;border-bottom-color:#91907C;border-bottom-width:thin;padding-left:5px;padding-bottom:5px;"><a href="http://www.nova100.com.au" id="events_3161" EventsEventDatesId="3161" LabelId="events_label_2_3161" onfocus="document.getElementById('events_ctl00').value = this.LabelId" onblur="document.getElementById('events_ctl00').value = ''" class="info">The IT Road Show.......................... </a></td></tr><tr><td rowspan="2" style="border-bottom-style:None;border-bottom-color:#91907C;border-bottom-width:thin;padding-bottom:5px;padding-top:5px;"><img src="../images/AKMAL_OVER.gif" alt="The Akmal Show" /></td><td style="padding-left:5px;">Wednesday 25 Apr</td><td style="padding-left:15px;">4:00 pm</td></tr><tr><td colspan="2" style="border-bottom-style:None;border-bottom-color:#91907C;border-bottom-width:thin;padding-left:5px;padding-bottom:5px;"><a href="#" id="events_2750" EventsEventDatesId="2750" LabelId="events_label_3_2750" onfocus="document.getElementById('events_ctl00').value = this.LabelId" onblur="document.getElementById('events_ctl00').value = ''" class="info">The Akmal Show <label id="events_label_3_2750" style="text-decoration:none;">The Akmal Show with Kate Richie Weekdays 4pm-6pm.Akmal was born in Egypt - then moved to Australia. Akmal's mum doesn't think he's that funny - now the rest of Australia think he's ha haa hilarious.</label></a></td></tr><tr><td rowspan="2" style="padding-bottom:5px;padding-top:5px;"><img src="../images/redshd.gif" alt="test add 25" /></td><td style="padding-left:5px;">Thursday 26 Apr</td><td style="padding-left:15px;">2:29 pm</td></tr><tr><td colspan="2" style="padding-left:5px;padding-bottom:5px;"><a href="k" id="events_136" EventsEventDatesId="136" LabelId="events_label_4_136" onfocus="document.getElementById('events_ctl00').value = this.LabelId" onblur="document.getElementById('events_ctl00').value = ''" class="info">test add 25 </a></td></tr></table></div></span> <script type="text/javascript">//<![CDATA[Sys.WebForms.PageRequestManager._initialize('ctl06', document.getElementById('form1'));Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tevents$UpdatePanel1'], ['events','events$timer1'], [], 90);//]]></script><script type="text/javascript"><!--Sys.Application.add_init(function() { $create(Sys.UI._Timer, {"enabled":true,"interval":1000,"uniqueID":"events$timer1"}, null, null, $get("events_timer1"));}); Type.registerNamespace('EventsManager'); var prm = Sys.WebForms.PageRequestManager.getInstance(); if (prm != null) { prm.add_endRequest(pageLoadedHandler); } function window.onload() { } function pageLoadedHandler(sender, args) { var hidden = document.getElementById('events_ctl00'); if (hidden != null) { var labelId = hidden.value; if (labelId.length > 0) { var lbl = document.getElementById(labelId); if (lbl != null) { lbl.parentElement.setActive(); } } } } Sys.Application.initialize();// --></script></form> </body></html>

Below is my code for the Render method when I used the endRequest event:

protected override void Render(HtmlTextWriter writer) {base.Render(writer);//Add script and register it. Page.ClientScript.RegisterStartupScript(typeof(EventsManager),"script", @dotnet.itags.org." Type.registerNamespace('EventsManager'); var prm = Sys.WebForms.PageRequestManager.getInstance(); if (prm != null) { prm.add_endRequest(pageLoadedHandler); } function window.onload() { } function pageLoadedHandler(sender, args) { var hidden = document.getElementById('" + ClickedLinkLabelId.ClientID + @dotnet.itags.org."'); if (hidden != null) { var labelId = hidden.value; if (labelId.length > 0) { var lbl = document.getElementById(labelId); if (lbl != null) { lbl.parentElement.setActive(); } } } } ",true); }

Hi,

Can you show me a stripped version of your control and a sample page using it?

It will be easier for us to trouble shooting. Thanks.


Hi Raymond,

I really appreciate your offer of help, but I just figured out what the problem was.

My javascript code below was causing a problem for all the code in my script block on all browsers apart from IE.

Problem code:

function window.onload()
{

}

When I changed it to the code below, it worked in all browsers.

Correct code:

window.onload = function()
{
document.getElementById('" + TimeZoneOffset.ClientID + @."').value = -(new Date().getTimezoneOffset());
}

Thanks again.

Saturday, March 24, 2012

Panel within Mutliview scrolls when contents of updatepanel updated??

Here is my page:
<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXEnabledWebApplication1._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>Untitled Page</title> <script type="text/javascript">var curCount = 0;var timer;var value = 0;function timedCount(){ try { var elem = document.getElementById('Panel1'); if (value == elem.scrollHeight) { } else if(value < elem.scrollHeight) { value = elem.scrollHeight; elem.scrollTop = value; } timer=setTimeout("timedCount()",100) } catch(err) { timer=setTimeout("timedCount()",100) } }function stopTimer(){ clearTimeout(timer);}</script> </head><body onload="timedCount()" onunload="stopTimer()" bottommargin="0" leftmargin="0" rightmargin="0" topmargin="0"> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> </div> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> <asp:Button ID="change" runat="server" OnClick="change_Click" Text="change" /> <asp:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0"> <asp:View ID="View1" runat="server"> <asp:Panel ID="Panel1" runat="server" Height="166px" ScrollBars="Auto" Width="173px"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Literal ID="Literal1" runat="server"></asp:Literal>  </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> </Triggers> </asp:UpdatePanel> </asp:Panel> </asp:View> <asp:View ID="View2" runat="server"> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></asp:View> </asp:MultiView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="change" EventName="Click" /> </Triggers> </asp:UpdatePanel> <asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick1"> </asp:Timer> </form></body></html>
 
 And here is the code behind:
 
protected void Button1_Click(object sender, EventArgs e) { Literal1.Text +="test<br>"; }protected void Timer1_Tick1(object sender, EventArgs e) { Random r =new Random();int j = r.Next(5000);if (j % 7 == 0) Literal1.Text +="test2<br>"; }protected void change_Click(object sender, EventArgs e) {if (MultiView1.ActiveViewIndex == 0) MultiView1.ActiveViewIndex = 1;else MultiView1.ActiveViewIndex = 0; } }
 
 
 the issue is that if I take Panel1 out of the MultiView it works fine: When dynamically updating Literal1, Panel1 correctly scrolls to the bottom and only when there has been a change in scrollHeight.
If Panel1 is moved to be inside View1, then Panel1 refreshes every second with the timer1.Tick event. What causes this behavior within the multiview, but not when Panel1 is outside of the Multiview?

after further testing, i have found that if I take the Multiview1 completely out of the UpdatePanel2 it works correctly too.


Each time tick probably causes an async postback. Since all your update panels are not set to have UpdateMode="Conditional", then they update on each async event


Thanks! That worked. One other question, i looked over the docs, but i havent been able to find any information on the cost/efficiency of this property. Is it more efficient to set them to "conditional" ?


I think more appropriate is to ask : What do I need :-) I think it is a.) a matter of convenience, and b.) sort of fool-proofing the facility - many ppl get confused when the thing updates all the time, and then others get confused when it doesnt. With "Always", you get refresh on each and all async postbacks on the page, which may be a waste of client-resources if the content does not need updating (the resources being spent on retrieving the control from viewstate, I guess). With Conditional, you are more in control as to when you get a refresh. Do remember than apart from the triggers , you can cause an UpdatePanel to update from your server-side code by calling the NameOfUpdatePanel.Update method.

Also, it gets a bit tricky conceptually when you have nested UpdatePanels - I m still exploring that confusion myself:)

Btw : if satisfied with the answer plz mark it as answered.