[Proto-Scripty] Re: 3 level nested chained select fields
Thank you T.J.
This is my corrected code with the JSON solution:
I had obviously miss understood the use of bind, also when I wrote
that code I was in a real rush and trying to fight errors so I was
trying a few things to get it to work. I have now corrected the code:
Event.observe('kindoffabric','change', function(element, value) {
$
('subkindoffabric').options.length = 0;
new Ajax.Request( '/app/
lib/list/subkindoffabriclist.html',{
method: 'post',
parameters: { kindoffabricid: $("kindoffabric").value},
onSuccess: function(transport) {
var
opts = transport.responseText.evalJSON();
opts
['subs'].each(function(s,index) {
var opt = document.createElement('option');
opt.text = s;
opt.value = s;
$('subkindoffabric').options.add(opt);
});
}
});
});
//-->
On Mar 13, 6:37 pm, "T.J. Crowder" wrote:
> Hi,
>
> > ...rebuild with the ajax updater so I figure I need to observe the second
> > select field again after it has been reloaded...
>
> Right. And if you keep doing it that way, you'll want to stop
> observing it before you update it (otherwise you're leaving an event
> handler lying around and slowly eating memory).
>
> Your alternate of simply updating the options rather than replacing
> the box seems a better way to go.
>
> FYI, you don't need to use bindAsEventListener in the places you're
> using it. bind() is all you need if you're not binding arguments as
> well as context. I don't quite understand why you're binding those
> functions at all, though: You don't use 'this' within the functions,
> so there's no reason to bind them. The only reason for using bind()
> or bindAsEventListener() is to set 'this' correctly when the function
> is called. Also, you're binding them to 'window' ('this' at the
> global scope is 'window'), which seems a bit odd.
>
> HTH,
> --
> T.J. Crowder
> tj / crowder software / com
> Independent Software Engineer, consulting services available
>
> On Mar 13, 5:34 am, vbastos wrote:
>
>
>
> > I am having trouble updating the third select field after the user has
> > selected an option in the second dropdown.
>
> > As you can see form the code the second select element is completely
> > rebuild with the ajax updater so I figure I need to observe the second
> > select field again after it has been reloaded. The other option I am
> > going for is to change my code so that I update the options of the
> > select field with JSON this way it is not reloaded.
>
> > I would apreciate any suggestions, thank you.
>
> >
> >
> > DENIM
> > KNIT
> > LEATHERS
> > SWEATERS
> > WOVEN
> >
> >
> > function fillsubkindoffabric(event) {
> > new Ajax.Updater( 'selectsubkindoffabric',
> > '/app/lib/list/
> > subkindoffabriclist.html',
> > { method: 'post',
> > parameters:{ kindoffabricid: $
> > ("kindoffabric").value
> > }
> > }
> > );}
>
> > Event.observe(window, 'load', function() {
> > Event.observe('kindoffabric','change',
> > fillsubkindoffabric.bindAsEventListener(this));});
>
> >
>
> > > id="subkindoffabric" name="subkindoffabric">
> > [ Select Kind of Fabric first ]
> >
>
> >
> > > name="fabricid">
> > [Select a Knit/Weave]
> >
>
> >
> >
> > function fillfabricidlist(event) {
> > new Ajax.Updater( 'selectfabricid',
> > '/app/fabric/fabricidlist.html',
> > { method: 'post',
> > parameters:{ kindoffabric: $
> > ("kindoffabric").value,
> > subkindoffabric:
> > $("subkindoffabric").value
> > }
> > }
> > );}
>
> > Event.observe(window, 'load', function() {
> > Event.observe('subkindoffabric','change',
> > fillfabricidlist.bindAsEventListener(this));});
>
> > - Hide quoted text -
>
> - Show quoted text -
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: 3 level nested chained select fields
Hi,
> ...rebuild with the ajax updater so I figure I need to observe the second
> select field again after it has been reloaded...
Right. And if you keep doing it that way, you'll want to stop
observing it before you update it (otherwise you're leaving an event
handler lying around and slowly eating memory).
Your alternate of simply updating the options rather than replacing
the box seems a better way to go.
FYI, you don't need to use bindAsEventListener in the places you're
using it. bind() is all you need if you're not binding arguments as
well as context. I don't quite understand why you're binding those
functions at all, though: You don't use 'this' within the functions,
so there's no reason to bind them. The only reason for using bind()
or bindAsEventListener() is to set 'this' correctly when the function
is called. Also, you're binding them to 'window' ('this' at the
global scope is 'window'), which seems a bit odd.
HTH,
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Mar 13, 5:34 am, vbastos wrote:
> I am having trouble updating the third select field after the user has
> selected an option in the second dropdown.
>
> As you can see form the code the second select element is completely
> rebuild with the ajax updater so I figure I need to observe the second
> select field again after it has been reloaded. The other option I am
> going for is to change my code so that I update the options of the
> select field with JSON this way it is not reloaded.
>
> I would apreciate any suggestions, thank you.
>
>
>
> DENIM
> KNIT
> LEATHERS
> SWEATERS
> WOVEN
>
>
> function fillsubkindoffabric(event) {
> new Ajax.Updater( 'selectsubkindoffabric',
> '/app/lib/list/
> subkindoffabriclist.html',
> { method: 'post',
> parameters:{ kindoffabricid: $
> ("kindoffabric").value
> }
> }
> );}
>
> Event.observe(window, 'load', function() {
> Event.observe('kindoffabric','change',
> fillsubkindoffabric.bindAsEventListener(this));});
>
>
>
> id="subkindoffabric" name="subkindoffabric">
> [ Select Kind of Fabric first ]
>
>
>
> name="fabricid">
> [Select a Knit/Weave]
>
>
>
>
> function fillfabricidlist(event) {
> new Ajax.Updater( 'selectfabricid',
> '/app/fabric/fabricidlist.html',
> { method: 'post',
> parameters:{ kindoffabric: $
> ("kindoffabric").value,
> subkindoffabric:
> $("subkindoffabric").value
> }
> }
> );}
>
> Event.observe(window, 'load', function() {
> Event.observe('subkindoffabric','change',
> fillfabricidlist.bindAsEventListener(this));});
>
>
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
