Hi.
Tons of code - working in FF2.0.0.2 but not in IE7. Eventually I
reduced it to this.
This code STILL works in FF but not in IE. I suspect that IE doesn''t
allow for the update of the select statement in this manner and you
have to use something else - suggestions?
===========ORIGINAL SOURCE====================<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sales Operations</title>
<script src="/global/prototype/prototype.js"
type="text/javascript"></script>
<script type="text/javascript">
Event.observe(window, ''load'', function()
{
$(''SelectContract'').update(''<option
value="-1">Please select a
Contract</option><option
value="ARGOS">ARGOS</option>'');
alert(''Should now be able to choose Contract'');
});
</script>
</head>
<body>
<select id="SelectContract" name="SelectContract" />
</body>
</html>
===========ORIGINAL SOURCE====================
I get the alert, so I know the event has been triggered. IE does not
report any errors.
So, you cool guys must have built a list of do''s and
don''t''s. If so,
could they be consolidated into the Prototype documentation?
Finally, I examined the rendered source and found a problem ...
=========IE VIEW RENDERED SOURCE==============<HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Sales
Operations</TITLE>
<SCRIPT src="/global/prototype/prototype.js"
type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
Event.observe(window, ''load'', function()
{
$(''SelectContract'').update(''<option
value="-1">Please select a
Contract</option><option
value="ARGOS">ARGOS</option>'');
alert(''Should now be able to choose Contract'');
});
</SCRIPT>
</HEAD>
<BODY><SELECT id=SelectContract name=SelectContract
_extended="true">Please select a Contract</OPTION><OPTION
value="ARGOS">ARGOS</OPTION></SELECT></BODY></HTML>
=========IE VIEW RENDERED SOURCE==============
You will notice that the first opening <option> tag is missing.
I''m really lost as to what is going on here.
As a comparison, this is the HTML code from Firebug in FF.
=========FIREBUG HTML PANEL==============<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sales Operations</title>
<script type="text/javascript"
src="/global/prototype/prototype.js">
</script>
<script type="text/javascript">
</script>
</head>
<body>
<select id="SelectContract" name="SelectContract">
<option value="-1">Please select a Contract</option>
<option value="ARGOS">ARGOS</option>
</select>
</body>
</html>
=========FIREBUG HTML PANEL==============
As you can see, the options tag are fine.
Sort of struggling here.
The main code is using AJAX to get a list of options for a select box.
I have a PHP based "makeList" function which can be told to generate
the <options> tags for a list (Contracts, Suppliers, Contacts, Users,
etc). What is the "cleanest" way to supply and update the select
statement? I can produce pretty much anything required, if I know WHAT
is required - hence a nice selection of do''s and
don''t''s!
Any help would be appreciated.
Kind regards,
Richard Quadling.
--
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"
--~--~---------~--~----~------------~-------~--~----~
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?hl=en
-~----------~----~----~----~------~----~------~--~---
Duh. Thanks. On 20/03/07, Colin Mollenhour <eliteii92g-NPSFNn/7+NYVo650/ln6uw@public.gmane.org> wrote:> > This has been brought up quite a few times here in this group actually.. > IE doesn''t like updating "select" elements with innerHTML. You need to > use this method > > $(''myselect'').options[i] = new Option(...); > > See this doublecombo class I made: > http://colin.mollenhour.com/doublecombo/index.html for a good example of > how to use PHP to generate the JSON data and JS to fill the select with it. > > Colin > > Richard Quadling wrote: > > Hi. > > > > Tons of code - working in FF2.0.0.2 but not in IE7. Eventually I > > reduced it to this. > > > > This code STILL works in FF but not in IE. I suspect that IE doesn''t > > allow for the update of the select statement in this manner and you > > have to use something else - suggestions? > > > > ===========ORIGINAL SOURCE====================> > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> > > <html xmlns="http://www.w3.org/1999/xhtml"> > > <head> > > <title>Sales Operations</title> > > <script src="/global/prototype/prototype.js" type="text/javascript"></script> > > <script type="text/javascript"> > > Event.observe(window, ''load'', function() > > { > > $(''SelectContract'').update(''<option value="-1">Please select a > > Contract</option><option value="ARGOS">ARGOS</option>''); > > alert(''Should now be able to choose Contract''); > > }); > > </script> > > </head> > > <body> > > <select id="SelectContract" name="SelectContract" /> > > </body> > > </html> > > ===========ORIGINAL SOURCE====================> > > > I get the alert, so I know the event has been triggered. IE does not > > report any errors. > > > > So, you cool guys must have built a list of do''s and don''t''s. If so, > > could they be consolidated into the Prototype documentation? > > > > Finally, I examined the rendered source and found a problem ... > > > > =========IE VIEW RENDERED SOURCE==============> > <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Sales Operations</TITLE> > > <SCRIPT src="/global/prototype/prototype.js" type=text/javascript></SCRIPT> > > > > <SCRIPT type=text/javascript> > > Event.observe(window, ''load'', function() > > { > > $(''SelectContract'').update(''<option value="-1">Please select a > > Contract</option><option value="ARGOS">ARGOS</option>''); > > alert(''Should now be able to choose Contract''); > > }); > > </SCRIPT> > > </HEAD> > > <BODY><SELECT id=SelectContract name=SelectContract > > _extended="true">Please select a Contract</OPTION><OPTION > > value="ARGOS">ARGOS</OPTION></SELECT></BODY></HTML> > > =========IE VIEW RENDERED SOURCE==============> > > > You will notice that the first opening <option> tag is missing. > > > > I''m really lost as to what is going on here. > > > > As a comparison, this is the HTML code from Firebug in FF. > > > > =========FIREBUG HTML PANEL==============> > <html xmlns="http://www.w3.org/1999/xhtml"> > > <head> > > <title>Sales Operations</title> > > <script type="text/javascript" src="/global/prototype/prototype.js"> > > </script> > > <script type="text/javascript"> > > </script> > > </head> > > <body> > > <select id="SelectContract" name="SelectContract"> > > <option value="-1">Please select a Contract</option> > > <option value="ARGOS">ARGOS</option> > > </select> > > </body> > > </html> > > =========FIREBUG HTML PANEL==============> > > > As you can see, the options tag are fine. > > > > Sort of struggling here. > > > > The main code is using AJAX to get a list of options for a select box. > > I have a PHP based "makeList" function which can be told to generate > > the <options> tags for a list (Contracts, Suppliers, Contacts, Users, > > etc). What is the "cleanest" way to supply and update the select > > statement? I can produce pretty much anything required, if I know WHAT > > is required - hence a nice selection of do''s and don''t''s! > > > > Any help would be appreciated. > > > > Kind regards, > > > > Richard Quadling. > > > > > > >-- ----- Richard Quadling Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731 "Standing on the shoulders of some very clever giants!" --~--~---------~--~----~------------~-------~--~----~ 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?hl=en -~----------~----~----~----~------~----~------~--~---
This has been brought up quite a few times here in this group actually..
IE doesn''t like updating "select" elements with innerHTML.
You need to
use this method
$(''myselect'').options[i] = new Option(...);
See this doublecombo class I made:
http://colin.mollenhour.com/doublecombo/index.html for a good example of
how to use PHP to generate the JSON data and JS to fill the select with it.
Colin
Richard Quadling wrote:> Hi.
>
> Tons of code - working in FF2.0.0.2 but not in IE7. Eventually I
> reduced it to this.
>
> This code STILL works in FF but not in IE. I suspect that IE
doesn''t
> allow for the update of the select statement in this manner and you
> have to use something else - suggestions?
>
> ===========ORIGINAL SOURCE====================> <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <title>Sales Operations</title>
> <script src="/global/prototype/prototype.js"
type="text/javascript"></script>
> <script type="text/javascript">
> Event.observe(window, ''load'', function()
> {
> $(''SelectContract'').update(''<option
value="-1">Please select a
> Contract</option><option
value="ARGOS">ARGOS</option>'');
> alert(''Should now be able to choose Contract'');
> });
> </script>
> </head>
> <body>
> <select id="SelectContract" name="SelectContract"
/>
> </body>
> </html>
> ===========ORIGINAL SOURCE====================>
> I get the alert, so I know the event has been triggered. IE does not
> report any errors.
>
> So, you cool guys must have built a list of do''s and
don''t''s. If so,
> could they be consolidated into the Prototype documentation?
>
> Finally, I examined the rendered source and found a problem ...
>
> =========IE VIEW RENDERED SOURCE==============> <HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Sales
Operations</TITLE>
> <SCRIPT src="/global/prototype/prototype.js"
type=text/javascript></SCRIPT>
>
> <SCRIPT type=text/javascript>
> Event.observe(window, ''load'', function()
> {
> $(''SelectContract'').update(''<option
value="-1">Please select a
> Contract</option><option
value="ARGOS">ARGOS</option>'');
> alert(''Should now be able to choose Contract'');
> });
> </SCRIPT>
> </HEAD>
> <BODY><SELECT id=SelectContract name=SelectContract
> _extended="true">Please select a
Contract</OPTION><OPTION
>
value="ARGOS">ARGOS</OPTION></SELECT></BODY></HTML>
> =========IE VIEW RENDERED SOURCE==============>
> You will notice that the first opening <option> tag is missing.
>
> I''m really lost as to what is going on here.
>
> As a comparison, this is the HTML code from Firebug in FF.
>
> =========FIREBUG HTML PANEL==============> <html
xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <title>Sales Operations</title>
> <script type="text/javascript"
src="/global/prototype/prototype.js">
> </script>
> <script type="text/javascript">
> </script>
> </head>
> <body>
> <select id="SelectContract"
name="SelectContract">
> <option value="-1">Please select a Contract</option>
> <option value="ARGOS">ARGOS</option>
> </select>
> </body>
> </html>
> =========FIREBUG HTML PANEL==============>
> As you can see, the options tag are fine.
>
> Sort of struggling here.
>
> The main code is using AJAX to get a list of options for a select box.
> I have a PHP based "makeList" function which can be told to
generate
> the <options> tags for a list (Contracts, Suppliers, Contacts, Users,
> etc). What is the "cleanest" way to supply and update the select
> statement? I can produce pretty much anything required, if I know WHAT
> is required - hence a nice selection of do''s and
don''t''s!
>
> Any help would be appreciated.
>
> Kind regards,
>
> Richard Quadling.
>
--~--~---------~--~----~------------~-------~--~----~
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?hl=en
-~----------~----~----~----~------~----~------~--~---
Alternatively, you can also update the contents of the element containing the select box. I''ve used that "trick" to try and get around some of IE''s quirkiness with respect to changing the contents of some elements. For example, wrap the select element in a div and then replace the contents of the div with a new select element. If you''ve observing any events on the select element, though, you''ll want to stop observing them and then start once more when the replacement is complete. Actually, I''m not sure you explicitly have to stop, but I''ve run into situations where you do need to start observation once more after replacing an element. -- Dash -- Richard Quadling wrote:> Hi. > > Tons of code - working in FF2.0.0.2 but not in IE7. Eventually I > reduced it to this. > > This code STILL works in FF but not in IE. I suspect that IE doesn''t > allow for the update of the select statement in this manner and you > have to use something else - suggestions? > > ===========ORIGINAL SOURCE====================> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml"> > <head> > <title>Sales Operations</title> > <script src="/global/prototype/prototype.js" type="text/javascript"></script> > <script type="text/javascript"> > Event.observe(window, ''load'', function() > { > $(''SelectContract'').update(''<option value="-1">Please select a > Contract</option><option value="ARGOS">ARGOS</option>''); > alert(''Should now be able to choose Contract''); > }); > </script> > </head> > <body> > <select id="SelectContract" name="SelectContract" /> > </body> > </html> > ===========ORIGINAL SOURCE====================> > I get the alert, so I know the event has been triggered. IE does not > report any errors. > > So, you cool guys must have built a list of do''s and don''t''s. If so, > could they be consolidated into the Prototype documentation? > > Finally, I examined the rendered source and found a problem ... > > =========IE VIEW RENDERED SOURCE==============> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Sales Operations</TITLE> > <SCRIPT src="/global/prototype/prototype.js" type=text/javascript></SCRIPT> > > <SCRIPT type=text/javascript> > Event.observe(window, ''load'', function() > { > $(''SelectContract'').update(''<option value="-1">Please select a > Contract</option><option value="ARGOS">ARGOS</option>''); > alert(''Should now be able to choose Contract''); > }); > </SCRIPT> > </HEAD> > <BODY><SELECT id=SelectContract name=SelectContract > _extended="true">Please select a Contract</OPTION><OPTION > value="ARGOS">ARGOS</OPTION></SELECT></BODY></HTML> > =========IE VIEW RENDERED SOURCE==============> > You will notice that the first opening <option> tag is missing. > > I''m really lost as to what is going on here. > > As a comparison, this is the HTML code from Firebug in FF. > > =========FIREBUG HTML PANEL==============> <html xmlns="http://www.w3.org/1999/xhtml"> > <head> > <title>Sales Operations</title> > <script type="text/javascript" src="/global/prototype/prototype.js"> > </script> > <script type="text/javascript"> > </script> > </head> > <body> > <select id="SelectContract" name="SelectContract"> > <option value="-1">Please select a Contract</option> > <option value="ARGOS">ARGOS</option> > </select> > </body> > </html> > =========FIREBUG HTML PANEL==============> > As you can see, the options tag are fine. > > Sort of struggling here. > > The main code is using AJAX to get a list of options for a select box. > I have a PHP based "makeList" function which can be told to generate > the <options> tags for a list (Contracts, Suppliers, Contacts, Users, > etc). What is the "cleanest" way to supply and update the select > statement? I can produce pretty much anything required, if I know WHAT > is required - hence a nice selection of do''s and don''t''s! > > Any help would be appreciated. > > Kind regards, > > Richard Quadling. >--~--~---------~--~----~------------~-------~--~----~ 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?hl=en -~----------~----~----~----~------~----~------~--~---
Dashs method is much much faster for large select boxes- but since we are all building ajax solutions, a large select box *should* be a thing of the past (replaced with autocompleter) I''ve used it for a dropdown of suburbs on an older non-prototype web app that had an ajax call to load suburbs. On 3/21/07, David Dashifen Kees <dashifen-NT0ononE2K1Wk0Htik3J/w@public.gmane.org> wrote:> > > Alternatively, you can also update the contents of the element > containing the select box. I''ve used that "trick" to try and get around > some of IE''s quirkiness with respect to changing the contents of some > elements. For example, wrap the select element in a div and then > replace the contents of the div with a new select element. If you''ve > observing any events on the select element, though, you''ll want to stop > observing them and then start once more when the replacement is > complete. Actually, I''m not sure you explicitly have to stop, but I''ve > run into situations where you do need to start observation once more > after replacing an element. > > -- Dash -- > >--~--~---------~--~----~------------~-------~--~----~ 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?hl=en -~----------~----~----~----~------~----~------~--~---
On Mar 20, 10:00 pm, Colin Mollenhour <eliteii...-NPSFNn/7+NYVo650/ln6uw@public.gmane.org> wrote:> This has been brought up quite a few times here in this group actually.. > IE doesn''t like updating "select" elements with innerHTML. You need to > use this method > > $(''myselect'').options[i] = new Option(...);You can also use createElement, however since IE will not set the text property properly, append a text node: var opt = document.createElement(''option''); opt.value = ''foo''; opt.appendChild(document.createTextNode(''foobar'')); -- Rob --~--~---------~--~----~------------~-------~--~----~ 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?hl=en -~----------~----~----~----~------~----~------~--~---
I see that a prototype method to deal with this would be useful. Or
maybe a WIKI to have this sort of thing all in one place.
In the end I''m returning a JSON array from the server and then using
$(''SelectContract'').options[i] = new Option(....);
This is working for me in IE7 and FF.
Thank you for your support and replies.
Regards,
Richard Quadling.
On 20/03/07, RobG <rgqld-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org>
wrote:>
>
>
> On Mar 20, 10:00 pm, Colin Mollenhour
<eliteii...-NPSFNn/7+NYVo650/ln6uw@public.gmane.org>
> wrote:
> > This has been brought up quite a few times here in this group
actually..
> > IE doesn''t like updating "select" elements with
innerHTML. You need to
> > use this method
> >
> > $(''myselect'').options[i] = new Option(...);
>
> You can also use createElement, however since IE will not set the text
> property properly, append a text node:
>
> var opt = document.createElement(''option'');
> opt.value = ''foo'';
> opt.appendChild(document.createTextNode(''foobar''));
>
>
> --
> Rob
>
>
> >
>
--
-----
Richard Quadling
Zend Certified Engineer : http://zend.com/zce.php?c=ZEND002498&r=213474731
"Standing on the shoulders of some very clever giants!"
--~--~---------~--~----~------------~-------~--~----~
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?hl=en
-~----------~----~----~----~------~----~------~--~---