Captuing Key Events

[briandichiara]

I am completely lost, as is always, when trying new script libraries.
I am trying to figure out how MochiKit works, and having a tough time.
For example, my first use for MochiKit is to use a cross-browser key
capture to restrict to only certain characters in a text input. After
studying the examples and the "key_events" demo, I thought I had a
basic understanding as to what's going on here. Well, I tried a simple
connection and already getting errors:
"connect is not defined"

It could be that I'm trying to use this on a field that isn't on the
page yet. I will be loading it into the page through Ajax, so my
question is simply this:

How do I setup a key-checking system that captures keys pressed by the
user on a specific text field and the text field isn't on the page at
Load, but brought in through Ajax later?

I'm simply trying to only allow a-z (not A-Z), 1-9, _, and all other
key functions like the arrow keys, home, tab, etc. I don't want spaces
or special characters other than the underscore.

Am I correct in understanding MochiKit is capable of this, and is used
for this reason, or am I mistaken, and I have misunderstood what
MochiKit is for?

Thanks!

[Matthew Kwiecien]

> How do I setup a key-checking system that captures keys pressed by the
> user on a specific text field and the text field isn't on the page at
> Load, but brought in through Ajax later?

As part of your XHR "success" function, do the event connect()'s for the key capture, or call a function that sets them up.

> "connect is not defined"

That sounds more like MochiKit.Signal is either not included or not accessible outside the MochiKit namespace.

--

|                     Matthew Kwiecien
•              Webhosting   |   Design
|           delihosting.com | neoteria.com

[Jorge Godoy]

"briandichiara" <briand...@gmail.com> writes:

> How do I setup a key-checking system that captures keys pressed by the
> user on a specific text field and the text field isn't on the page at
> Load, but brought in through Ajax later?

You connect to it later.

> Am I correct in understanding MochiKit is capable of this, and is used
> for this reason, or am I mistaken, and I have misunderstood what
> MochiKit is for?

It is capable of doing what you want. But you can't ask for something
that don't exist yet. It is how DOM works and it has nothing to do with
MochiKit.

--
Jorge Godoy <jgo...@gmail.com>

[briandichiara]

Ok. So i have moved my stuff to my Success function, but I still get
the connect error.

According to the example, all I really need to do this is:

<script type="text/javascript" src="js/lib/MochiKit/MochiKit.js"></
script>

right?

This is the rest of my ajax function:

var params = 'param=params';
var url = 'myurl.php';
var actions = Mochikit.connect($('directory'), 'onkeydown',
function(e){
if (!KeyEvents.handled) {
var key = e.key();
alert(key.code + " - " + key.string);
}
KeyEvents.handled = true;

return false;
}
);
new Ajax.Updater('gallery_page', url, {asynchronous:true, parameters:
params, onSuccess: function(){ actions } });

On Apr 15, 7:09 pm, "Matthew Kwiecien" <mkwiec...@gmail.com> wrote:
> > How do I setup a key-checking system that captures keys pressed by the
> > user on a specific text field and the text field isn't on the page at
> > Load, but brought in through Ajax later?
>
> As part of your XHR "success" function, do the event connect()'s for the key
> capture, or call a function that sets them up.
>
> > "connect is not defined"
>
> That sounds more like MochiKit.Signal is either not included or not
> accessible outside the MochiKit namespace.
>

[Bob Ippolito]

On 4/15/07, briandichiara <briand...@gmail.com> wrote:
>

