thr3ads.net - Rails spinoffs - Writing a form widget (select) with Builder (Scriptaculous 1.6.1) doesn''t work properly (selected value isn''t selected) [Jul 2006]

If this information is useful, please help other people find it:
Share via:

marc-olivier bernard

2006-Jul-11 11:43 UTC

Writing a form widget (select) with Builder (Scriptaculous 1.6.1) doesn''t work properly (selected value isn''t selected)

Hi,

In the following test page, I build a small formular with a select
widget, using Scriptaculous 1.6.1, and find the selected value not to
be selected. The same formular written directly works properly.

I am not sure whether the problem is due to Scriptaculous or to
Firefox''s DOM Engine.

This bug is encountered with Scriptaculous 1.6.1 and with Firefox 1.5
(RHL9, W2K) but not on IE 6 (W2K).

-------------8x---------

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=utf-8"/>
<title>Bug with Scriptaculous 1.6.1 (?): Writing a form widget
(select) with Builder doesn''t work properly (selected value
isn''t
selected</title>
<script src="../scriptaculous-js-1.6.1/lib/prototype.js"
type="text/javascript"><!--avoid EMPTY
script--></script>
<script src="../scriptaculous-js-1.6.1/src/scriptaculous.js"
type="text/javascript"><!--avoid EMPTY
script--></script>
</head>
<body style="margin:0; padding:0; border:0">

<p>This bug is encountered with Scriptaculous 1.6.1 and with Firefox
1.5 (RHL9, W2K) but not on IE 6 (W2K)</p>
<p>First formular writen with Scriptaculous Builder : value
''all''
should be selected but isn''t </p>
<form id="modification1">
<input type="hidden" name="cmd"
value="ubc"/>
<input type="submit" name="submit1"
value="Save"/>
</form>

<script type="text/javascript">
  var td_Fieldset ;

  td_Fieldset =
Builder.node(''fieldset'',{style:''width:97%;''},[
      Builder.node(''legend'',"Information Set")
  ]);

  td_Fieldset.appendChild(
    Builder.node(''div'',[
      Builder.node(''span'',"Descriptive Title"),
      Builder.node(''select'',[
       
Builder.node(''option'',{value:''any''},"any"),
       
Builder.node(''option'',{value:''all'',selected:''selected''},"all"),
       
Builder.node(''option'',{value:''none''},"none")
      ])
    ])
  );

  $(''modification1'').appendChild(td_Fieldset);
</script>
<p>Second formular writen with HTML Code : value ''all''
is selected</p>
<form id="modification2">
<input name="cmd" value="ubc" type="hidden">
<input name="submit1" value="Save"
type="submit">

<fieldset style="width: 97%;">
<legend>Information Set</legend>
<div>
<span>Descriptive Title</span>
<select>
<option value="any">any</option>
<option value="all"
selected="selected">all</option>
<option value="none">none</option>
</select>
</div>
</fieldset>
</form>

</body>
</html>




-------------8x---------
-- 
Marc-Olivier BERNARD

marc-olivier bernard

2006-Jul-11 14:26 UTC

head link

Re: Writing a form widget (select) with Builder (Scriptaculous 1.6.1) doesn''t work properly (selected value isn''t selected)

On 7/11/06, marc-olivier bernard
<mobernard-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> I am not sure whether the problem is due to Scriptaculous or to
> Firefox''s DOM Engine.
It is a firefox bug. I posted a comment on Bugzilla Mozilla:

https://bugzilla.mozilla.org/show_bug.cgi?id=300016#c10

-- 
Marc-Olivier BERNARD

Chris Lear

2006-Jul-11 15:16 UTC

head link

Re: Re: Writing a form widget (select) with Builder doesn''t work properly (selected value isn''t selected)

* marc-olivier bernard wrote (11/07/06 15:26):> On 7/11/06, marc-olivier bernard
<mobernard-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> 
>> I am not sure whether the problem is due to Scriptaculous or to
>> Firefox''s DOM Engine.
> 
> It is a firefox bug. I posted a comment on Bugzilla Mozilla:
> 
> https://bugzilla.mozilla.org/show_bug.cgi?id=300016#c10
> 
Are you sure it''s a Firefox bug? The way the builder code works is very
strange... to create an option element, it seems to create a select 
element, put the option element into it, then fetch the option out of 
that select element again. The result is that the option is *always* 
selected. I think it''s because firefox is treating it as the only 
element in the select list, which means it must be selected. [When I run 
your code, the last element in the list is selected, rather than the 
first. If I debug the value of the "selected" attribute, it''s
"selected"
for all of them]

This code, which is pure DOM and has none of the builder weirdness, but 
sets attributes in the same way, works in Firefox:

var dr=document.createElement("select");
var op=document.createElement("option");
op.appendChild(document.createTextNode("any"));
dr.appendChild(op);
op=document.createElement("option");
op.appendChild(document.createTextNode("all"));

op["selected"]="selected"; // <- attribute set here

dr.appendChild(op);
op=document.createElement("option");
op.appendChild(document.createTextNode("none"));
dr.appendChild(op);
$(''modification1'').appendChild(dr);

Chris

marc-olivier bernard

2006-Jul-11 15:57 UTC

head link

Re: Re: Writing a form widget (select) with Builder doesn''t work properly (selected value isn''t selected)

On 7/11/06, Chris Lear wrote:
> Are you sure it''s a Firefox bug? The way the builder code works is
very
> strange... to create an option element, it seems to create a select
> element, put the option element into it, then fetch the option out of
> that select element again. The result is that the option is *always*
> selected. I think it''s because firefox is treating it as the only
> element in the select list, which means it must be selected. [When I run
> your code, the last element in the list is selected, rather than the
> first. If I debug the value of the "selected" attribute,
it''s "selected"
> for all of them]
Are you speaking from the code at
http://bugzilla.mozilla.org/show_bug.cgi?id=300016#c10 ?

How do you debug +the value of the "selected" attribute+ ? See
below...
>
> This code, which is pure DOM and has none of the builder weirdness, but
> sets attributes in the same way, works in Firefox:
>
> var dr=document.createElement("select");
> var op=document.createElement("option");
> op.appendChild(document.createTextNode("any"));
> dr.appendChild(op);
> op=document.createElement("option");
> op.appendChild(document.createTextNode("all"));
>
> op["selected"]="selected"; // <- attribute set here
The last line ^^^^ is not using the DOM API, but I agree that your
solutions works in Firefox. Nevertheless, I suspect it is not for the
good reason: if I inspect the resulting DOM Tree (with Firefox DOM
Inspector), your solution gives:

<select>
  <option>any</option>
  <option>all</option>
  <option>none</option>
</select>

while the solution given in
http://bugzilla.mozilla.org/show_bug.cgi?id=300016#c10 gives:

<select>
  <option value="any">any</option>
  <option selected="selected"
value="all">all</option>
  <option value="none">none</option>
</select>

Back to your comment
https://bugzilla.mozilla.org/show_bug.cgi?id=300016#c11, the DOM
Engine from Firefox should not make any difference within your
solution and mine, or should it?

-- 
Marc-Olivier BERNARD

Chris Lear

2006-Jul-11 16:09 UTC

head link

Re: Re: Writing a form widget (select) with Builder doesn''t work properly (selected value isn''t selected)

* marc-olivier bernard wrote (11/07/06 16:57):> On 7/11/06, Chris Lear wrote:
> 
>> Are you sure it''s a Firefox bug? The way the builder code
works is very
>> strange... to create an option element, it seems to create a select
>> element, put the option element into it, then fetch the option out of
>> that select element again. The result is that the option is *always*
>> selected. I think it''s because firefox is treating it as the
only
>> element in the select list, which means it must be selected. [When I
run
>> your code, the last element in the list is selected, rather than the
>> first. If I debug the value of the "selected" attribute,
it''s "selected"
>> for all of them]
> 
> Are you speaking from the code at
> http://bugzilla.mozilla.org/show_bug.cgi?id=300016#c10 ?
No. I was talking about the code you posted using scriptaculous.
> 
> How do you debug +the value of the "selected" attribute+ ? See
below...
I added code like this to builder.js:
element.selected="anything";
alert(element.selected);
The alert always says "selected".
> 
>> This code, which is pure DOM and has none of the builder weirdness, but
>> sets attributes in the same way, works in Firefox:
>>
>> var dr=document.createElement("select");
>> var op=document.createElement("option");
>> op.appendChild(document.createTextNode("any"));
>> dr.appendChild(op);
>> op=document.createElement("option");
>> op.appendChild(document.createTextNode("all"));
>>
>> op["selected"]="selected"; // <- attribute set
here
> 
> The last line ^^^^ is not using the DOM API, but I agree that your
> solutions works in Firefox.
It isn''t using the DOM API, I agree. I lied when I said it was pure
DOM.
Sorry about that. I did it that way because that''s what the 
scriptaculous builder does, and I was trying to emulate that.
> Nevertheless, I suspect it is not for the
> good reason: if I inspect the resulting DOM Tree (with Firefox DOM
> Inspector), your solution gives:
> 
> <select>
>   <option>any</option>
>   <option>all</option>
>   <option>none</option>
> </select>
> 
> while the solution given in
> http://bugzilla.mozilla.org/show_bug.cgi?id=300016#c10 gives:
> 
> <select>
>   <option value="any">any</option>
>   <option selected="selected"
value="all">all</option>
>   <option value="none">none</option>
> </select>
> 
> Back to your comment
> https://bugzilla.mozilla.org/show_bug.cgi?id=300016#c11, the DOM
> Engine from Firefox should not make any difference within your
> solution and mine, or should it?
> 
I agree. I don''t think it should. I hadn''t looked at the bug
report when
I posted to this list. Then I looked at the bug, and saw that you''d 
presented your code differently there. I thought it would be worth 
posting a working version there in case it''s useful information for the
developers.

I now agree that there is a bug, but there''s also a workaround, and the
builder should probably use the workaround if possible. I''m also 
mystified as to why the builder works in the odd way it does.

Chris

marc-olivier bernard

2006-Jul-11 17:14 UTC

head link

Re: Re: Writing a form widget (select) with Builder doesn''t work properly (selected value isn''t selected)

On 7/11/06, Chris Lear wrote:> * marc-olivier bernard wrote (11/07/06 16:57):
> > On 7/11/06, Chris Lear wrote:
> >
> >> Are you sure it''s a Firefox bug? The way the builder code
works is very
> >> strange... to create an option element, it seems to create a
select
> >> element, put the option element into it, then fetch the option out
of
> >> that select element again. The result is that the option is
*always*
> >> selected. I think it''s because firefox is treating it as
the only
> >> element in the select list, which means it must be selected. [When
I run
> >> your code, the last element in the list is selected, rather than
the
> >> first. If I debug the value of the "selected" attribute,
it''s "selected"
> >> for all of them]
> >
> > Are you speaking from the code at
> > http://bugzilla.mozilla.org/show_bug.cgi?id=300016#c10 ?
>
> No. I was talking about the code you posted using scriptaculous.
>
Then, I don''t see where the Scriptaculous code is wrong... I think it
is due to the underlying bug. That code gives the right DOM Tree with
DOM Inspector.

> I agree. I don''t think it should. I hadn''t looked at the
bug report when
> I posted to this list. Then I looked at the bug, and saw that
you''d
> presented your code differently there. I thought it would be worth
> posting a working version there in case it''s useful information
for the
> developers.
>
> I now agree that there is a bug, but there''s also a workaround,
and the
> builder should probably use the workaround if possible. I''m also
> mystified as to why the builder works in the odd way it does.
I found another workaround, simply use the HTML Form DOM Interface to
set the selectedIndex to the right one:

<script type="text/javascript">
  var td_Fieldset ;

  td_Fieldset = Builder.node(''fieldset'',[
      Builder.node(''legend'',"Information Set")
  ]);

  td_Fieldset.appendChild(
    Builder.node(''div'',[
      Builder.node(''span'',"Descriptive Title"),
      Builder.node(''select'',{id:''anyId''},[
       
Builder.node(''option'',{value:''any''},"any"),
       
Builder.node(''option'',{value:''all'',selected:''selected''},"all"),
       
Builder.node(''option'',{value:''none''},"none")
      ])
    ])
  );

  $(''modification1'').appendChild(td_Fieldset);

  // right here I use the HTML Form DOM Interface
  $(''anyId'').selectedIndex = 1; // <----

</script>

-- 
Marc-Olivier BERNARD

Rails spinoffs - Jul 2006 - Writing a form widget (select) with Builder (Scriptaculous 1.6.1) doesn''t work properly (selected value isn''t selected)

Writing a form widget (select) with Builder (Scriptaculous 1.6.1) doesn''t work properly (selected value isn''t selected)

Re: Writing a form widget (select) with Builder (Scriptaculous 1.6.1) doesn''t work properly (selected value isn''t selected)

Re: Re: Writing a form widget (select) with Builder doesn''t work properly (selected value isn''t selected)

Re: Re: Writing a form widget (select) with Builder doesn''t work properly (selected value isn''t selected)

Re: Re: Writing a form widget (select) with Builder doesn''t work properly (selected value isn''t selected)

Re: Re: Writing a form widget (select) with Builder doesn''t work properly (selected value isn''t selected)