Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

ScriptManager.RegisterClientScriptBlock duplicates JavaScript on Async PostBack (ASP.NET AJAX)

Posted on 2008-06-13
8
8,126 Views
Last Modified: 2013-11-26
I am creating a UserControl of the Yahoo Calendar for use in Microsoft ASP.NET AJAX and am close to completion at this point. However two bugs remain. The one I need some assistance on is regarding the ScriptManager.RegisterClientScriptBlock.

When the user control is used on a site and is not initialized immediately on the page, but is started instead on the page after the postback (or if the control is turned on/off, it may be a later postback and not the immediate one), so you would use the ScriptManager.RegisterClientScriptBlock to add the JavaScript to the script manager. And at this time, this works quite well. However, what doesn't work, is that I have no way of preventing this from stopping once it is turned on and the script multiplies, so many instances of the object are the displayed on the page.

This can be seen at http://www.gmitravelinc.com/yahoo/

All visible controls immediately seen are intialized and are working properly. Click "Test" and "Date 5" will be added to the page asynchronosly within the group. Click the button, now labeled "Testing!" and both "Date 6" and "Date 5", part of a similar control type, will begin to reproduce on the page.

How do I change my code to prevent this?
String stringScript = String.Empty;
stringScript = @"
<script type=""text/javascript"" id=""" + this.ClientID + @"Script"">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(initializeRequest);
prm.add_pageLoaded(pageLoaded);
var _postBackElement;
 
function initializeRequest(sender, e)
{
   if (prm.get_isInAsyncPostBack())
   {
      e.set_cancel(true);
   }
   _postBackElement = e.get_postBackElement();
}
 
function pageLoaded(sender, e)
{
   YAHOO.util.Event.onDOMReady(function ()
   {
";
					if (boolReadOnly)
					{
						stringScript += @"
      document.getElementById(""" + stringTargetControlID + @""").readOnly = true;
";
					}
					stringScript += @"
      function onButtonClick()
      {
         oCalendarMenu.setBody(""&#32;"");
         oCalendarMenu.body.id = """ + this.ClientID + @"calendarcontainer"";
         oCalendarMenu.render(this.get(""container""));
         oCalendarMenu.align();
         var oCalendar = new YAHOO.widget.Calendar(""" + this.ClientID + @"buttoncalendar"", oCalendarMenu.body.id);
";
					if (boolNavigation)
					{
						stringScript += @"
         oCalendar.cfg.setProperty(""navigator"", true);
";
					}
					if (!String.IsNullOrEmpty(stringMinDate))
					{
						stringScript += @"
         oCalendar.cfg.setProperty(""mindate"", """ + stringMinDate + @""");
";
					}
					if (!String.IsNullOrEmpty(stringMaxDate))
					{
						stringScript += @"
         oCalendar.cfg.setProperty(""maxdate"", """ + stringMaxDate + @""");
";
					}
					if (!String.IsNullOrEmpty(stringPageDate))
					{
						stringScript += @"
         oCalendar.cfg.setProperty(""pagedate"", """ + stringPageDate + @""");
";
					}
					if (!String.IsNullOrEmpty(stringHightlight))
					{
						stringScript += @"
         oCalendar.addRenderer(""" + stringHightlight + @""", oCalendar.renderCellStyleHighlight1);
";
					}
					if (!String.IsNullOrEmpty(stringSoldOut))
					{
						stringScript += @"
         oCalendar.addRenderer(""" + stringSoldOut + @""", oCalendar.renderBodyCellRestricted);
";
					}
					stringScript += @"
         var stDate = document.getElementById(""" + stringTargetControlID + @""");
         if (stDate.value != """")
         {
            oCalendar.select(stDate.value);
            var selectedDates = oCalendar.getSelectedDates();
            if (selectedDates.length > 0)
            {
               var firstDate = selectedDates[0];
               oCalendar.cfg.setProperty(""pagedate"", (firstDate.getMonth()+1) + ""/"" + firstDate.getFullYear());
            }
         }
         oCalendar.render();
         oCalendar.changePageEvent.subscribe(function ()
         {
            window.setTimeout(function ()
            {
               oCalendarMenu.show();
            }, 0);
         });
         oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs)
         {
            var aDate;
            if (p_aArgs)
            {
               aDate = p_aArgs[0][0];
               YAHOO.util.Dom.get(""" + stringTargetControlID + @""").value = aDate[1] + ""/"" + aDate[2] + ""/"" + aDate[0];
            }
            oCalendarMenu.hide();
         });
         this.unsubscribe(""click"", onButtonClick);
      }
      var oCalendarMenu = new YAHOO.widget.Overlay(""" + this.ClientID + @"calendarmenu"");
      var oButton = new YAHOO.widget.Button({type: ""menu"", 
                                             id: """ + this.ClientID + @"calendarpicker"", 
                                             label: ""Choose A Date"", 
                                             menu: oCalendarMenu, 
                                             container: """ + this.ClientID + @"datefields"" });
      oButton.on(""click"", onButtonClick);
   });
}
</script>
";
					writer.Write(@"
        <span id=""" + this.ClientID + @"datefields"">
" + stringScript + @"
        </span>
");
 
if (IsPostBack)
{
	ScriptManager.RegisterClientScriptBlock(Page, typeof(YahooCalendar), this.ClientID + "ScriptA", stringScript, false);
}

Open in new window

0
Comment
Question by:gmitravel
  • 3
  • 3
8 Comments
 
LVL 13

Expert Comment

by:joechina
ID: 21822155
Have you tried to remove the following:
writer.Write(@"
        <span id=""" + this.ClientID + @"datefields"">
" + stringScript + @"
        </span>


0
 

Author Comment

by:gmitravel
ID: 21822295
It won't initialize without it.

If you comment that out and write either:

if (IsPostBack)
{
      ScriptManager.RegisterClientScriptBlock(Page, typeof(YahooCalendar), this.ClientID + "ScriptA", stringScript, false);
}

or just:

ScriptManager.RegisterClientScriptBlock(Page, typeof(YahooCalendar), this.ClientID + "ScriptA", stringScript, false);

It will not add the script to the file.
0
 
LVL 13

Expert Comment

by:joechina
ID: 21824631
Which event do you put the code?
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 13

Expert Comment

by:joechina
ID: 21824656
How about this:
if (IsPostBack)
{
      ScriptManager.RegisterClientScriptBlock(Page, typeof(YahooCalendar), this.ClientID + "ScriptA", stringScript, false);
}
else
{
writer.Write(@"
        <span id=""" + this.ClientID + @"datefields"">
" + stringScript + @"
        </span>
");

}
0
 

Author Comment

by:gmitravel
ID: 21824751
In the "if...else" statement the control initializes when the page opens. When you postback the control is gone, again because the writer has not written the <span> statement.

Here is how the code is set in the aspx file:

<yui:YahooCalendar ID="Calendar6" Type="TextBox" TargetControlID="Calendar6Date" Navigation="false" MinDate="8/8/2008" MaxDate="8/19/2008" PageDate="8/2008" Highlight="8/8/2008-8/9/2008,8/11/2008" SoldOut="8/10/2008,8/12/2008,8/13/2008" runat="server" />

It's a control (yahoocalendar.cs) that is compiled into a dll file, etc. That's where the writer writes the code, inline in that place -- it replaces that with the YUI inline script to function the calendar control. The code I initially provided is from the protected override void Render(HtmlTextWriter writer) function in the control.
0
 

Accepted Solution

by:
gmitravel earned 0 total points
ID: 21948579
Add this line of JavaScript code to the bottom of the script and you've cleaned out the problem....

prm.dispose();
Note.... it has to be at the bottom......

      var oButton = new YAHOO.widget.Button({type: ""menu"", 
                                             id: """ + this.ClientID + @"calendarpicker"", 
                                             label: ""Choose A Date"", 
                                             menu: oCalendarMenu, 
                                             container: """ + this.ClientID + @"datefields"" });
      oButton.on(""click"", onButtonClick);
   });
prm.dispose();
}
</script>

Open in new window

0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
Two types of users will appreciate AOMEI Backupper Pro: 1 - Those with PCIe drives (and haven't found cloning software that works on them). 2 - Those who want a fast clone of their boot drive (no re-boots needed) and it can clone your drive wh…
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question