• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 8241
  • Last Modified:

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

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
gmitravel
Asked:
gmitravel
  • 3
  • 3
1 Solution
 
joechinaCommented:
Have you tried to remove the following:
writer.Write(@"
        <span id=""" + this.ClientID + @"datefields"">
" + stringScript + @"
        </span>


0
 
gmitravelAuthor Commented:
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
 
joechinaCommented:
Which event do you put the code?
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
joechinaCommented:
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
 
gmitravelAuthor Commented:
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
 
gmitravelAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now