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" <t...@crowdersoftware.com> 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 <vincentbas...@gmail.com> 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.
>
> > <select class="list" id="kindoffabric" name="kindoffabric">
> > <option selected="selected" value=""></option>
> > <option value="DENIM">DENIM</option>
> > <option value="KNIT">KNIT</option>
> > <option value="LEATHERS">LEATHERS</option>
> > <option value="SWEATERS">SWEATERS</option>
> > <option value="WOVEN">WOVEN</option>
> > </select>
> > <script type="text/javascript">
> > 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));});
>
> > </script>
>
> > <div id="selectsubkindoffabric"><select class="list"
> > id="subkindoffabric" name="subkindoffabric">
> > <option value="">[ Select Kind of Fabric first ]</option>
> > </select>
>
> > </div>
> > <div id="selectfabricid"><select class="list" id="fabricid"
> > name="fabricid">
> > <option value="">[Select a Knit/Weave]</option>
> > </select>
>
> > </div>
> > <script type="text/javascript">
> > 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));});
>
> > </script>- 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
-~----------~----~----~----~------~----~------~--~---

Reply via email to