In my component, if the resources (jquery,DataTable) load before the enqueueAction (asynchronous) finishes, my Data table displays the following:
If the enqueueAction finishes before the resources load, the table works correctly. Is there a good way to ensure that the resources don't load until after the enqueueAction OR to redraw the element once the enqueueAction has finished so that the table doesn't indicate it is empty? Here is my code:
Controller
({
jqueryLoaded: function (component, event, helper){
$('#example').ready(function() {
$('#example').DataTable({
});
} );
console.log('jquery loaded');
},
doInit: function(component, event, helper) {
var updateSols = component.getEvent("updateSolutions");
updateSols.fire();
},
pullSolutions: function(component, event, helper) {
var solAction = component.get("c.getSolutions");
solAction.setCallback(this, function(response) {
var state = response.getState();
if (component.isValid() && state === "SUCCESS") {
console.log(state);
component.set("v.solutions", response.getReturnValue());
}
else {
console.log("Failed with state: " + state);
}
});
$A.enqueueAction(solAction);
},
})
Component
<ltng:require scripts="{!$Resource.jQuery224 + ',' + $Resource.DataTable}" afterScriptsLoaded="{!c.jqueryLoaded}"/>
<aura:registerEvent name="updateSolutions" type="c:UpdateSolutionsEvent"/>
<aura:handler name="updateSolutions" event="c:UpdateSolutionsEvent" action="{!c.pullSolutions}"/>
<table id="example" class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate" title="Solution Number">Number</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Solution Name"> Name</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.solutions}" var="sol">
<tr class="slds-hint-parent">
<th class="slds-size--1-of-5" scope="row"><a class="slds-text-link" href="{!'submit-inquiry?id=' + sol.Id}">{!sol.SolutionNumber}</a></th>
<td class="slds-size--4-of-5">
<div class="slds-truncate">{!sol.SolutionName}</div>
</td>
</tr>
</aura:iteration>
</tbody>
</table>