1

I am using chosen jquery in select in my lightning component but options are not getting populated in dropdown. My code: component:

<select class='slds-select ranklevel' name='Rank Level'  multiple="false" value="{!v.selectedField}">
 <aura:iteration items="{!v.fieldsList}" var="columnsList">
      <option value="{!columnsList.fieldName}" text="{!columnsList.fieldName}"></option>
  </aura:iteration>
</select>

controller:

var $j = jQuery.noConflict(); 
        $j(".ranklevel").chosen({
        width: '95%', create_option: true, persistent_create_option: false, skip_no_results: true});

I have included all the static resource file needed for chosen and jquery to function

1

I think your problem here is that "text" is not a valid attribute of the html tag, so you may be getting a load of blank options? You probably want something like this instead:

<select class='slds-select ranklevel' name='Rank Level'  multiple="false" value="{!v.selectedField}">
    <aura:iteration items="{!v.fieldsList}" var="columnsList">
        <option value="{!columnsList.fieldName}">
            {!columnsList.fieldName}
        </option>
    </aura:iteration>
</select>

Also, as an aside, looking at the latest version of the chosen jquery plugin (this one: https://harvesthq.github.io/chosen/) it looks as though neither create_option nor persistent_create_option nor skip_no_results are valid parameters to pass when instantiating? This is a list of available parameters for the current version: https://harvesthq.github.io/chosen/options.html but then I guess if you're using an older version you may well be ok!

| improve this answer | |
  • I used the same but still options are not getting loaded. – Jill_sfdc Jan 17 '18 at 17:44
  • @Jill_sfdc Hmm, where are the items in the fieldsList attribute being populated? Can you print them to debug / console somewhere so you can be sure that the data at least is there? – TomB Jan 18 '18 at 10:19
  • I used select2 of jquery and was able to acheive it. Thanks – Jill_sfdc Jan 20 '18 at 13:47
1

I am also facing the same problem, But got a solution after the lot of R&D

Problem is in remote action, It takes some time to fetch data from the controller because of its an asynchronous call, But chosen plugin javascript doesn't wait for the controller response that's why you are facing this problem.

Solution:- you have to change your controller as shown below, I set 500 millisecond time to load the chosen plugin.

doInit: function(component, event, helper) {
         var action = component.get('c.getAppName');
         action.setCallback(this, function(response) {
        var state = response.getState();
             if (component.isValid() && state === "SUCCESS") {
                 console.log('success');
                 component.set("v.accounts", response.getReturnValue());
                 // when response successfully return from server then apply chosen plugin after 500 milisecond
                setTimeout(function(){ 
                    $(".chosen").chosen({
                        search_contains: true,
                        width: "80%"
                    });

                }, 500);  
             }

    });
            $A.enqueueAction(action);
    }

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.