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

[Patrick Ruzand]

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,

 

[Walter Wang [MSFT]]

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 ([email protected], 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.

 

[Patrick Ruzand]

Hi,

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:

Ok, thanks. I fixed it. But the probleme remains.

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.

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

 

[Walter Wang [MSFT]]

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 ([email protected], 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.

 

[Patrick Ruzand]

Hi Walter,

I made some progress on this issue. I finally found a workaround.
Please find below my comments.

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.

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.

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);

Yes, thanks. It seems I wrote my sample too fast

Thanks for your help,

Patrick

 

[Patrick Ruzand]

Hi Walter,

I made some progress on this issue. I finally found a workaround.
Please find below my comments. [...]
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.

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>

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