Hello Everyone,

I am having difficulty getting chosen to work wih webforms. The module works perfectly in the backend and with views, but I do not know what to do to make it work with webforms. Am I missing something? Thanks

Comments

sophiekovalevsky’s picture

I'm having the same problem, not just only with webform but actually the select box doesn't show up as chosen its suposse to be.

eliosh’s picture

I solved with something like this:

function HOOK_form_alter(&$form, &$form_state, $form_id){
  $form['#attached']['library'][] = array('chosen', 'drupal.chosen');
}
macman911’s picture

Hi @eliosh, where does that code go? Thanks

eliosh’s picture

You have to build a new custom module and put that code inside.
Just for completeness, here is my working code (with parameters for multiple options)

function MYMODULENAME_form_alter(&$form, &$form_state, $form_id){
  if(substr($form_id, 0, 19) == "webform_client_form"){
    $form['#attached']['library'][] = array('chosen', 'drupal.chosen');
    $form['#attached']['js'][] = array(
      'data' => array(
        'chosen' => array(
          'multiple' => array(
            'submitted[contatti][altre_province][]' => true
          ),
          'max_selected_options' => array(
            'submitted[contatti][altre_province][]' => 5
          ),
        ),
      ),
      'type' => 'setting',
    );
  }
}
JadH’s picture

@eliosh Can you elaborate a bit about your solution?

eliosh’s picture

JadH: what kind of information do you need?

JadH’s picture

@eliosh
will the solution solve the issue on individual webforms or all webforms?
will I have to target each
in my webforms on its own to trigger chosen?

eliosh’s picture

@JadH
To trigger chosen on all webform, the code is this:

function MYMODULENAME_form_alter(&$form, &$form_state, $form_id){
  if(substr($form_id, 0, 19) == "webform_client_form"){
    $form['#attached']['library'][] = array('chosen', 'drupal.chosen');
  }
}

If you need to customize a single webform, you have to:

  1. Find the correct $form_id
  2. Add the js settings as in comment #4

Hope it helps you. If you need more info, i'm here :-)

rbryer’s picture

I'm having the same issue with Webforms. In fact the only form that seems to be correctly working is the admin page for the Chosen module itself?

I have turned off JS aggregation and can see that the chosen.js was not being added to any form other than its own admin oage.

I have created a module as described in #8 called chosen_webform and as a result I can see that the chosen.js file is being included. And the chosen.jquery.min.js library.

<script type="text/javascript" src="http://xxxx.org/sites/all/modules/chosen/chosen.js?v=1.0"></script>
<script type="text/javascript" src="http://xxxx.org/sites/all/libraries/chosen/chosen.jquery.min.js?v=0.10.0"></script>

I have a selector set as select:visible (the default). But it is still not effecting and of the select elements on the page.

As I said the correct 'chosen' select is only displaying on the admin/config/user-interface/chosen screen. Nowhere else.

Is there anything else I am supposed to do? I have tried both the alpha4 and the dev version. Both do the same.

TBarina’s picture

Same problem here.
The strange thing is that one of my webforms behaves correctly with chosen select working properly even without code in #8.

Then I built a couple of new webforms but I cannot have them work with chosen select even if I use code in #8.

I tried and investigated everywhere but I cannot fix it.

Could anyone help?

Many thanks

rbryer’s picture

Issue summary: View changes

Hi,

I have updated to the latest dev version, but still have issues with this widget on WebForm. By comparing a working page with a non working page I have found this issues as being with the configuration parameters. A working page has this

"chosen":{"selector":"select",
	"minimum_single":"Always Apply",
	"minimum_multiple":"Always Apply",
	"minimum_width":"200",
	"options":{"disable_search":false,
		"disable_search_threshold":"Never Apply",
		"search_contains":true,
		"placeholder_text_multiple":"Choose some options",
		"placeholder_text_single":"Choose an option",
		"no_results_text":"No results match",
		"width":"200",
		"inherit_select_classes":true},
	"multiple":{"chosen_minimum_single":false,"chosen_minimum_multiple":false,"chosen_disable_search_threshold":false},
	"max_selected_options":{"chosen_minimum_single":false,"chosen_minimum_multiple":false,"chosen_disable_search_threshold":false}
	},

