2

Our development sandbox has recently moved to Summer '16, and a lightning app/ component that I moved from a Spring '16 box does throws the above error right off the bat. I know that the new Locker Service is enforcing javascript "use strict" but I'm not sure where it's tripping up.

EDIT: code and behavior (see below)

component:

<aura:component access="public" controller="RollCallController" implements="flexipage:availableForAllPageTypes">
<ltng:require scripts="/resource/jquery2_2_3/jquery-2.2.3.min.js,
                       /resource/Bootstrap_3_3_6/bootstrap-3.3.6-dist/js/bootstrap.js"
    styles="/resource/Bootstrap_3_3_6/bootstrap-3.3.6-dist/css/bootstrap.css,
            /resource/SLDS/assets/styles/salesforce-lightning-design-system.css"
    afterScriptsLoaded="{!c.initScripts}"/>
<aura:attribute name="offeringId" type="string" required="true" access="public"/>
<aura:attribute name="Attendees" type="TrainingAttendance__c[]" access="public"/>
<aura:attribute name="Offering" type="TrainingOffering__c" access="public"/>
<aura:attribute name="selectedAttendees" type="String[]" access="public"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div class="slds">
    <div class="slds-page-header" role="navigation">
        <div class="container">
            <div class="" style="width:100%;">
                <div class="slds-page-header" role="banner">
                    <div class="slds-text-heading--label">Roll Call - <ui:outputText value="{!v.Offering.Course_Name__r.Name}"/></div>
                    <div class="slds-truncate">
                        <div class="slds-grid">
                            <div class="slds-col">
                                <h2 class="slds-page-header__title">Offering Id: <ui:outputText value="{!v.Offering.Name}"/></h2>
                                <p>Trainer: <ui.outputText value="{!v.Offering.Trainer__r.FirstName + ' ' + v.Offering.Trainer__r.LastName}"/></p>
                            </div>
                            <div class="slds-col">
                                <p class="slds-text-align--right">Start Date: <ui:outputDate value="{!v.Offering.Date_Start__c}"/></p>
                                <p class="slds-text-align--right">Start Time: <ui:outputText value="{!v.Offering.Time_Start__c}"/></p>
                                <p class="slds-text-align--right">Status: <ui:outputText value="{!v.Offering.Status__c}"/></p>
                            </div>
                        </div>
                    </div>
                </div>
                <button aura:id="massUpdate" class="btn btn-default btn-md massupdbtn slds-button slds-button--neutral" onclick="{!c.showModal}">Update Selected Statuses</button> 
            </div>
        </div>
    </div>

    <div class="modal fade slds-modal slds-fade-in-open " aura:id="modalDlg" role="dialog">
        <div class="modal-dialog slds-modal__container ">
            <div class="modal-content">
                <div class="modal-header slds-modal__header ">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h2 class="slds-text-heading--medium">Attendee Status</h2>
                </div>
                <div class="modal-body slds-modal__content" id="statusPicklist">                    
                    <div class="slds-form-element">
                        <label class="slds-form-element__label" for="select-01">Select Status</label>
                        <div class="slds-form-element__control">
                            <div class="slds-select-container" id="select-01">
                                <ui:inputSelect class="dynamic slds-select" aura:id="status" change="{!c.toggleCancelReasonPicklist}">
                                    <ui:inputSelectOption text="Attended"/>
                                    <ui:inputSelectOption text="No Show" />
                                    <ui:inputSelectOption text="Requested Training"/>
                                    <ui:inputSelectOption text="Wait List"/>
                                    <ui:inputSelectOption text="Pending Approval"/>
                                    <ui:inputSelectOption text="Cancelled"/>
                                    <ui:inputSelectOption text="Registered"/>
                                    <ui:inputSelectOption text="Pending Confirmation"/>
                                </ui:inputSelect>
                            </div>
                        </div>
                    </div>
                    <div class="slds-form-element" id="cancelReasonPicklist">
                        <label class="slds-form-element__label" for="select-02">Reason for Cancellation</label>
                        <div class="slds-form-element__control">
                            <div class="slds-select-container" id="select-02">
                                <ui:inputSelect class="dynamic slds-select" aura:id="cancelReason">
                                    <ui:inputSelectOption text="Registered in Error"/>
                                    <ui:inputSelectOption text="Not Approved" />
                                    <ui:inputSelectOption text="Project Timeline Change"/>
                                    <ui:inputSelectOption text="Rescheduled"/>
                                    <ui:inputSelectOption text="Other"/>
                                    <ui:inputSelectOption text="Class/Webinar Cancelled"/>
                                    <ui:inputSelectOption text="No Response"/>
                                    <ui:inputSelectOption text="Duplicate Registration"/>
                                </ui:inputSelect>
                            </div>
                        </div>
                    </div>
                 </div>
                <div class="modal-footer slds-modal__footer ">
                    <div class="slds-button-group" role="group">
                        <button type="button" class="btn btn-default slds-button slds-button--neutral " data-dismiss="modal" aura:id="save" label="Save" press="{!c.massupdate}" onclick="{!c.massupdate}">Save</button>                    
                        <button type="button" class="btn btn-default slds-button slds-button--neutral " data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="_slds-backdrop _slds-backdrop--open"></div>

    <div class="container">        
        <div class="col-sm-12">
            <!--- Search bar Component 
            <c:SearchBar /> 
            <br/>  
            -->
            <table class="slds-table slds-table--bordered">
                <thead>
                    <tr class="_slds-hint-parent">
                        <th class="slds-cell-shrink" data-label="Select Row">
                            <label class="slds-checkbox">
                                <ui:inputCheckbox aura:id="selectAllBox" class="slds-checkbox" text="" change="{!c.selectAll}"/>
                                <span class="slds-checkbox--faux"></span>
                                <span class="slds-assistive-text">Select Row</span>
                            </label>
                        </th>
                        <th class="slds-text-heading--label slds-truncate" scope="row" data-label="Attendee Name">Attendee Name</th>
                        <th class="slds-text-heading--label slds-truncate" data-label="Account">Account</th>
                        <th class="slds-text-heading--label slds-truncate" data-label="Status">Status</th>
                    </tr>
                </thead>
                <tbody>
                    <aura:iteration items="{!v.Attendees}" var="a">
                        <tr class="slds-hint-parent">
                            <td class="slds-cell-shrink" data-label="Select Row">
                                <label class="slds-checkbox">
                                    <ui:inputCheckbox aura:id="attendeeCheckbox" class="slds-checkbox" text="{!a.Id}" change="{!c.updateSelectedAttendees}"/>
                                    <span class="slds-checkbox--faux"></span>
                                    <span class="slds-assistive-text">Select Row</span>
                                </label>
                            </td>
                            <th class="slds-truncate" scope="row" data-label="Attendee Name"><ui:outputText value="{!a.Attendee_Full_Name__c}"/></th>
                            <td class="slds-truncate" data-label="Account"><ui:outputText value="{!a.Account_Name__c}"/></td>
                            <td class="slds-truncate" data-label="Status"><ui:outputText value="{!a.Attendee_Status__c}"/></td>
                        </tr>
                    </aura:iteration>
                </tbody>
            </table>
        </div>       
    </div>
