Rails spinoffs - Mar 2006 - Event.Observer - (was: Ajax.Autompleter not working on IE)

See if I can stir up a little life with a demo.  I can''t believe that
Ajax.Autocomplete doesn''t work on IE, so I *must* be doing something
wrong.

Trying to figure this out I added some alerts to control.js and it
seems that IE is not getting the onkeypress events.

So, here''s a demo:

    http://hank.org/demos/form.html

That contains two fields with onkeypress events:

<input name="email" type="text"
id="form226email" onkeypress="javascript: alert(''key
pressed'')" />

and

<input value="" name="phone" type="text"
id="form226phone" />

<script>
    Event.observe("form226phone", ''keypress'',
function(){ alert(''keypress'') } );
</script>


Both work in Firefox.  IE 6.0.2 Win95 only the Email field shows the
alert.


I added the "Click Me!" from the exmaple, and that does work in IE.

So, what''s up?




-- 
Bill Moseley
moseley-kv6DSSSScSo@public.gmane.org

Try:

<a name="form226phone_different_from_input_id"></a>

and I bet it works.

-Jerod

On 3/7/06, Bill Moseley <moseley-kv6DSSSScSo@public.gmane.org>
wrote:
>
> See if I can stir up a little life with a demo.  I can''t believe
that
> Ajax.Autocomplete doesn''t work on IE, so I *must* be doing
something
> wrong.
>
> Trying to figure this out I added some alerts to control.js and it
> seems that IE is not getting the onkeypress events.
>
> So, here''s a demo:
>
>     http://hank.org/demos/form.html
>
> That contains two fields with onkeypress events:
>
> <input name="email" type="text"
id="form226email" onkeypress="javascript:
> alert(''key pressed'')" />
>
> and
>
> <input value="" name="phone" type="text"
id="form226phone" />
>
> <script>
>     Event.observe("form226phone", ''keypress'',
function(){
> alert(''keypress'') } );
> </script>
>
>
> Both work in Firefox.  IE 6.0.2 Win95 only the Email field shows the
> alert.
>
>
> I added the "Click Me!" from the exmaple, and that does work in
IE.
>
> So, what''s up?
>
>
>
>
> --
> Bill Moseley
> moseley-kv6DSSSScSo@public.gmane.org
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

On Tue, Mar 07, 2006 at 08:34:53PM -0500, Jerod Venema
wrote:
> Try:
> 
> <a name="form226phone_different_from_input_id"></a>
> 
> and I bet it works.
Good call!  Is that a problem with IE or my incorrect usage?

I have some other code that doesn''t work in IE.  I suspect a rather
basic javascript question.

I have an element observed that calls ZipLookup on keyup:

function ZipLookup() {

    if ( this.value.length != 5 ){
        return;
    }


    if ( isNaN(this.value) ) {
        alert( "Zipcode should be a number" );
        return;
    }

    var this_id = this.id;

    [...]


Does prototype have any tools to make that work in all browsers?
this.value and this.id is undefined in IE.


Thanks,


-- 
Bill Moseley
moseley-kv6DSSSScSo@public.gmane.org

As to why it borked in IE...IE blows :-) getElementByID in IE also
getsElementByName...doh! No workaround that I know of, you just have to keep
the "name"s distinct from the "id"s. IE just returns the
first one it hits.

As to the other question...it could be a scope issue. I''d have to see
it in
an example to be of much help, but from the code you''ve posted,
"this" would
refer to the document window. Assuming the function is not wrapped in some
other object, ie, its just freestanding in the document...


function ZipLookup(event) {
    var e = Event.element(event);

    if ( e.value.length != 5 ){
        return;
    }


    if ( isNaN(e.value) ) {
        alert( "Zipcode should be a number" );
        return;
    }

    var this_id = e.id;

...

}


The Event.element(event) is a prototype function to get the source element
that caused the event. The other option is to do observe the input using
.bindAsEventListener(''name_of_zipcode_input''); which would put
the "this"
keyword into the proper scope.

-Jerod

On 3/7/06, Bill Moseley <moseley-kv6DSSSScSo@public.gmane.org>
wrote:
>
> On Tue, Mar 07, 2006 at 08:34:53PM -0500, Jerod Venema wrote:
> > Try:
> >
> > <a
name="form226phone_different_from_input_id"></a>
> >
> > and I bet it works.
>
> Good call!  Is that a problem with IE or my incorrect usage?
>
> I have some other code that doesn''t work in IE.  I suspect a
rather
> basic javascript question.
>
> I have an element observed that calls ZipLookup on keyup:
>
> function ZipLookup() {
>
>     if ( this.value.length != 5 ){
>         return;
>     }
>
>
>     if ( isNaN(this.value) ) {
>         alert( "Zipcode should be a number" );
>         return;
>     }
>
>     var this_id = this.id;
>
>     [...]
>
>
> Does prototype have any tools to make that work in all browsers?
> this.value and this.id is undefined in IE.
>
>
> Thanks,
>
>
> --
> Bill Moseley
> moseley-kv6DSSSScSo@public.gmane.org
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
>

_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

On Tue, Mar 07, 2006 at 10:01:32PM -0500, Jerod Venema
wrote:
> As to the other question...it could be a scope issue. I''d have to
see it in
> an example to be of much help, but from the code you''ve posted,
"this" would
> refer to the document window. Assuming the function is not wrapped in some
> other object, ie, its just freestanding in the document...
I must have copied some code from someplace.  In Firefox "this" was
the element that caused the event.

I''ll post the code just in case I''m doing anything else wrong.
;)

Oh, I guess the .replace doesn''t need to be inside the callback
function.

function ZipLookup(event) {
    /* Should use regex and allow for zip+4 */

    var e = Event.element(event);


    if ( e.value.length != 5 ){
        return;
    }


    if ( isNaN(e.value) ) {
        alert( "Zipcode should be a number" );
        return;
    }

    var this_id = e.id;

    var cb = function(originalRequest){
        var ret = eval("(" + originalRequest.responseText +
")" );
        var json = ret.json;
        if ( !json ) { return }

        var prefix = this_id.replace(/zip$/,'''');

        var state = $( prefix + ''state'' );
        var city  = $( prefix + ''city'' );

        if ( !state || !city ) {
            alert( "failed to find city/state elements ");
            return;
        }

        if ( json.state && json.city ) {
            state.value = json.state;
            city.value = json.city;
        }
        return;
    }

    new Ajax.Request( url, {
        method: ''get'',
        onComplete: cb
    } );
}



-- 
Bill Moseley
moseley-kv6DSSSScSo@public.gmane.org