But a webform is missing the last section and has only this

"chosen":{"selector":"select",
	"minimum_single":"Always Apply",
	"minimum_multiple":"Always Apply",
	"minimum_width":"200",
	"options":{"disable_search":false,
		"disable_search_threshold":"Never Apply",
		"search_contains":true,
		"placeholder_text_multiple":"Choose some options",
		"placeholder_text_single":"Choose an option",
		"no_results_text":"No results match",
		"width":"200",
		"inherit_select_classes":true}
},

To make this work at all I have a custom module with the following

chose_webform.module

<?php

function chosen_webform_form_alter(&$form, &$form_state, $form_id){
  if(substr($form_id, 0, 19) == "webform_client_form"){
    $form['#attached']['library'][] = array('chosen', 'drupal.chosen');
  }

}

chosen_webform.info

name = Chosen Webform
description = Enables the Chosen module on Webforms (inhouse development, Zomarc Tech)
core = 7.x

If I save out the non working webform page and then add the missing lines it works just fine.... any ideas how I correct this?

rbryer’s picture

Okay so I have just answered my own question!!! And I think this is actually a bug. Referring to #4 it has code to set the two missing parameters but specifies them for a field called submitted[contatti][altre_province][]. But from my code above it was apparent that as long as you have these parameters set FOR ANYTHING then the widget works. I have changed my module to...

chosen_webform.module

<?php

function chosen_webform_form_alter(&$form, &$form_state, $form_id){
  if(substr($form_id, 0, 19) == "webform_client_form"){
    $form['#attached']['library'][] = array('chosen', 'drupal.chosen');
    $form['#attached']['js'][] = array(
      'data' => array(
        'chosen' => array(
          'multiple' => array(
            'this_can_be_anything' => false
          ),
          'max_selected_options' => array(
            'this_can_be_anything' => false
          ),
        ),
      ),
      'type' => 'setting',
    );
  }
}

chosen_webform.info

name = Chosen Webform
description = Enables the Chosen module on Webforms (inhouse development, Zomarc Tech)
core = 7.x

Note the two parameters are set for a field called 'this_can_be_anything'. It does not matter. It would appear that a sensible default is not being applied if these are not set.
But if you set them for anything then it uses them as a default.

With the above module enabled this works for Webform fields .... and it is simply awesome!!

Dave Reid’s picture

Status: Active » Closed (cannot reproduce)

With the latest beta1 and beta2 releases, I can confirm this works out of the box with Webform select elements and no additional code required.

The JS settings code referred to in #12 is a couple releases old.

rbryer’s picture

I was using 7.x-2.0-alpha4+13-dev. With this module in place and everything worked fine.

I installed and upgraded to beta2 and disabled my module and now nothing works at all. Not even the admin form for Chosen has the Chosen select boxes.

rbryer’s picture

Version: 7.x-2.0-alpha4 » 7.x-2.0-beta2
Component: Documentation » Code
Status: Closed (cannot reproduce) » Active

I have had to revert back to http://ftp.drupal.org/files/projects/chosen-7.x-2.0-alpha4.zip.

Beta 2 does not work with webforms, or in fact anything else? Simply reverting back to this version with the code applied in #12 made the widget work.

Dave Reid’s picture

Status: Active » Postponed (maintainer needs more info)

I just tested Beta 2 with a clean copy of Webform. Did you read the release notes and update to the v1.1.0 version of the Chosen library?

Dave Reid’s picture

BTW the chosen module page not having chosen is on purpose, so that in case anything went wrong with the library, you could disable it. You need to go to another page to actually test it out.

rbryer’s picture

Yes I have v1.1.0 - which I initially tried to download with the drush plugin - but did not work. So I reinstalled it manually (as I think the drush plugin removed what I already had before it errored). Its now correctly installed as per the Status Page and it is working with the alpha4-dev version.

Removing chosen from the admin form is very confusing. In previous iterations it was the only form that I could actually get it to work on. But yes I did test it on other forms and it was not including the *.js or *.css files on any of them. I don't see how 'anything can go wrong with the library' other than it does not work. And you would disable it from the Modules page anyway (or drush).