> Ok. So i have moved my stuff to my Success function, but I still get
> the connect error.
>
> According to the example, all I really need to do this is:
>
> <script type="text/javascript" src="js/lib/MochiKit/MochiKit.js"></
> script>
>
> right?
>
> This is the rest of my ajax function:
>
> var params = 'param=params';
> var url = 'myurl.php';
> var actions = Mochikit.connect($('directory'), 'onkeydown',

It's not Mochikit.connect. It's not even MochiKit.connect. It's either
MochiKit.Signal.connect or just connect.

-bob

[Beau Hartshorne]

On 15-Apr-07, at 6:20 PM, briandichiara wrote:

> var actions = Mochikit.connect($('directory'), 'onkeydown',

This should be:
connect('directory', 'onkeydown',

or:
MochiKit.Signal.connect('directory', 'onkeydown',

Signal does the $('directory') for you. You don't need to return
false from the function. To stop the default behavior, use
e.preventDefault() instead. If you're just learning MochiKit, it
might make sense to try something a b

Beau

[Beau Hartshorne]

(Resent with the rest of the email...)

On 15-Apr-07, at 6:20 PM, briandichiara wrote:

> var actions = Mochikit.connect($('directory'), 'onkeydown',

This should be:

connect('directory', 'onkeydown',

or:
MochiKit.Signal.connect('directory', 'onkeydown',

Signal does the $('directory') for you. You don't need to return
false from the function. To stop the default behavior, use
e.preventDefault() instead. If you're just learning MochiKit, it

might make sense to try something a bit simpler. Try playing with the
Signal key examples:
http://mochikit.com/examples/key_events/index.html

Beau

[briandichiara]

I'm sorry, i should've changed that before I posted it. I have indeed
tried MochiKit.Signal.connect as well as just connect. The
Mochikit.connect (although Mochikit should've been MochiKit) was just
a last resort effort.

I get error:

Error: MochiKit.Signal has no properties

Would scriptaculous, or a pngbehavior or something else possibly be
conflicting with MochiKit? Is there an "onload" function I should know
about? Is there a simple Hello World I can test to see if I'm doing
it right?

On Apr 15, 8:25 pm, "Bob Ippolito" <b...@redivi.com> wrote:

[Bob Ippolito]

What you should do at this point is post a *complete* example of what
you're doing. You've missed something somewhere and it's not reflected
in the questions you're asking or the code you've posted so far. If
you're getting "MochiKit.Signal has no properties" then MochiKit
probably isn't loaded at all, so your problem is probably in the HTML
somewhere.

-bob

On 4/15/07, briandichiara <briand...@gmail.com> wrote:
>

[briandichiara]

I have setup a very simple test including both Scriptaculous and
Mochikit, and I'm getting the same results as my application:

http://brain.solepixel.com/mochitest.html

Please help. This is frustrating.

On Apr 15, 8:54 pm, "Bob Ippolito" <b...@redivi.com> wrote:
> What you should do at this point is post a *complete* example of what
> you're doing. You've missed something somewhere and it's not reflected
> in the questions you're asking or the code you've posted so far. If
> you're getting "MochiKit.Signal has no properties" then MochiKit
> probably isn't loaded at all, so your problem is probably in the HTML
> somewhere.
>
> -bob
>

[Bob Ippolito]

Looks like you might have some kind of conflict with the debug version
of MochiKit and scriptaculous or prototype. Load the packed version of
MochiKit, and/or load MochiKit first. You're going to want to use the
packed version at some point anyway, the debug version loads several
unpacked files via document.write, which is slow.

-bob

On 4/15/07, briandichiara <briand...@gmail.com> wrote:
>

[briandichiara]

Ok, I moved MochiKit to the top of the loading list, and i get a
different error now:

src has no properties
http://brain.solepixel.com/js/lib/MochiKit/Signal.js
Line 522

Also, I don't quite know what "loading the packed version of MochiKit"
means. Is this a separate download or a different way to reference the
js source?

On Apr 15, 9:37 pm, "Bob Ippolito" <b...@redivi.com> wrote:
> Looks like you might have some kind of conflict with the debug version
> of MochiKit and scriptaculous or prototype. Load the packed version of
> MochiKit, and/or load MochiKit first. You're going to want to use the
> packed version at some point anyway, the debug version loads several
> unpacked files via document.write, which is slow.
>
> -bob
>

[Bob Ippolito]

That error is because you're trying to connect to something that
doesn't exist in the document. There is no element with the id
'directory'.

Also, you shouldn't use $('directory'), just use 'directory'. connect
takes care of looking it up.

There's a "packed" folder in all releases of MochiKit which contains
the packed version of MochiKit. It's a packed single-file distribution
for production use.

-bob

On 4/15/07, briandichiara <briand...@gmail.com> wrote:
>

[briandichiara]

I'm sorry if I'm maybe not figuring this out, but I've cut it down to
the simplest of tests, and still can't get past the src error:

src has no properties
http://brain.solepixel.com/js/lib/MochiKit/packed/MochiKit.js
Line 4265

This time I'm not even loading anything through ajax.

On Apr 15, 9:56 pm, "Bob Ippolito" <b...@redivi.com> wrote:
> That error is because you're trying to connect to something that
> doesn't exist in the document. There is no element with the id
> 'directory'.
>
> Also, you shouldn't use $('directory'), just use 'directory'. connect
> takes care of looking it up.
>
> There's a "packed" folder in all releases of MochiKit which contains
> the packed version of MochiKit. It's a packed single-file distribution
> for production use.
>
> -bob
>

[Bob Ippolito]

This time it's for a different reason, you're running connect before
the 'orig_directory' element exists. If you look at any of the
MochiKit examples you'll see that they all use addLoadEvent or
something equivalent to deal with DOM initialization. The alternative
is just to put the script tag at the bottom of the body.

-bob

On 4/15/07, briandichiara <briand...@gmail.com> wrote:
>

[briandichiara]

Ok, this is now working (sort of), and I think I kinda get it.

How do I tell this "connect" to return true of false for the onkeydown
event? I want to disable some keys in a field. Is this possible?

On Apr 15, 10:24 pm, "Bob Ippolito" <b...@redivi.com> wrote:
> This time it's for a different reason, you're running connect before
> the 'orig_directory' element exists. If you look at any of the
> MochiKit examples you'll see that they all use addLoadEvent or
> something equivalent to deal with DOM initialization. The alternative
> is just to put the script tag at the bottom of the body.
>
> -bob
>

[Bob Ippolito]

Returning true and false isn't applicable to this kind of connect,
that only works for events stuck directly to DOM elements (as in
HTML). What you want is to use e.preventDefault() as Beau said earlier
in the thread.

-bob

On 4/15/07, briandichiara <briand...@gmail.com> wrote:
>

[Matthew Kwiecien]

I suggest looking at these two references to get the hang of events:
http://www.quirksmode.org/js/introevents.html
http://www.quirksmode.org/js/events_compinfo.html

You're going to test by key ranges basically. After the keypress event, you'll test event.keyCode against the different key codes. If it matches a restricted key code (or doesn't match an allowed one, depending on how you approach it), you'll send an event.preventDefault;

It should look something like this (warning: pseudo-code):
connect('elem','keypress',function(evt){ if (evt.keyCode < 43 or evt.keyCode > 98) evt.preventDefault(); });

I'd also suggest poking around here if you have any issues:
http://developer.mozilla.org/en/docs/DOM:element

As for each key's codes, I'll leave that to you and google. ;p

Hope this helps :)

[Bob Ippolito]

A lot of the special keys are handled by Signal, check the source:
http://svn.mochikit.com/mochikit/trunk/MochiKit/Signal.js

We'll have to add that table to the docs before next release.

-bob

[Beau Hartshorne]

Use e.preventDefault(), like I described in an earlier reply:
http://groups.google.com/group/mochikit/msg/2d3ac0bdc2cce009

Docs:
http://mochikit.com/doc/html/MochiKit/Signal.html#fn-preventdefault

Beau

[briandichiara]

Man. this is a lot of work just to get this working. And I haven't
successfully got it to even remotely work using Ajax. I think I'm
going to seek out another solution. Even when I get it working with a
static page, I still get this on each keydown event:

[Exception... "'Permission denied to set property
XULElement.selectedIndex' when calling method:
[nsIAutoCompletePopup::selectedIndex]" nsresult: "0x8057001e
(NS_ERROR_XPC_JS_THREW_STRING)" location: "JS frame ::
http://brain.solepixel.com/mochitest.html :: anonymous :: line 102"
data: no]
http://brain.solepixel.com/mochitest.html
Line 102

I have used the AJAX onComplete function for "el.focus()" and that
works fine, but the MochiKit stuff doesn't work. It doesn't see the
content of the XHR before it tries to connect the text box.

I also tried the prevenDefault() - basically i just set it at the end
of the function so it should alert the keycode, then use the
preventDefault, but the key still comes through, probably because of
the Exception mentioned above.

Thanks for the help everyone, but I'm getting nowhere fast on this. I
think I can find a simple JavaScript solution somewhere.

Sorry to bother.

On Apr 15, 11:14 pm, "Matthew Kwiecien" <mkwiec...@gmail.com> wrote:
> I suggest looking at these two references to get the hang of events:http://www.quirksmode.org/js/introevents.htmlhttp://www.quirksmode.org/js/events_compinfo.html

[Matthew Kwiecien]

I've not worked much with key detection, but from what I've read, preventDefault *only* works with keypress, not keydown.

I'm not seeing that error you mention when I try it on your page.

[Jorge Godoy]

"briandichiara" <briand...@gmail.com> writes:

> I have setup a very simple test including both Scriptaculous and
> Mochikit, and I'm getting the same results as my application:
>
> http://brain.solepixel.com/mochitest.html
>
> Please help. This is frustrating.

Was your intention to raise an alert box with the key pressed? That's
what I'm getting on the page above...

--
Jorge Godoy <jgo...@gmail.com>

[briandichiara]

Yes, I do get the pop-up box, however, it's also supposed to use
e.preventDefault(); at the bottom of the function, so it should always
return false. I changed it to onkeypress and that still doesn't return
false. Using FF 1.5 + FIrebug, it shows the error occuring, but in IE,
it doesn't.

Also, I would need it to return false onkeydown, because i will be
needing to add a check to see if the shift key is down, and if I
return false onkeypress, it would be too late, for the user would have
already released the shift key.

Using the key_events demo, I think MochiKit has amazing technology
behind it, but it possibly lacks real world usage examples and
multiple applicable cases. And I can't find any documentation where
MochiKit can be used with Ajax and objects that load in after
"onload".

Thanks again, and I will maybe try when I don't have so much other
stuff to work on.

On Apr 16, 6:05 am, Jorge Godoy <jgo...@gmail.com> wrote:

[Jorge Godoy]

"briandichiara" <briand...@gmail.com> writes:

> Yes, I do get the pop-up box, however, it's also supposed to use
> e.preventDefault(); at the bottom of the function, so it should always
> return false. I changed it to onkeypress and that still doesn't return
> false. Using FF 1.5 + FIrebug, it shows the error occuring, but in IE,
> it doesn't.

There's no error on FF 2.0 and no character goes to the text field, so I
suppose your preventDefault is working.

> Using the key_events demo, I think MochiKit has amazing technology
> behind it, but it possibly lacks real world usage examples and
> multiple applicable cases. And I can't find any documentation where
> MochiKit can be used with Ajax and objects that load in after
> "onload".

What's the difference from where the data came from? If it came through
AJAX or it existed on the page, the only difference is when it will be
available. You can use the same methods, events, etc. You just have to
make sure you bind / connect things after they're available (either the
event that is bound the when your AJAX data is available connects things
or you do that at the bottom of the page, with an onload event, etc.).

I don't miss "real world usage examples" for MochiKit... Specially with
all the demos it has.

--
Jorge Godoy <jgo...@gmail.com>

[briandichiara]

Ok, I'm giving this one last try. I don't know what to do about the
error in Firefox 1.5, but the Portable version is working on this
computer. When I get home, I will try it on the one installed on that
machine.

I have been able to locate the keys I want, but now, I need setup a
way to allow the following keys:
- Tab
- Up
- Down
- Left
- Right
- Home
- End
- Delete

Here's what i'm doing in my function:

var key = e.key();
if(key.code < 45 || key.code == 46 || key.code == 47 || (key.code > 57
&& key.code < 95) || key.code == 96 || key.code > 122){
e.preventDefault();
}

Thanks to everyone for all your help, I may actually get this yet!

On Apr 16, 7:11 am, Jorge Godoy <jgo...@gmail.com> wrote: