+ Start a Discussion
Andrew Aldis 15Andrew Aldis 15 

jquery not loading in Lighting Experience

Hello,

I am  using a datatable component in a sfdc lighting component, when I veiw the component in Salesforce Classic it loads and looks fine, however in lighting experience the jquery components do not load.  A copy of my cod eis below

Component
<aura:component controller="ActivityFirmComponentControllerSCRewrite" implements="force:appHostable,flexipage:availableForAllPageTypes,force:hasRecordId">
  <ltng:require styles="{! $Resource.    datatable + '/DataTables-1.10.16/media/css/jquery.dataTables.min.css'}"
                    scripts="{!join(',',
                             $Resource.jquery224 ,
                             $Resource.datatable + '/DataTables-1.10.16/media/js/jquery.dataTables.min.js')
                             }" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <aura:attribute name="modalData" type="String" access="GLOBAL" description="The page data"/>
    <aura:attribute name="parentId" type="String" description="The Firm Id to be passed to the query." />
    <aura:attribute name="urlEvent" type="String"/>
    <aura:attribute name="urlTask" type="String"/>
    <aura:attribute name="urlCall" type="String"/>
    <aura:attribute name="urlEdit" type="String"/>
    <aura:attribute name="Spinner" type="boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    <aura:attribute name="AllActivities" type="List"/>
    <aura:handler event="aura:waiting" action="{!c.waiting}"/>
    <aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
    <c:OFI_Modal class="slds-fade-in-open slds-modal--large" header="All Activities">
        <aura:if isTrue="{!v.Spinner}">
            <div aura:id="spinnerId" class="slds-spinner_container">
                <div class="slds-spinner--brand  slds-spinner slds-spinner--large slds-is-relative" role="alert">
                    <span class="slds-assistive-text">Loading</span>
                    <div class="slds-spinner__dot-a"></div>
                    <div class="slds-spinner__dot-b"></div>
                </div>
            </div>
        </aura:if>
        <center>
        <lightning:buttonGroup >
            <lightning:button  class='topBtn' label="New Event" onclick="{!c.goToUrl}"></lightning:button>
            <lightning:button  class='topBtn' label="New Task" onclick="{!c.goToUrl}"></lightning:button>
            <lightning:button  class='topBtn' label="Log a Call" onclick="{!c.goToUrl}"></lightning:button>
        </lightning:buttonGroup>
      </center>
        <div class="slds-m-around_large"  style="overflow: auto; overflow-y: hidden;">
          <table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="0" width="100%" >
              <thead>
                  <tr >
                      <th style="color:#005fb2" >Due Date</th>
                      <th style="color:#005fb2">Primary Contact</th>
                      <th style="color:#005fb2">Activity Type</th>
                      <th style="color:#005fb2">Subtype</th>
                      <th style="color:#005fb2">Subject</th>
                      <th style="color:#005fb2" class=".slds-has-flexi-truncate">Description</th>
                      <th style="color:#005fb2">Assigned To</th>
                      <th style="width:5%;color:#005fb2">View</th>
                  </tr>
              </thead>
              <tbody>
                <aura:iteration  items="{!v.AllActivities}" var="a">
                  <tr style="background-color:white; " class="dataRow">
                      <td>{!a.actDueDate}</td>
                      <td>{!a.actPrimaryContact}</td>
                      <td>{!a.actType}</td>
                      <td>{!a.actSubType}</td>
                      <td>{!a.actSubject}</td>
                      <td>{!a.actFullDesc}</td>
                      <td>{!a.actAssigned}</td>
                      <td class='view'><lightning:button class='rowBtn' variant="base" label="View" title="{!a.actId}" onclick="{! c.goToRecord }"/></td>

                  </tr>
                </aura:iteration >
              </tbody>
            </table>
        </div>
        <aura:set attribute="footer">
            <lightning:button label="Close" onclick="{!c.closeModal}"></lightning:button>
        </aura:set>
    </c:OFI_Modal>
    <div aura:id="backdrop" class="slds-backdrop slds-backdrop--open"></div>
</aura:component>

Component.js