</div>

</aura:component>

the controller gets past initScripts, but throws an error when I click to show the modal (Action failed: c$TrainingRollCallComponent$controller$showModal [ReferenceError: j$ is not defined]) :

({
initScripts : function(component, event, helper) {
    console.log('initscripts start');
    var j$ = jQuery.noConflict();
    j$("#cancelReasonPicklist").removeClass("show")
        .removeClass("slds-show")
        .addClass("hide")
        .addClass("slds-hide");
    console.log('done initscripts');
},
showModal:function(component) {
        if(component.get("v.selectedAttendees") != ''){
            j$(dlg).modal();
        }else{
            alert('Please Select Any Attendees');
        }
},     
massupdate:function(component, event) {
    var oId = component.get("v.offeringId");
    var checkboxes = component.find("attendeeCheckbox");
    var selected = [];
    for (var i = 0; i < checkboxes.length; i++){
        if(checkboxes[i].get("v.value")){
            selected.push(checkboxes[i].get("v.text"));
        }
    }
    //var recids =   $A.util.json.encode(component.get("v.selectedAttendees"));
    var recids = $A.util.json.encode(selected);
    var status = component.find("status");
    status = status.get("v.value");
    var cancelReason = component.find("cancelReason");
    cancelReason = cancelReason.get("v.value");
    var action = component.get("c.updateStatus");
    action.setParams({
        "offeringId" : oId,
        "attendeeIdList": recids,
        "status": status,
        "cancelReason" : cancelReason
    });
    action.setCallback(this, function(a) {
        var retVal = a.getReturnValue();
        if (a.state == 'SUCCESS') {
            component.set("v.Attendees", retVal);
        } else if (a.state =='ERROR'){
            alert('There has been a problem updating the statuses.  \nPlease select another status, or cancel.');
        }
    });
    $A.enqueueAction(action);
        //alert('Attendees Updated Successfully');
    component.set("v.selectedAttendees", '');
    var selectAllBox = component.find("selectAllBox");
    selectAllBox.set("v.value", false);
},    
doInit : function(component, event, helper) {
    helper.getOfferingAndAttendeeData(component);
},
updateSelectedAttendees : function(component, event) {
    var attr = event.getSource();
    var id = attr.get("v.text");
    if (attr.get("v.value")) {
        if (component.get("v.selectedAttendees").indexOf(id) < 0) {
            component.get("v.selectedAttendees").push(id);
        }
    } else {
        var index = component.get("v.selectedAttendees").indexOf(id);
        if (index > -1) {
            component.get("v.selectedAttendees").splice(index, 1);
        }
    }
},
selectAll : function(component, event){
    var selectedRecs = [];
    var selectVal = event.getSource().get("v.value");
    console.log(selectVal);
    var checkboxes = component.find("attendeeCheckbox");
    console.log(checkboxes.length);
    for (var i = 0; i < checkboxes.length; i++){
        checkboxes[i].set("v.value", selectVal);
        if (selectVal){
            selectedRecs.push(checkboxes[i].get("v.text"));
        }
    }
    component.set("v.selectedAttendees", selectedRecs);
},
toggleCancelReasonPicklist : function(component, event, helper){
    var selectVal = event.source.get("v.value");
    console.log(selectVal);
    if (selectVal == 'Cancelled') {
        j$("#cancelReasonPicklist").removeClass("hide")
            .removeClass("slds-hide")
            .addClass("show")
            .addClass("slds-show");
    } else {
        j$("#cancelReasonPicklist").removeClass("show")
            .removeClass("slds-show")
            .addClass("hide")
            .addClass("slds-hide");
    }
}
})

