Hi Trailblazers,

working with select2 multiselect picklist . onselect of any picklist i have to call controller function in lightning. please see below code 
 

<aura:component  implements="flexipage:availableForRecordHome">	
    <!--First Add jQuery and Select2 plugin library from static resource Using ltng:require tag-->  
    <ltng:require styles="{! $Resource.select2 + '/select2-4.0.3/dist/css/select2.min.css'}" 
                  scripts="{!join(',', 
                           $Resource.jquery224 ,  
                           $Resource.select2 + '/select2-4.0.3/dist/js/select2.js')
                           }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    
    <!--init handler event call "doInit" function on component load and fetch picklist values-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div class="slds-form-element">  
                            <label for="picklist" style="font-size:medium;"><b>Public Release</b></label> <br/>
                            <select style="width:200px" id="picklist" onchange="{!c.test}" class="select2Class " multiple="multiple" >
                                <option value="All"> All</option>
                                <option value="Yes"> Yes</option>
                                <option value="No"> No</option>
                            </select>
                        </div>

                <div class="slds-form-element">    
                    <button class="slds-button slds-button--brand" onclick="{!c.searchRecord}">Search</button>
                </div>

</aura:component>


//Controller

({

test : function(component,event,helper){
        alert('test');
        
    },

})

onchange is not working ??

Thanks,
Yogesh

 

Hi,
we have create pick list with serach functioanlity using select2 Jquery plug in. we are using html select to create picklist and it has onchange event.
With Select2 JQuery plugin onchange event is not firing.

Component:
<aura:component controller="DCOM_distributor_Picklist_Controller" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction,lightning:actionOverride,forceCommunity:availableForAllPageTypes">
    <ltng:require aura:id="select2" styles="{! $Resource.select2 + '/select2-4.0.3/dist/css/select2.min.css'}" 
                  scripts="{!join(',', 
                           $Resource.jquery224 ,  
                           $Resource.select2 + '/select2-4.0.3/dist/js/select2.js')
                           }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <aura:attribute name="regionID" type="String" />
    <aura:attribute name="distributorID" type="String" />
    <aura:attribute name="picklistValues" type="List" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>    
    <lightning:layoutItem flexibility="auto"> <!-- padding="around-small" -->
        <div class="custom-box">
            Distributor<span class="red slds-p-right_xx-small slds-p-left_xx-small">*</span>:
            <select style="width:70%;height:16px;" aura:id="picklist" class="select2Class" onchange="{!c.onChangeDistributor}">
                
                <aura:iteration items="{!v.picklistValues}" var="item">
                    <option value="{!item.value}"> {!item.label} </option>
                </aura:iteration>     
            </select>
            <!-- <lightning:select value="{!v.distributorID}">       
                <option value="">Choose one...</option>
                <aura:iteration items="{!v.picklistValues}" var="item">
                     <option text="{!item.label}" value="{!item.value}" selected="{item.selected}"/>                       
                    
                </aura:iteration>
            </lightning:select> -->
        </div>
    </lightning:layoutItem> 
</aura:component>

JS Controller:

({
    doInit : function(component, event, helper) {
        
        helper.onloadMethod(component,component.get("v.regionID") );
        
    },
    onChangeDistributor : function(component, event, helper) {
      alert('test');
    },
    scriptsLoaded : function(component, event, helper) {
        console.log('load successfully');
       // active/call select2 plugin function after load jQuery and select2 plugin successfully    
       $(".select2Class").select2({
           placeholder: "Select branch"
       });
    }
})
On pick list selection onchange event should fir and call onChangeDistributor method. But it is not calling. if I comment ltng:require onchage event is getting fired.
Any idea on why it is not wokring onchange event with select2 library.

Thanks in advance
Praveen

I'll preface by saying this is working in other locations, where it is not nested. I have a component (cmp A) nested in a lightning:accordionSection, the component contains a  <aura:attribute name="oppContacts" type="Object[]"/> that is displayed in an aura:iteration. My Controller.js has the following code that allows users to 'clone' the js objects (on save, all objects are inserted in SFDC as Custom_Objects via apex):

    cloneThis : function(component, event, helper){
         console.log(event);
        var cloneObj = {}; 
        cloneObj = Object.assign({}, event.getSource().get("v.name"));
        //cloneObj = event.getSource().get("v.name");

        console.log(cloneObj.role); //test
        var optionsArr = component.get("v.oppContacts");
        console.log(optionsArr);
        optionsArr.push(cloneObj);
        
        //set new clone ref priority to none...doesn't help
        //optionsArr[optionsArr.length-1].priority = 'NONE';
        component.set("v.oppContacts", optionsArr);
        console.log(document.getElementById("cW").innerHTML);
        document.getElementById("cW").innerHTML = document.getElementById("cW").innerHTML;
        console.log('set html!!!');
        
        
        //var bottomMarker = document.getElementById("bottomMarker");
        //bottomMarker.scrollIntoView();
    }

The issue I'm having is that the iteration on the page does not update. I believe this is because of how it's nested, but not sure. Hoping to learn the best way to handle this...maybe rerender.js but again, not sure.

I do log the array after the clone, and it does grow. I can also debug in the cmp as {!v.oppContacts.length} and the length does increase by one with each button push. Button is setup as follows:

<lightning:button name="{!contact}" aura:id="{!contact.name}" value="{!contact.name}" variant="brand" label="Clone" onclick="{!c.cloneThis}" />

An odd behavior I noticed was that if I put two of the same "cmp A"'s on the page, clicking my 'doClone' button in one cmp would rerender the other as expected.

I don't want to add to confusion with a wall of code. I think I have the relevant bits. I pretty sure I'm close because this works on other pages, outside of being nested.

I'll lastly add that I'm a newer developer. Open to any input: general approach, specific, js, etc. Circling back for formatting asap.

I'm having an issue with test methods for some new chatter functionality.

In my test method, if I query for a Public Chatter Group based on the group name, I get 'no rows for assignment' soql error.  If I attempt to insert a Group with that name within the test method, I get a 'DUPLICATE_VALUE, An active or archived group with this name already exists' error.

I'm not sure how to proceed with testing, if the group is not visible within test methods and I can't create it.