[AJAX] custom control implementing IScriptControl : no key events notification in firefox

Discussion in 'ASP .Net Building Controls' started by Patrick Ruzand, Mar 13, 2007.

  1. Hi,

    I have written a very simple custom control that renders itself as a DIV.
    This custom control implements the System.Web.Extensions.IScriptControl
    interface.
    Here is an extract of the server code:

    public partial class MyControl : UserControl, IScriptControl
    {
    public override void RenderControl(HtmlTextWriter writer) {
    // Some style attributes are set here
    writer.RenderBeginTag(HtmlTextWriterTag.Div);
    writer.RenderEndTag();
    base.RenderControl(writer);
    }

    protected override void OnPreRender(EventArgs e) {
    if (!this.DesignMode) {
    // Test for ScriptManager and register if it exists
    ScriptManager sm = ScriptManager.GetCurrent(Page);
    if (sm == null)
    throw new HttpException("A ScriptManager control must exist
    on the current page.");
    sm.RegisterScriptControl(this);
    }
    base.OnPreRender(e);
    }

    protected override void Render(HtmlTextWriter writer) {
    if (!this.DesignMode) {
    ScriptManager sm = ScriptManager.GetCurrent(Page);
    if (sm == null)
    throw new HttpException("A ScriptManager control must exist
    on the current page.");
    sm.RegisterScriptDescriptors(this);
    }
    base.Render(writer);
    }

    public System.Collections.Generic.IEnumerable<ScriptDescriptor>
    GetScriptDescriptors() {
    ScriptControlDescriptor descriptor = new
    ScriptControlDescriptor("Sample.MyControl", this.ID);
    return new ScriptDescriptor[] { descriptor };
    }

    public System.Collections.Generic.IEnumerable<ScriptReference>
    GetScriptReferences() {
    ScriptReference reference =
    new ScriptReference("mycontrol.js");
    return new ScriptReference[] { reference };
    }
    }

    On the client side, this control has a corresponding javascript class.
    In the initialize method, I add a dummy handler on the 'keydown' event
    that pops an alert message.
    Here is the corresponding javascript code:

    Type.registerNamespace("Sample");

    Sample.MyControl = function(element) {
    Sample.MyControl.initializeBase(this, [element]);
    this._keydownHandler = null;
    }

    Sample.MyControl.prototype = {
    initialize : function() {
    Sample.MyControl.callBaseMethod(this, 'initialize');
    this._keydownHandler = Function.createDelegate(this,
    this._onkeydown);
    $addHandler(this.get_element(), 'keydown', this._keydownHandler);
    },

    dispose : function() {
    var elt = this.get_element();
    if (elt) {
    $removeHandler(elt, 'keydown', this._keydownHandler);
    }
    this._keydownHandler = null;
    Sample.MyControl.callBaseMethod(this, 'dispose');
    },

    _onkeydown : function(e) {
    alert('onkeydown');
    }
    }

    Sample.MyControl.registerClass('Sample.MyControl', Sys.UI.Control);

    if (typeof(Sys) !== 'undefined')
    Sys.Application.notifyScriptLoaded();



    My problem is while it works well under IE, it does not work in Firefox.
    I may surely have done a silly mistake, but I can't find it til now...
    Let me know if you need more information.

    Thanks for your help,
     
    Patrick Ruzand, Mar 13, 2007
    #1
    1. Advertisements

  2. Hi Patrick,

    According to this tutorial:
    http://ajax.asp.net/docs/tutorials/IScriptControlTutorial1.aspx, you should
    use the ClientID instead of ID property when creating the
    ScriptControlDescriptor since this will be used at client-side:

    public System.Collections.Generic.IEnumerable<ScriptDescriptor>
    GetScriptDescriptors()
    {
    ScriptControlDescriptor descriptor = new
    ScriptControlDescriptor("Sample.MyControl", this.ClientID);
    return new ScriptDescriptor[] { descriptor };
    }


    Also, I'm having trouble to use your code on a new UserControl, would you
    please post the complete code including the .ascx content? Thanks.

    Sincerely,
    Walter Wang (, remove 'online.')
    Microsoft Online Community Support

    ==================================================
    Get notification to my posts through email? Please refer to
    http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
    ications. If you are using Outlook Express, please make sure you clear the
    check box "Tools/Options/Read: Get 300 headers at a time" to see your reply
    promptly.

    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.
     
    Walter Wang [MSFT], Mar 14, 2007
    #2
    1. Advertisements

  3. Hi,
    Ok, thanks. I fixed it. But the probleme remains.
    I have put my VS2005 website here:
    http://www.cijoint.fr/cij1228731447228.zip

    Do not hesitate to tell me if you prefer that I post copy/paste
    the source code in a message in this group.

    Note that it is a testcase and not my real project which is by far more
    complicated.

    Thanks for your help,
    Patrick
     
    Patrick Ruzand, Mar 14, 2007
    #3
  4. Hi Patrick,

    Downloading the code from your website is fine.

    I can now see the issue you mentioned clearly. However, I don't think this
    issue is related to asp.net at all: consider following simple html page:

    <!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>
    </head>
    <body>
    <div id="mydiv" style="width:100px;height:100px;background-color:blue"
    onkeydown="javascript:alert('onkeydown')"></div>
    <input type="text" id="mytxt" onkeydown="javascript:alert('mytxt')" />
    </body>
    </html>

    Try this html page in IE and FireFox, you will see when you click on the
    div and press any key, FireFox will not show a messagebox. While the
    textbox's onkeydown event works fine on both IE and FireFox. I guess this
    is how FireFox handles div's onkeydown event? I suggest you check this on
    FireFox's support site.

    By the way, you should always use ClientID when generating client-side
    content, which means you need to change the code in your OnRenderControl to:

    writer.AddAttribute(HtmlTextWriterAttribute.Id, this.ClientID);


    Hope this helps.


    Regards,
    Walter Wang (, remove 'online.')
    Microsoft Online Community Support

    ==================================================
    When responding to posts, please "Reply to Group" via your newsreader so
    that others may learn and benefit from your issue.
    ==================================================

    This posting is provided "AS IS" with no warranties, and confers no rights.
     
    Walter Wang [MSFT], Mar 15, 2007
    #4
  5. Hi Walter,

    I made some progress on this issue. I finally found a workaround.
    Please find below my comments.
    Indeed, but here you use the 'onkeydown' html element attribute.

    You will find below the code of an html page that basically does what
    the MS Ajax library is doing at init time using the DOM API.
    As it is, it reproduces the behavior I have with MS js lib.
    That is, the keydown event handler is not called.

    Doing more tests, I found that in order to the key event handler is
    called under Firefox, the div elt must have its 'tabIndex' property set
    to -1.
    In this case, the keyboard event handlers are called as expected, as under
    IE.
    (To see the fixed behavior in the sample below, uncomment the line
    "elt.tabIndex = -1;").

    I don't know whether such a workaround could be integrated into the MS ajax
    js
    library, as it might be too intrusive, and whether it is a bug or not.
    I really don't know so I let you decide what to do with that. On my side,
    the fix is easy and the issue is fixed.
    Yes, thanks. It seems I wrote my sample too fast :)

    Thanks for your help,

    Patrick
     
    Patrick Ruzand, Mar 15, 2007
    #5
  6. Hi Walter,
    it's better with the code...
    ---8<---8<---8<---8<---8<---8<---8<---8<---8<---8<---8<---
    <!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>

    </head>

    <body>

    <script type="text/javascript">

    function wireEventHandler(target, eventName, handler) {

    var elt = document.getElementById(target);

    if (elt.addEventListener) {

    // Begin Firefox workaround

    // *** Uncomment the line below to fix the issue ***

    // elt.tabIndex = -1;

    // End Firefox workaround

    elt.addEventListener(eventName, handler, true);

    }

    }


    function foo(e) {

    alert('onkeydown: ' + e.target.id);

    }

    </script>

    <input type="text" id="text" />

    <div id="mydiv" style="width:100px;height:100px;background-color:blue"

    <div style="left: 5px; width: 500px; position: absolute; top: 105px; height:
    500px">

    <div id="MyControl1"
    style="background-color:red;position:relative;left:5px;top:5px;width:500px;height:500px;">

    </div>

    </div>

    <script type="text/javascript">

    wireEventHandler('MyControl1','keydown', foo);

    </script>

    </body>

    </html>
     
    Patrick Ruzand, Mar 15, 2007
    #6
    1. Advertisements

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.