AJAX UpdatePanel stops custom JavaScript working

  • Thread starter Thread starter Andrew Jocelyn
  • Start date Start date
A

Andrew Jocelyn

Hi

I have a custom server control which basically adds a client side character
counter to display with an Html TextArea. When I use the control inside an
UpdatePanel the JavaScript counter disappears.

Please see code below.

Any ideas?
Thanks
Andrew


protected override void OnPreRender(EventArgs e)
{
if (IsRequired)
_reqValidator.Visible = true;

// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;

cs.RegisterClientScriptInclude("DisplayLengthFunctions",
cs.GetWebResourceUrl(this.GetType(),
"MyControls.WebControls.DisplayLengthFunctions.js"));

cs.RegisterStartupScript(this.GetType(), this.ID + "DisplayLength",
"DisplayCounter('" + _textBox.ClientID + "','" + this.ID + "_Counter'," +
this.MaxLength.ToString() + ");", true);

base.OnPreRender(e);
}

///////////////////////////////
// DisplayLengthFunctions.js
////////////////////////////////
function DisplayCounter(textId, counterId, maxLength) {
var W3CDOM = document.createElement && document.getElementsByTagName &&
document.getElementById;
if (!W3CDOM) return;

var x = document.getElementById(textId);
x.setAttribute('maxlength', maxLength);

var counter = document.getElementById(counterId);
counter.innerHTML = '<span>0</span>/' + maxLength;
counter.relatedElement = x;

x.relatedElement = counter.getElementsByTagName('span')[0];

x.onkeyup = x.onchange = CheckMaxLength;
x.onkeyup();
}

// event handler for textarea onkeyup and onchange
function CheckMaxLength() {
var maxLength = this.getAttribute('maxlength');
var currentLength = this.value.length;
if (currentLength > maxLength)
this.relatedElement.style.color = 'red';
else
this.relatedElement.style.color = '';
this.relatedElement.firstChild.nodeValue = currentLength;
}
 
In your PreRender event code, try ScriptManager.RegisterClientScript
instead of ClientScriptManager.whatever

Cheers,
Andy
 
Hi Andrew,

As Andy suggested, you may try using the AJAX ScriptManager class's
RegisterSclient.... methods instead of the ASP.NET
Page.ClientScriptManager... Here are some articles about dealing with
scripts of controls used in AJAX updatepanel:

#Inline Script inside an ASP.NET AJAX UpdatePanel
http://weblogs.asp.net/infinitiesloop/archive/2007/09/17/inline-script-insid
e-an-asp-net-ajax-updatepanel.aspx

#HOWTO: Write controls compatible with UpdatePanel without linking to the
ASP.NET AJAX DLL
http://weblogs.asp.net/leftslipper/archive/2006/11/13/HOWTO_3A00_-Write-cont
rols-compatible-with-UpdatePanel-without-linking-to-the-ASP.NET-AJAX-DLL.asp
x

Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we

can improve the support we provide to you. Please feel free to let my
manager know what you think of

the level of service provided. You can send feedback directly to my manager
at: (e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to

http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response

from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take

approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution.

The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump

analysis issues. Issues of this nature are best handled working with a
dedicated Microsoft Support

Engineer by contacting Microsoft Customer Support Services (CSS) at

http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------
From: "Andrew Jocelyn" <[email protected]>
Subject: AJAX UpdatePanel stops custom JavaScript working
Date: Tue, 11 Mar 2008 18:38:54 -0000
Lines: 66
Click to expand...
Hi

I have a custom server control which basically adds a client side character
counter to display with an Html TextArea. When I use the control inside an
UpdatePanel the JavaScript counter disappears.

Please see code below.

Any ideas?
Thanks
Andrew


protected override void OnPreRender(EventArgs e)
{
if (IsRequired)
_reqValidator.Visible = true;

// Get a ClientScriptManager reference from the Page class.
ClientScriptManager cs = Page.ClientScript;

cs.RegisterClientScriptInclude("DisplayLengthFunctions",
cs.GetWebResourceUrl(this.GetType(),
"MyControls.WebControls.DisplayLengthFunctions.js"));

cs.RegisterStartupScript(this.GetType(), this.ID + "DisplayLength",
"DisplayCounter('" + _textBox.ClientID + "','" + this.ID + "_Counter'," +
this.MaxLength.ToString() + ");", true);

base.OnPreRender(e);
}

///////////////////////////////
// DisplayLengthFunctions.js
////////////////////////////////
function DisplayCounter(textId, counterId, maxLength) {
var W3CDOM = document.createElement && document.getElementsByTagName &&
document.getElementById;
if (!W3CDOM) return;

var x = document.getElementById(textId);
x.setAttribute('maxlength', maxLength);

var counter = document.getElementById(counterId);
counter.innerHTML = '<span>0</span>/' + maxLength;
counter.relatedElement = x;

x.relatedElement = counter.getElementsByTagName('span')[0];

x.onkeyup = x.onchange = CheckMaxLength;
x.onkeyup();
}

// event handler for textarea onkeyup and onchange
function CheckMaxLength() {
var maxLength = this.getAttribute('maxlength');
var currentLength = this.value.length;
if (currentLength > maxLength)
this.relatedElement.style.color = 'red';
else
this.relatedElement.style.color = '';
this.relatedElement.firstChild.nodeValue = currentLength;
}
Click to expand...
 
Back
Top