Can someone shed some light on how I can clean up my javascript so that it adheres to strict mode? Or is there something else going on here that is causing things to go awry?

5

This is not a "use strict" or Content Security Policy issue - looks more like a secure virtual DOM issue and not from your code directly but in one of the 2 libraries you are importing (jQuery /or Boostrap).

We've been testing LS with jQuery 2.2.3 but have not verified the 1.9.1 branch. As an FYI I did find issues with 2.2.0 that jQuery team fixed in 2.2.2

  • 1
    Thanks for the info @DougChasman. I swapped out 1.9.1 with 2.2.3 and got past that, now it seems it's hanging up on my bootstrap js resource (Unable to create locker IIFE: Error: Re-setting of sCallback is prohibited). Have you been testing/verifying against a more current version than 3.3.1? – Leapin Dave May 16 '16 at 18:36
  • 1
    Edit to above comment - same error with latest bootstrap (v3.3.6) – Leapin Dave May 16 '16 at 19:52
  • The fix for the sCallback bug in LockerService has been fixed in the next patch to Summer'16 (I actually fixed it 2 weeks ago but there has not been a release vehicle deployed to production in almost 10 days). I will try out that version of bootstrap in the morning but I suspect it will work with the R0 release scheduled to deploy this Friday (5/20) – Doug Chasman May 17 '16 at 0:08
  • just an update, assuming the R0 update went out: still getting an error with jQuery 2.2.3 / bootstrap 3.3.6... I got a stack trace from the Lightning Inspector chrome extension, starts with c$TrainingRollCallComponent$controller$updateSelectedAttendees [TypeError: Cannot read property 'get' of undefined]. I also disabled Lightning Inspector, but then I just get c$TrainingRollCallComponent$controller$updateSelectedAttendees [TypeError: Cannot read property 'get' of undefined] – Leapin Dave May 23 '16 at 19:58
  • doh, sorry. after disabling I get Uncaught Error: Access denied for insecure view – Leapin Dave May 23 '16 at 20:10

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.