> ...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.

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>
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 
For more options, visit this group at 

Reply via email to