Left On The Web / Updating multiple select boxes in Symfony using AJAX

Updating multiple select boxes in Symfony using AJAX

For a client, I had to present a bunch of select boxes where users could select a genre, then a sub-genre based on your genre of choice, then a second level of sub-genres based on the selected sub-genre. My first choice was to use the symfony AJAX options, and updating the sub-genre select box with the observe_field function. This worked, the sub-genre got updated as I selected the main genre. However, for some reason, when selecting a sub-genre, the list with the second level of sub-genres was not updated. Weirdness! And then, in some bright moment, I decided to try and only update the options inside the sub-genre selectbox. And behold, it now worked. So, I am using observe_field to observe the genre selectbox, and another observe_field to observe the sub-genre selectbox. As a genre is selected, the options of the sub-genre are being reloaded. As a sub-genre is selected, the 2nd level sub-genres are being reloaded. It's a little trick, and I'm still not sure why my initial approach fails (as I took care that the replacing selectbox had the same name/id as the original one with no options). However, it works and it's a clean solution I guess.
August 13, 2007 - tags: symfony

Add comment

Comments

Bert-Jan: I had a strange problem a few months back. In a div I had two droppable area’s as part of a form. When the form was submitted with ajax and the div was refreshed, the droppables needed to be declared again. No problem, just stuff the droppable_element call inside the ajax response and set script=true and all went well.. except in IE6/7. It seems when you redeclare a droppable prototype creates a javascript problem and you can’t drag things anymore as it will give a script error immediately.
After a few hours playing with it I found the solution is to remove the droppable (Droppable.remove(‘div’

IIRC) before renewing the element. Suddenly, everything worked perfectly. The same does not apply to draggables, but I guess it’s good practise to keep the scripting model as clean as possible.

August 14, 2007

stefan: Well, the (IMHO) great feature of symfony is that you don’t need to code a single letter of Javascript anymore to create wonderful rich GUI’s. However, still you’ll have trouble like above I’m afraid, so you still need to be able to think “out of the box” I guess.

August 14, 2007

Cucumber Jones: Stefan, can you please drop me an email regarding Metal Machine Music Live/ Thanks.

August 17, 2007

excessivedemon: I was able to achieve this effect using another method.. I’m not sure how I to call it.. didn’t use any observe_fields or such.. just a plain basic recursive call, which is really really very efficient.. you can check it at http://www.opets.com – create an account with any username and password.. then create a pet.. you’d see a bunch of categories and sub categories and sub sub categories to the nth level.. and they get updated via AJAX whenever 1 of the select boxes change values.. o.. and here’s another one : http://euroxtrade.baguiocommunity.com/web/auto/create

I can post the codes if anyone wants to have a look at it..

August 21, 2007

Isi: excessivedemon,

I wouldn’t mind seeing this code. This is something many of us have come across here and there and would be nice to see how you approach it vs my approach vs Bert-Jan above.

Thanks

August 24, 2007

March 29, 2008

Left on the Web

Updating multiple select boxes in Symfony using AJAX

Comments

Upcoming events

Tags

Navigate