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.
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
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/createI 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
: September 4, 2009
Bart: Hello! I have a problem with this. Can you give me the solution?September 17, 2009
orlando personal injury attorneys: I love using these options. There is so much that you can get from this. The options are endless. November 3, 2011
Backlink Indexing Software: "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!"Strange indeed! I thought about this and realized it could be a result of a seg fault if you're coding AJAZ by hand...?
January 26, 2012
What Is Walking Pneumonia: 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.February 9, 2012
Upcoming events
17-02-2012: Techademy Trainingday February 23-02-2012: Zend Webinar: Git for Subversion Users