I was trying to create a select element that had only one option in
its option list, and then when the user clicked it (onFocus), then it
would (with proper feedback of course) use Ajax to get the rest of the
drop-down list. This doesn't work in IE. I finally found a post that
said, "IE's select is broken, you have to recreate a whole new
'select' object". This complicates things for me a little in that I
had the event handler for the focus object attached to the select
element. I don't think I'll be able to have the handler for the
select element replace its own object; so I may need another element
as an outside controller.
Anyway, I also found a post that said that scriptaculous' builder
works. Can anyone tell me why we can get scriptaculous to work in IE
but not prototype? Is there a way to do this in prototype without
creating a new select element?
Here's a example that should illustrate the problems. Change the
comments on the prototype blocks to see the different effect in IE.
<HTML>
<HEAD>
<SCRIPT language="javascript" src="prototype-1.6.0.2.js" type="text/
javascript"></SCRIPT>
<SCRIPT language="javascript" src="scriptaculous-1.8.1.js" type="text/
javascript"></SCRIPT>
</HEAD>
<BODY>
<FORM name="" action="controller" method="POST">
<div id='replaceMe'><p>Loading...</p></div>
<div id='replaceMe2'><p>Loading2...</p></div>
<SCRIPT language="javascript">
var mylog = new Array();
/*
* This example shows a <select> element error in Prototype for IE
(at least ver 6+).
*
* Using a textbox (textbox1), we setup an event handler such that
when the user
* leaves textbox1, the select list is changed to add 3 items and
set
the
* value of the selected item to the second one in the list.
*
* This works (mostly) o.k. on FF, but in IE, the list is not
expanded. It remains
* at only 1 option. Using scriptaculous's Builder function, I
don't
get this problem.
*/
//------------ Plain prototype ---------------
var selector1= new Element('select');
var textbox1= new Element('input', {align:"middle", type:"text",
size:"2"});
var textbox2= new Element('input', {align:"middle", type:"text",
size:"2"});
selector1.update(new Element('option',
{'value':'initial'}).update('initial'));
$('replaceMe').update('<p>Prototype Element...</p>');
$('replaceMe').insert(selector1);
$('replaceMe').insert(textbox1);
$('replaceMe').insert(textbox2);
textbox1.observe('blur', function(event)
{
var foo = new Element('option',
{'value':'foo'}).update('foo');
var bar = new Element('option',
{'value':'bar'}).update('bar');
var baz = new Element('option',
{'value':'baz'}).update('baz');
/*
// this doesn't work in IE...
selector1.update(foo);
selector1.insert(bar);
selector1.insert(baz);
selector1.selectedIndex=1;
*/
/*
// this doesn't work in IE either...
selector1.childElements().each( function(item) {
selector1.remove(item);
});
selector1.update(foo);
selector1.insert(bar);
selector1.insert(baz);
selector1.selectedIndex=1;
*/
// This works...
selectorA = new Element('select');
selector1.replace(selectorA);
selectorA.update(foo);
selectorA.insert(bar);
selectorA.insert(baz);
selectorA.selectedIndex=1;
/*
// this doesn't work in IE either...
$(selector1.identify()).update(foo);
$(selector1.identify()).insert(bar);
$(selector1.identify()).insert(baz);
$(selector1.identify()).selectedIndex=1;
*/
});
/*
* -------------- Use Scriptaculous -----------
*/
// Important: remember that scriptaculous Builder.node returns a
string.
// so you need to use a lot of $() wrapping: eg $(node)
var selector2= Builder.node('select');
var textbox3= Builder.node('input', {align:'middle',
type:'text',
size:'2'});
var textbox4= Builder.node('input', {align:'middle',
type:'text',
size:'2'});
$(selector2).appendChild($(Builder.node('option',
{'value':'initial'})).update('initial'));
$('replaceMe2').update('<p>Scriptaculous Builder...</p>');
$('replaceMe2').appendChild(selector2);
$('replaceMe2').appendChild(textbox3);
$('replaceMe2').appendChild(textbox4);
$(textbox3).observe('blur', function(event)
{
mylog.push('on blur for textbox3 caught.');
var foo = Builder.node('option', {'value':'foo'},
'foo');
var bar = Builder.node('option', {'value':'bar'},
'bar');
var baz = Builder.node('option', {'value':'baz'},
'baz');
$(selector2).remove($(selector2).firstDescendant());
$(selector2).appendChild(foo);
$(selector2).appendChild(bar);
$(selector2).appendChild(baz);
$(selector2).selectedIndex=1;
});
</SCRIPT>
</FORM>
</BODY>
</HTML>
TIA,
--~--~---------~--~----~------------~-------~--~----~
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@googlegroups.com
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