({
  scriptsLoaded: function(component, event, helper) {
    console.log('Script loaded..');
  },

  init: function(component, event, helper) {
    var modalData = component.get("v.modalData");
    var parentId = component.get("v.modalData.parentId");
    //call apex class method

    var action = component.get('c.getAllActivities');
    action.setParams({
      "parentId": component.get("v.modalData.parentId"),
      "modalData": component.get("v.modalData")
    });
    action.setCallback(this, function(response) {
      //store state of response
      var state = response.getState();
        console.log('state is '+state);
      if (state === "SUCCESS") {
          console.log('state is success');
        //set response value in lstOpp attribute on component.
        component.set('v.AllActivities', response.getReturnValue());
        
        // when response successfully return from server then apply jQuery dataTable after 500 milisecond
        setTimeout(function() {
            console.log('timeout function set');
          var table = $('#tableId').DataTable();
                        console.log('table is '+table);
          // add lightning class to search filter field with some bottom margin..
          $('div.dataTables_filter input').addClass('slds-input');
            console.log('add class');
          $('div.dataTables_filter input').css("marginBottom", "10px");
                        console.log('add css');

        var order = table.order();
            table
            .order( [ 0, 'desc' ] )
            .draw();
             console.log('order');
            
        }, 500);
                console.log('500ml');
          
      }
    });
    component.set("v.parentId", parentId);
    console.log('check point 2');

    var urlEvent = "/setup/ui/recordtypeselect.jsp?ent=Event&retURL=%2Fa07J000000F0rlH&save_new_url=%2F00U%2Fe%3Fwhat_id=" + parentId + "&retURL" + parentId;
    var urlTask = "/setup/ui/recordtypeselect.jsp?ent=Task&status=Completed&retURL=/a07J000000F0rlH&save_new_url=%2F00T%2Fe%3Ftitle%3DCall%26what_id=" + parentId + "&followup=0%26tsk5%3DCall%26retURL" + parentId;
    var urlCall = "/setup/ui/recordtypeselect.jsp?ent=Task&tsk12=Completed&Task&tsk5=Call&Task&retURl=%2Fapex%2FredirectToNewTask?rId=" + parentId + "&save_new_url=%2F00T%2Fe%3Ftitle%3DCall%26retURL%3D%252F%2Fapex%2FredirectToNewTask?rId=" + parentId + "&retURl=%2Fapex%2FredirectToNewTask?rId=" + parentId + "&what_id=" + parentId;
    component.set("v.urlEvent", urlEvent);
    component.set("v.urlTask", urlTask);
    component.set("v.urlCall", urlCall);
    console.log('check point 3');
    $A.enqueueAction(action);
  },
Tejender Mohan 9Tejender Mohan 9

Hey

Can you please post a screenshot of the error?

Andrew Aldis 15Andrew Aldis 15
There is no error, the jquery just does not load and the afterScriptsLoaded="{!c.scriptsLoaded}" does not fire.
Raj VakatiRaj Vakati
Move you Init code into scriptsLoaded and try ... 
 
scriptsLoaded: function(component, event, helper) {
    var modalData = component.get("v.modalData");
    var parentId = component.get("v.modalData.parentId");
    //call apex class method

    var action = component.get('c.getAllActivities');
    action.setParams({
      "parentId": component.get("v.modalData.parentId"),
      "modalData": component.get("v.modalData")
    });
    action.setCallback(this, function(response) {
      //store state of response
      var state = response.getState();
        console.log('state is '+state);
      if (state === "SUCCESS") {
          console.log('state is success');
        //set response value in lstOpp attribute on component.
        component.set('v.AllActivities', response.getReturnValue());
        
        // when response successfully return from server then apply jQuery dataTable after 500 milisecond
        setTimeout(function() {
            console.log('timeout function set');
          var table = $('#tableId').DataTable();
                        console.log('table is '+table);
          // add lightning class to search filter field with some bottom margin..
          $('div.dataTables_filter input').addClass('slds-input');
            console.log('add class');
          $('div.dataTables_filter input').css("marginBottom", "10px");
                        console.log('add css');

        var order = table.order();
            table
            .order( [ 0, 'desc' ] )
            .draw();
             console.log('order');
            
        }, 500);
                console.log('500ml');
          
      }
    });
    component.set("v.parentId", parentId);
    console.log('check point 2');

    var urlEvent = "/setup/ui/recordtypeselect.jsp?ent=Event&retURL=%2Fa07J000000F0rlH&save_new_url=%2F00U%2Fe%3Fwhat_id=" + parentId + "&retURL" + parentId;
    var urlTask = "/setup/ui/recordtypeselect.jsp?ent=Task&status=Completed&retURL=/a07J000000F0rlH&save_new_url=%2F00T%2Fe%3Ftitle%3DCall%26what_id=" + parentId + "&followup=0%26tsk5%3DCall%26retURL" + parentId;
    var urlCall = "/setup/ui/recordtypeselect.jsp?ent=Task&tsk12=Completed&Task&tsk5=Call&Task&retURl=%2Fapex%2FredirectToNewTask?rId=" + parentId + "&save_new_url=%2F00T%2Fe%3Ftitle%3DCall%26retURL%3D%252F%2Fapex%2FredirectToNewTask?rId=" + parentId + "&retURl=%2Fapex%2FredirectToNewTask?rId=" + parentId + "&what_id=" + parentId;
    component.set("v.urlEvent", urlEvent);
    component.set("v.urlTask", urlTask);
    component.set("v.urlCall", urlCall);
    console.log('check point 3');
    $A.enqueueAction(action);
  },

 
Andrew Aldis 15Andrew Aldis 15
No, that does not seem to work.  The scripts loaded never seems to get called.  It is a weird issue, in classic the exact same lighting component works perfectly but in lighting experience it simply won't load the jquery.
Nitin Shukla 26Nitin Shukla 26
Just increase sometime in setTimeOut function, as of now it is 500 millisecond(MS), just increase it to 1000 or 2000 MS. It should work. if your server is returning more data and if it will take more than 500MS then jquery won't be applied. In classic view it was not happenning because Classic is little fast in compare to Lightning as in lightning so many other things also gets loaded Parallel  
 
Andrew Aldis 15Andrew Aldis 15
No, dive tried to change it to 2000 and 5000, and nothing happened.  Thanks though.