AJAX UpdatePanel stops custom JavaScript working

Discussion in 'ASP .Net' started by Andrew Jocelyn, Mar 11, 2008.

  1. 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;
    }
     
    Andrew Jocelyn, Mar 11, 2008
    #1
    1. Advertising

  2. Andrew Jocelyn

    Guest

    In your PreRender event code, try ScriptManager.RegisterClientScript
    instead of ClientScriptManager.whatever

    Cheers,
    Andy
     
    , Mar 11, 2008
    #2
    1. Advertising

  3. Andrew Jocelyn

    Steven Cheng Guest

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

    ==================================================
    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" <>
    >Subject: AJAX UpdatePanel stops custom JavaScript working
    >Date: Tue, 11 Mar 2008 18:38:54 -0000
    >Lines: 66


    >
    >
    >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;
    >}
    >
    >
    >
     
    Steven Cheng, Mar 12, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    3
    Views:
    481
    Rob Meade
    Aug 8, 2007
  2. Arachnid
    Replies:
    0
    Views:
    778
    Arachnid
    Oct 5, 2007
  3. Nathan Sokalski
    Replies:
    1
    Views:
    589
    miher
    Jun 15, 2009
  4. Monty
    Replies:
    7
    Views:
    662
    baradi hakim
    Jan 29, 2007
  5. Law
    Replies:
    0
    Views:
    77
Loading...

Share This Page