3

I am using a jQuery widget within my lightning application. The jQuery widget is simply a multi select input which calls a function on selection:

<!-- component -->

<ltng:require scripts='/resource/jQueryMultiSelect/multiselect/js/jquery.multi-select.js'/>

<aura:registerEvent name="insertTaskContact" type="c:insertTaskContact"/>

<div id="multiselect">
  <label class="slds-form-element__label" for="Contact-Email">
    {!v.label} <!-- not shown above for brevity -->
  </label>
  <div class="slds-form-element__control">
    <div class="slds-select_container">
      <select class="slds-select" multiple="multiple">
      </select>
    </div>
  </div>
</div>
<!-- /component -->


//helper.js
$('#multiselect select').multiSelect({

        afterSelect: function(contactid_taskid){

            var myExternalEvent = window.$A.get("e.c:insertTaskContact"); 
            console.log(myExternalEvent); //returns undefined
            myExternalEvent.fire();

            }
        }
    });

Recently this started failing. Looking into it, it seems that the window.$A.get() method is returning an undefined rather than the event "insertTaskContact".

I am able to fire that event if I do it within another method that is called directly from the component:

<!-- component -->
<button onclick="{!c.btnClick}">test</button>

//controller.js
btnClick: function(c, e, h){
  var evt = $A.get("e.c:insertTaskContact");
  console.log(evt); //displays correct event obj
}

I am wondering, since this is being called from the jQuery callback, if that seems to be affecting the ability to grab the event.

When I do console.log(window.$A) within the function, it appears that it is grabbing it. But window.$A.get grabs nothing.

Has anything recently changed that would have caused this to stop working? This exact code worked a few days ago. I am wondering if there is some new security feature that is blocking this script from calling the event?

Thank you!

2

Solved it! The issue was that the jQuery callback function did not have access to the context. The way to fix it was to use an additional option within the jQuery event:

//helper.js
$('#multiselect select').multiSelect({

    afterInit: function(ms){
        var that = this;
        that.insertEvent = $A.get('e.c:insertTaskContact');
    },

    afterSelect: function(contactid_taskid){

        var myExternalEvent = this.insertEvent; 
        myExternalEvent.fire();

        }
    }
});

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.