Don't get me wrong, this is a fantastic feature... but its been the bane of my project from day one. At one point it worked for user=1 but no others, then not on webforms, then releases seem to break everything. I have a deadline now so can't further test and will have to go with what I have working. I will however come back to this next week.

Dave Reid’s picture

@rbryer: That's a valid point on not seeing Chosen on the admin form. I'll consider reverting that change.

I'll leave this as needs more info because I still cannot duplicate any errors with Webform using a fresh install of Core + webform 3.x. Will need someone to test the latest module version and library version and confirm.

rbryer’s picture

I will pick this up again next week with the latest version and a real world site. I can always get this to work if I hack a page and add the correct css, js and config data. What I don't understand is the mechanism by which this are/or are not being added. Now I know what I'm looking for I can at least highlight the symptoms. As before, this is a great bit of kit and has saved me from a total UI nightmare ... but only when I can get it to work!!

heyyo’s picture

I have the same bug than rbryer, on my webform node, chosen files js/css are not loading.
But in webform edition mode it's working properly.

Which is crazy, is that on my development machine, it's working properly, the only difference is that chosen/webform settings has been sent with features/strongarm and the version of PHP (dev is 5.3 and in production PHP 5.4)

Dave Reid’s picture

Version: 7.x-2.0-beta2 » 7.x-2.x-dev
Status: Postponed (maintainer needs more info) » Active

I think I have this figured out. Looks like there is a bug in Webform that removes all the #pre_render callbacks from select elements when used in Webforms, which prevents Chosen from working correctly. I'm going to file an issue against Webform, and also figure out a workaround for Chosen.

heyyo’s picture

I have found somehting interresting, I'm using "select or other" module to add an option other on my select field.
When this option is checked, chosen is working on my production website.
On my dev website it doesn't matter both are working(other... checked or unchecked).
So I suppose the weight of module chosen/webform/select_or_other could be the difference between my dev and my prod causing this bug.
I will check that tomorrow.
EDIT: I was wrong it wasn't working also on my dev website. Chosen was loaded correctly on my dev website because I had also on this webform a date component.
So it confirms your assumption on pre-render cancelled with select component, and my issue regarding webform with several pages is a duplicate of this issue. If I have a date component on the second page, Chosen is loaded correctly.

joelpittet’s picture

upperholme’s picture

Any progress on this issue? I've just installed this module so that I can improve the UI on my webforms, and spent hours trying to get it to work at all on my site. Using the current dev version i was able to get the Chosen plugin to work on non-webform select fields, but none of my webform select fields want to play.

@Dave-Reid - what's the link for the issue you field for the Webform module? I had a quick look there but couldn't find it.

Vako’s picture

I followed all the suggestions here and still unable to make Webforms work with Chosen.

In the Chosen configuration I have the following:
Minimum number of options for multi select : 5
Apply Chosen to the following elements: select, select:visible, .chosen-select, edit-submitted-desired-area

Vako’s picture

...also for some reason, when I enable Chosen, the CKEditor stops working!

cirrus3d’s picture

Had the same problem. The only way I managed to solve this is by:

- Uninstalling this module
- Keeping the chosen library in sites/all/libraries
- adding the required files in preprocess

function mytheme_preprocess_page(&$variables) {
  // You can use preprocess hooks to modify the variables before they are passed
  // to the theme function or template file.
  drupal_add_js('sites/all/libraries/chosen/chosen.jquery.min.js');
  drupal_add_css('sites/all/libraries/chosen/chosen.min.css');
}

- executing chosen from my theme's js file (I had created a ".chosen-select" class in the webform field prior to that)

$('select.chosen-select').chosen();

It's hardcoded but it works. Hell, you can even pull the files from a cdn (http://cdnjs.com/libraries/chosen)

MarcoPBazz’s picture

#25 suggestion woked for me.

darkodev’s picture

@MarcoPBazz I think you meant that #28 worked for you.

@cirrus3d Thanks for the tip. I was transforming views exposed filters from text into select lists and trying to apply Chosen, but it never saw them. I'm now forcing it with $(selector of your choice).chosen()

MarcoPBazz’s picture

Ops! Sorry, of course i meant #28 :-o