Example of how to use jquery Chosen or Select2

Hi Greyhead

I have tried adding in Chosen to my CF4 set up but without success.

I have read the posts here: https://www.chronoengine.com/forums/posts/f5/t97437.html?page=1 and have been to your demo page it links to and this is exactly what I am after. However, as this demo site doesnt have any instructions I am finding it hard to replicate. Would you be able to give me some quick instructions to implement it?

I have uploaded the extracted contents of https://github.com/harvesthq/chosen/releases/download/v1.5.0/chosen_v1.5.0.zip to the server to the location in your post (I just changed the reference to chronoform5 to chronoform in the Custom Code OnLoad to line up with my CF4 installation). I renamed the JS file per your post. I have a standard single selection drop down box on my chrono form which works as it should. I then added the class chosen-single to the dropdown, but the drop down on the front end hasnt changed.

I can see on the front end that the CSS and JS referenced in the OnLoad Custom Code are loaded and that the drop down has the chosen-single class.

Any chance you could give me some pointers on integrating either Chosen or Select2 to CF4?

Many thanks

Hi rakatatech,

If this is for a new form on Joomla! 3 I'd suggest that you build it with CFv5 rather than CFv4. That may make it simpler to debug the problems.

Please post a link to the form so I can take a quick look.

Bob

Thanks Bob, I have PM you some further details.

Hi rakatatech,

I made a copy of your form and the Chosen selector is working there. After some hunting I spotted that you had the class set as chosen-single and not chosen-select.

Bob

Many thanks for your help Bob; a simple typo on the class ! Anyway, it appears to be fine now so thank you again for debugging it for me. I have sent you a thank you for a coffee or 2.

Cheers

I have just applied the settings to a double drop down situation but this has an issue. The first drop down operates fine with the Chosen settings, but when you have selected the choice, the second drop down doesnt refresh to be populated with its data set. If I take the chosen-select class out of the first drop down the 2 drop downs work fine together. Would you have any ideas on how to fix this to work with the Chosen function? Thanks

Hi

If the Chosen set up is applied to the drop down of an Edit form linked from CC4 the Chosen drop down isnt populated with the correct entry from the database; it has the last entry from the data set in it. The drop down is correctly populated if the chosen-select class isnt applied. Any thoughts?

Kind regards

Integrating Chosen / Select2 really makes a difference to the forms and I was just wondering if anyone has any suggestions as to how to get the Chosen / Select2 set up working with a double dropdown set up and to show the correct data when editing a forms data from CC?

Many thanks

Hi rakatatech,

I imagine that all of those things are possible but will take some custom coding to get them set up and working correctly. I've never tried anything beyond the simple replacement.

To set an initial value see this StackOverFlow answer for some suggestions.

The Chosen docs here show that there is an onChange event that you could use to trigger an Ajax call for a second drop-down.

Bob

Many thanks for the reply Bob, I will take look and see if I can piece it together.

Cheers

Hi Bob

I wondered if you ever came back to this for your own curiosity? A worked example of how to set up a Chosen or Select2 for the initial form, plus being displayed on editing the form and working with double drop downs would be really appreciated by myself and other users I am sure.

Thanks

Hi rakatatech,

The post you found should work with CFv4. Please post a link to the form so I can take a quick look.

Bob

PS I've written a new FAQ on using Select with CFv5 - the code for CFv4 would be very similar.