I wrote this function to make "combo boxes" out of ordinary select
fields.
document.observe(''dom:loaded'',function(){
var combo = function(evt){
var elm = evt.element();
if ($F(elm) == ''Other...''){
var w = elm.getWidth() + ''px'';
var theId = elm.id;
//following var should be all one line!
var txt = ''<input type="text" name="''
+ elm.name + ''" id="'' +
theId + ''" style="width:'' + w + '';"
/>'';
if(!window.comboBackup) window.comboBackup = new Object();
window.comboBackup[theId] = elm.replace(txt);
$(theId).activate().observe(''blur'',function(e){
var t = e.element();
if($F(t) == t.defaultValue){
t.replace(window.comboBackup[theId]);
$(theId).options.selectedIndex = 0;
}
});
}
}
$$(''select.combo'').invoke(''observe'',''change'',combo);
});
(demo here)
http://scripty.walterdavisstudio.com/combo.html
Looking at it, I can see that it''s not up to modern coding standards
-- it doesn''t look much like the other examples I see flying around on
this list. But I am not sure where to start cleaning it up and making
it better. It works, gets the job done, but there are some places
where I am simply concatenating a big string, and that feels like I''m
missing an opportunity to do a more elegant job.
Can anyone offer any suggestions?
Also, how would you go about adding the "Other..." option using the
same script? It just occurred to me that if you did this, it would
degrade more gracefully in the absence of script if that were the
case. I recall reading quite a few examples on this list where IE was
unwilling to add options to a select without some really heavy blows
to the head.
Thanks in advance,
Walter
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Walter,
1) "new Object()" could be easily replaced with object literal -
"{ }"
2) window.comboBackup is a not a good idea (i.e. polluting global
object)
3) string concatenation can be replaced with either explicit element
creation or a template (if performance doesn''t matter)
I haven''t tested it but give it a shot:
document.observe(''change'', function(e) {
var element = e.element();
if (!$F(element) == ''Other...'') return;
if (!element._comboBackup)
element._comboBackup = { };
element._comboBackup = element.replace(
new Element(''input'', {
type: ''text'',
id: element.id
}).setStyle({ width: element.getWidth() + ''px'' });
);
element.activate().observe(''blur'', function(e) {
var t = e.element();
if ($F(t) == t.defaultValue) {
t.replace(element._comboBackup);
element.options.selectedIndex = 0;
}
});
})
Best,
kangax
On Apr 19, 11:22 am, Walter Lee Davis
<wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org>
wrote:> I wrote this function to make "combo boxes" out of ordinary
select
> fields.
>
> document.observe(''dom:loaded'',function(){
> var combo = function(evt){
> var elm = evt.element();
> if ($F(elm) == ''Other...''){
> var w = elm.getWidth() + ''px'';
> var theId = elm.id;
> //following var should be all one line!
> var txt = ''<input type="text"
name="'' + elm.name + ''" id="'' +
> theId + ''" style="width:'' + w +
'';" />'';
> if(!window.comboBackup) window.comboBackup = new Object();
> window.comboBackup[theId] = elm.replace(txt);
> $(theId).activate().observe(''blur'',function(e){
> var t = e.element();
> if($F(t) == t.defaultValue){
> t.replace(window.comboBackup[theId]);
> $(theId).options.selectedIndex = 0;
> }
> });
> }
> }
>
$$(''select.combo'').invoke(''observe'',''change'',combo);
>
> });
>
> (demo here)
>
> http://scripty.walterdavisstudio.com/combo.html
>
> Looking at it, I can see that it''s not up to modern coding
standards
> -- it doesn''t look much like the other examples I see flying
around on
> this list. But I am not sure where to start cleaning it up and making
> it better. It works, gets the job done, but there are some places
> where I am simply concatenating a big string, and that feels like
I''m
> missing an opportunity to do a more elegant job.
>
> Can anyone offer any suggestions?
>
> Also, how would you go about adding the "Other..." option using
the
> same script? It just occurred to me that if you did this, it would
> degrade more gracefully in the absence of script if that were the
> case. I recall reading quite a few examples on this list where IE was
> unwilling to add options to a select without some really heavy blows
> to the head.
>
> Thanks in advance,
>
> Walter
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
Three little words: Oh. My. G*d. Thanks for opening my eyes like this. Walter On Apr 19, 2008, at 12:25 PM, kangax wrote:> document.observe(''change'', function(e) {--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Forgot to mention that the snippet is based on event delegation (you could check for className of event.element() in a handler). That should make it fast and element independent : ) - kangax On Apr 19, 12:45 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:> Three little words: Oh. My. G*d. > > Thanks for opening my eyes like this. > > Walter > > On Apr 19, 2008, at 12:25 PM, kangax wrote: > > > document.observe(''change'', function(e) {--~--~---------~--~----~------------~-------~--~----~ 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 put this up at http://scripty.walterdavisstudio.com/combo2.html I made a few changes, one because there was a hanging semicolon in the original you kindly posted, a couple of others in the (unsuccessful) process of figuring out why it wouldn''t work. It works as far as replacing the field, but anything you type in the field is immediately replaced with a new empty field when you blur away. It''s as though the "test for default" is always returning true. The upshot is that once you replace the field, it will never hold on to any input or return to the original picker. My (working but ugly) version is at http:// scripty.walterdavisstudio.com/combo.html for comparison purposes. Thanks again for your suggestions, I hope that I can get them to work. Walter On Apr 19, 2008, at 12:25 PM, kangax wrote:> I haven''t tested it but give it a shot:--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Sorry, that should have been: ... if ($F(elm) != ''Other...'') return; ... - kangax On Apr 19, 3:59 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:> I put this up athttp://scripty.walterdavisstudio.com/combo2.html > > I made a few changes, one because there was a hanging semicolon in > the original you kindly posted, a couple of others in the > (unsuccessful) process of figuring out why it wouldn''t work. > > It works as far as replacing the field, but anything you type in the > field is immediately replaced with a new empty field when you blur > away. It''s as though the "test for default" is always returning true. > The upshot is that once you replace the field, it will never hold on > to any input or return to the original picker. > > My (working but ugly) version is at http:// > scripty.walterdavisstudio.com/combo.html for comparison purposes. > > Thanks again for your suggestions, I hope that I can get them to work. > > Walter > > On Apr 19, 2008, at 12:25 PM, kangax wrote: > > > I haven''t tested it but give it a shot:--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Yay! That works. Now one last question. In my fumbling around trying to make it work, I went down this road of thought: Maybe the "new Element" stuff doesn''t like to create a new object that has the same ID as another object already in the DOM. So I added this little _t to the end of the substituted field ID. Is this really necessary? Or is it handled by the replace() function? If I build up a new element ( and I moved my element creation out of the replace parentheses, just to see if I could find the place where it was breaking) will I have to worry about the ID clash, or is it only a concern if you try to add a second instance of an ID to the DOM? Thanks again for all your help. Walter On Apr 19, 2008, at 6:32 PM, kangax wrote:> > Sorry, > that should have been: > > ... > if ($F(elm) != ''Other...'') return; > ... > > - kangax >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Walter, Element constructor shouldn''t really care if there''s an element with the same id. Inserting those elements into the DOM is what matters. On the other hand, I won''t be surprised if IE has some glitches about this. What exactly doesn''t work when you replace an element with the one that has the same id? - kangax On Apr 20, 1:44 pm, Walter Lee Davis <wa...-HQgmohHLjDZWk0Htik3J/w@public.gmane.org> wrote:> Yay! That works. Now one last question. > > In my fumbling around trying to make it work, I went down this road > of thought: > > Maybe the "new Element" stuff doesn''t like to create a new object > that has the same ID as another object already in the DOM. So I added > this little _t to the end of the substituted field ID. > > Is this really necessary? Or is it handled by the replace() function? > If I build up a new element ( and I moved my element creation out of > the replace parentheses, just to see if I could find the place where > it was breaking) will I have to worry about the ID clash, or is it > only a concern if you try to add a second instance of an ID to the DOM? > > Thanks again for all your help. > > Walter > > On Apr 19, 2008, at 6:32 PM, kangax wrote: > > > > > Sorry, > > that should have been: > > > ... > > if ($F(elm) != ''Other...'') return; > > ... > > > - kangax--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
It does work for me, but when I wasn''t able to make your cool version work, I was casting about for reasons (missed the obvious one) and was wondering if that was why it wasn''t working. So this was more of a general question about making objects with the same ID. I am going to go back through and factor those changes I made (unique id for the replacement text field) back out, and test the whole thing over at Browsercam. Thanks again for your help. Walter On Apr 20, 2008, at 2:48 PM, kangax wrote:> What exactly doesn''t work when you replace an element with the > one that has the same id?--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
Okay, this is now working how I want it. I also made the Other... thing an injection into the form if you have enabled JavaScript, so I don''t get any inputs that simply say Other... http://scripty.walterdavisstudio.com/combo2.html Thanks again for your help, I''ve learned at least two really valuable tricks here. Walter On Apr 20, 2008, at 9:46 PM, Walter Lee Davis wrote:> > It does work for me, but when I wasn''t able to make your cool version > work, I was casting about for reasons (missed the obvious one) and > was wondering if that was why it wasn''t working. So this was more of > a general question about making objects with the same ID. I am going > to go back through and factor those changes I made (unique id for the > replacement text field) back out, and test the whole thing over at > Browsercam. > > Thanks again for your help. > > Walter > > On Apr 20, 2008, at 2:48 PM, kangax wrote: > >> What exactly doesn''t work when you replace an element with the >> one that has the same id? > > > >--~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---