shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2006-Oct-23 20:40 UTC
Prototype question regarding Form.Element.EventObserver
hi all,
I am trying out a simple Form.Element.EventObserver sample and couln''t
get it work.
in header, i have
<script type="text/javascript"
src="prototype.js"></script>
<script type="text/javascript">
new Form.Element.EventObserver("id1", function(ele,value){
$(''id2'').innerHTML="bal"} );
</script>
in the body i have..
<form>
<select id="id1">
<option value="">Select a table</option>
<option>select me</option>
</select>
</form>
<div id="id2""></div>
=====
the error message i got is that "element has no properties" using
firebug. looked it up,
Form.Element.EventObserver calls Form.Element.getValue(this.element);
and in Form.Element''s getValue, the last line is where the error
barked..
Form.Element = {
.....
getValue: function(element) {
element = $(element);
var method = element.tagName.toLowerCase(); # error here
======
i am new to js and trying to trace which ''this'' got called
there among
the object inheritences is beyong me.. can anyone tell me why this
failed to execute ??
using Prototype 1.4..
TIA,
James.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Martin Bialasinski
2006-Oct-23 21:19 UTC
Re: Prototype question regarding Form.Element.EventObserver
On 10/23/06, shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org <shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> in header, i have > > <script type="text/javascript"> > new Form.Element.EventObserver("id1", function(ele,value){ > $(''id2'').innerHTML="bal"} ); > </script>Execution of JS code happens as the HTMl file is parsed. The time this code is executed, there is no "id2" element in the DOM. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2006-Oct-23 21:42 UTC
Re: Prototype question regarding Form.Element.EventObserver
thanks for the reply. however, this doesn''t work either.. seems to be
loading forever. probably some dumb mistake i made but i just can''t see
it now.. :-(
<html>
<head>
<script type="text/javascript"
src="prototype.js"></script>
</head>
<body>
<script type="text/javascript">
new Form.Element.EventObserver( ''id1'',function(ele,value){
$(''id2'').innerHTML="test"; } );
</script>
<form>
<select id="id1">
<option value="">A</option>
<option>B</option>
</select>
</form>
<div id="id2""></div>
</body>
</html>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Sonny Savage
2006-Oct-24 06:42 UTC
Re: Prototype question regarding Form.Element.EventObserver
The Javascript needs to execute after you define the element. You were
trying to reference ''id2'' before it existed.
<html>
<head>
<script type="text/javascript"
src="prototype.js"></script>
</head>
<body>
<form>
<select id="id1">
<option value="">A</option>
<option>B</option>
</select>
</form>
<div id="id2""></div>
<script type="text/javascript">
new Form.Element.EventObserver( ''id1'',function(ele,value){
$(''id2'').innerHTML="test"; } );
</script>
</body>
</html>
On 10/23/06, shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
<shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:>
>
> thanks for the reply. however, this doesn''t work either.. seems to
be
> loading forever. probably some dumb mistake i made but i just
can''t see
> it now.. :-(
>
> <html>
> <head>
> <script type="text/javascript"
src="prototype.js"></script>
> </head>
> <body>
>
> <script type="text/javascript">
> new Form.Element.EventObserver(
''id1'',function(ele,value){
> $(''id2'').innerHTML="test"; } );
> </script>
>
> <form>
> <select id="id1">
> <option value="">A</option>
> <option>B</option>
> </select>
> </form>
> <div id="id2""></div>
>
> </body>
> </html>
>
>
> >
>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs
-~----------~----~----~----~------~----~------~--~---
Thomas Fuchs
2006-Oct-24 06:43 UTC
Re: Prototype question regarding Form.Element.EventObserver
Almost :) To quote Martin, "Execution of JS code happens as the HTMl file is parsed. The time this code is executed, there is no "id2" element in the DOM." You have to put the <script> block containing the EventObserver call _after_ you define the select element. Just move the <script> block right after the </ form> closing tag or so. -Thomas Am 23.10.2006 um 23:42 schrieb shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org:> > thanks for the reply. however, this doesn''t work either.. seems to be > loading forever. probably some dumb mistake i made but i just can''t > see > it now.. :-( > > <html> > <head> > <script type="text/javascript" src="prototype.js"></script> > </head> > <body> > > <script type="text/javascript"> > new Form.Element.EventObserver( ''id1'',function(ele,value){ > $(''id2'').innerHTML="test"; } ); > </script> > > <form> > <select id="id1"> > <option value="">A</option> > <option>B</option> > </select> > </form> > <div id="id2""></div> > > </body> > </html> > > > >-- Thomas Fuchs wollzelle http://www.wollzelle.com questentier on AIM madrobby on irc.freenode.net http://www.fluxiom.com :: online digital asset management http://script.aculo.us :: Web 2.0 JavaScript http://mir.aculo.us :: Where no web developer has gone before --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2006-Oct-25 21:08 UTC
Re: Prototype question regarding Form.Element.EventObserver
thanks everyone, i got it working under Firefox. however, it doesn''t do anything in IE ( i am testing it under 6.0) . i am using Sonny''s example. J. Sonny Savage wrote:> The Javascript needs to execute after you define the element. You were > trying to reference ''id2'' before it existed. > > <html> > <head> > <script type="text/javascript" src="prototype.js"></script> > </head> > <body> > > <form> > <select id="id1"> > <option value="">A</option> > <option>B</option> > </select> > </form> > <div id="id2""></div> > > <script type="text/javascript"> > new Form.Element.EventObserver( ''id1'',function(ele,value){ > $(''id2'').innerHTML="test"; } ); > </script> > > </body> > </html>--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve
2006-Oct-26 06:23 UTC
Re: Prototype question regarding Form.Element.EventObserver
Hey there, shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org a écrit :> thanks everyone, i got it working under Firefox. however, it doesn''t do > anything in IE ( i am testing it under 6.0) . i am using Sonny''s > example. > >> <script type="text/javascript"> >> new Form.Element.EventObserver( ''id1'',function(ele,value){ >> $(''id2'').innerHTML="test"; } ); >> </script>Well, first, onChange is not always triggered at the same time, depending on the browser. Some of those require that the component loses focus. Try that. Also, consider switching from ".innerHTML = x" to ".update(x)", which is more portable. Finally, if this doesn''t cut it still, consider moving to a regular Observer, which is time-based, with, say, a half-second period. This will be slightly more resource-hungry, but ensures a value change is detected quickly enough. -- Christophe Porteneuve a.k.a. TDD "[They] did not know it was impossible, so they did it." --Mark Twain Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2006-Oct-26 18:46 UTC
Re: Prototype question regarding Form.Element.EventObserver
Christophe Porteneuve wrote:> Hey there, > > shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org a écrit : > > thanks everyone, i got it working under Firefox. however, it doesn''t do > > anything in IE ( i am testing it under 6.0) . i am using Sonny''s > > example. > > > >> <script type="text/javascript"> > >> new Form.Element.EventObserver( ''id1'',function(ele,value){ > >> $(''id2'').innerHTML="test"; } ); > >> </script> > > Well, first, onChange is not always triggered at the same time, > depending on the browser. Some of those require that the component > loses focus. Try that.tried lose the focus, nothing. by the way, the prototype site mentioned that it support IE 6 above, i guess it is not really the case ?> Also, consider switching from ".innerHTML = x" to ".update(x)", which is > more portable.thanks, applied.> Finally, if this doesn''t cut it still, consider moving to a regular > Observer, which is time-based, with, say, a half-second period. This > will be slightly more resource-hungry, but ensures a value change is > detected quickly enough.doesn''t work either.. here is what i have. <html> <head> <script type="text/javascript" src="prototype.js"></script> </head> <body> <form> <select id="id1"> <option>A</option> <option>B</option> </select> </form> <div id="id2""></div> <script type="text/javascript"> new Form.Element.Observer( ''id1'', 0.5, getHTML ); function getHTML(ele, val) { Element.update("id2",val); } </script> </body> </html>> -- > Christophe Porteneuve a.k.a. TDD > "[They] did not know it was impossible, so they did it." --Mark Twain > Email: tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.orgJ. --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
Christophe Porteneuve
2006-Oct-27 11:03 UTC
Re: Prototype question regarding Form.Element.EventObserver
Hey there, shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org a écrit :> <form> > <select id="id1"> > <option>A</option> > <option>B</option>Use value attributes in there. See below.> </select> > </form> > <div id="id2""></div>Lose the extra quote, too. Won''t imped ''cuz the browser is forgiving, but still. Your issue lies with Prototype 1.4 code not dealing properly with unspecified value attributes for <select>: opt = element.options[index]; value = opt.value; if (!value && !(''value'' in opt)) value = opt.text; You see, a non-specified value attribute yields value == '''', which bool-equates to false. But the subtest (''value'' in opt) will always be true, as the DOM node *always* features this property. So you never revert back to opt.text. As both your options yield the same value (''''), there''s no change detected by the Observer. I suggest getting Prototype from the trunk (or if you''re not keen on SVN, just get script.aculo.us and snatch its prototype.js file) for now, which deals with missing values. I also submitted a patch recently for ol'' bug #5033 [1], that distinguishes between unspecified attribute and empty-valued attribute. But that''s not necessary for you: use non-empty value attributes, and use a more recent prototype.js file. [1] http://dev.rubyonrails.org/ticket/5033 -- Christophe Porteneuve aka TDD tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---
shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org
2006-Oct-27 20:57 UTC
Re: Prototype question regarding Form.Element.EventObserver
Christophe Porteneuve wrote:> Hey there, > > shijialee-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org a écrit : > > <form> > > <select id="id1"> > > <option>A</option> > > <option>B</option> > > Use value attributes in there. See below. > > > </select> > > </form> > > <div id="id2""></div> > > Lose the extra quote, too. Won''t imped ''cuz the browser is forgiving, > but still. > > Your issue lies with Prototype 1.4 code not dealing properly with > unspecified value attributes for <select>: > > opt = element.options[index]; > value = opt.value; > if (!value && !(''value'' in opt)) > value = opt.text; > > You see, a non-specified value attribute yields value == '''', which > bool-equates to false. But the subtest (''value'' in opt) will always be > true, as the DOM node *always* features this property. So you never > revert back to opt.text. As both your options yield the same value > (''''), there''s no change detected by the Observer. > > I suggest getting Prototype from the trunk (or if you''re not keen on > SVN, just get script.aculo.us and snatch its prototype.js file) for now, > which deals with missing values. > > I also submitted a patch recently for ol'' bug #5033 [1], that > distinguishes between unspecified attribute and empty-valued attribute. > But that''s not necessary for you: use non-empty value attributes, and > use a more recent prototype.js file. > > [1] http://dev.rubyonrails.org/ticket/5033 >indeed not using value attribute there was the cause of it in IE. thanks you for helping me all along. you made me want to learn javascript now :-)> -- > Christophe Porteneuve aka TDD > tdd-x+CfDp/qHev2eFz/2MeuCQ@public.gmane.org--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs -~----------~----~----~----~------~----~------~--~---