UPDATE
Due to the introduction of the ltng:require, this post is no more a valid solution. Refer to the official Lightning documentation.This post has been more like a request for help, rather than a technical blog post, but it came to be an awesome way to see Salesforce community in action and ready to help!
In the last Dreamforce 14 big Mark presented the Lightning framework for fast development of reusable components (see details here and the awesome Topcoder's track).
Click here for the "Lightning Components Developer’s Guide", well written and clear.
I've noticed a strange behavior regarding external javascript libraries loading.
These are the requirements regarding external script loading:
- You can only load external libraries got from a static resource
- You cannot use the {!$Resource.resourceName} expression because we are not inside a VisualForce page, so you have to simply refer to "/resource/[resourceName]" in your <script> tags
- From page 100: "If you want to use a library, such as jQuery, to access the DOM, use it in afterRender()."
Apparently the last sentence is not true.
The problem arose because I loaded jQuery + Bootstrap and sometimes (and randomly) the Bootstrap plugin did not load because of jQuery was not yet loaded: the cause was certanly the fact that libraries were not loaded sequentially!
TLDR; click here for the solution!
This is what I'm trying to do:
BlogScriptApp.app
<aura:application>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>
<script src="/resource/BlogScripts/jquery.min.js" ></script>
<div id="afterLoad">Old value</div>
</aura:application>
BlogScriptAppController.js
({
doInit : function(component, event, helper) {
try{
$("#afterLoad").html("VALUE CHANGED!!!");
console.log('doInit: Success');
}catch(Ex){
console.log('doInit: '+Ex);
}
},
doneRendering : function(component, event, helper) {
try{
$("#afterLoad").html("VALUE CHANGED!!!");
console.log('doneRendering: Success');
}catch(Ex){
console.log('doneRendering: '+Ex);
setTimeout(function(){
try{
$("#afterLoad").html("VALUE CHANGED!!!");
console.log('doneRendering-Timeout: Success');
}catch(Ex){
console.log('doneRendering-Timeout: '+Ex);
}
}, 100);
}
}
})
BlogScriptAppRenderer.js
({
afterRender : function(){
this.superAfterRender();
try{
$("#afterLoad").html("VALUE CHANGED!!!");
console.log('afterRender: Success');
}catch(Ex){
console.log('afterRender: '+Ex);
}
}
})
This is what I get in the console
doInit: ReferenceError: $ is not defined afterRender: ReferenceError: $ is not defined doneRendering: ReferenceError: $ is not defined doneRendering-Timeout: Success
This means that in the last app event (aura:doneRendering) we don't have the libraries loaded, and that the only way to do it is to detach from the current execution and use the "setTimeout" method to call asynchronously the needed code.
No surprise that this could not work if the jQuery library took too long to load
One of the suggestions was to use RequireJS on the app, but the problem is the same: if the external scripts are not loaded, the "require" method does not exists and you cannot load its configuration.
In this case RequireJS would allow to load in the correct order all the libraries (for instance jQuery, than bootstrap, then another lib ...), like in this example:
BlogRequireJSApp.app
<aura:application>
<aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/>
<script src="/resource/RequireJS" ></script>
<div id="afterLoad">Old value</div>
</aura:application>
BlogRequireJSAppController.js
({
doneRendering : function(component, event, helper) {
try{
helper.loadRequire(component);
console.log('doneRendering: Success');
}catch(ex){
console.log('doneRendering: '+ex);
setTimeout(function(){
try{
helper.loadRequire(component);
console.log('doneRendering-Timeout: Success');
}catch(ex){
console.log('doneRendering-Timeout: '+ex);
}
}, 100);
}
}
})
BlogRequireJSAppHelper.js
({
loadRequire : function(component) {
require.config({
paths: {
"jquery": "/resource/BlogScripts/jquery.min.js?",
"bootstrap": "/resource/BlogScripts/boostrap.min.js?"
}
});
require(["jquery"], function($) {
require(["bootstrap"], function(bootstrap, chartJS) {
$("#afterLoad").html("VALUE CHANGED!!!");
});
});
}
})
This is what I get in the console
doneRendering: ReferenceError: require is not defined doneRendering-Timeout: Success
This way you'll have the scripts loaded in the correct order usign the RequireJS library: anyway if the RequireJS library is not yet loaded (it depends by your data connection) you'll see another exception at the end of the log
Here comes the Salesforce community!
I posted a question on the SF developer forums and got a super cool response.
From that response I came up with a simple solution that uses dynamic script loading and one event fired: this solution is a simpler reinterpretation of the forum's one to make it easier to understand.
BlogRequireJSDinamic.app
<aura:application>
<aura:handler event="forcelogic2:BlogRequireJSEvent" action="{!c.initJS}"/>
<aura:registerEvent type="forcelogic2:BlogRequireJSEvent" name="requireJSEvent"/>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<div id="afterLoad">Old value</div>
</aura:application>
BlogRequireJSDinamicController.app
({
/*
Sets up the RequireJS library (async load)
*/
doInit : function(component, event, helper){
if (typeof require !== "undefined") {
var evt = $A.get("e.forcelogic2:BlogRequireJSEvent");
evt.fire();
} else {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.src = "/resource/RequireJS";
script.type = 'text/javascript';
script.key = "/resource/RequireJS";
script.helper = this;
script.id = "script_" + component.getGlobalId();
var hlp = helper;
script.onload = function scriptLoaded(){
var evt = $A.get("e.forcelogic2:BlogRequireJSEvent");
evt.fire();
};
head.appendChild(script);
}
},
initJS : function(component, event, helper){
require.config({
paths: {
"jquery": "/resource/BlogScripts/jquery.min.js?",
"bootstrap": "/resource/BlogScripts/boostrap.min.js?"
}
});
console.log("RequiresJS has been loaded? "+(require !== "undefined"));
//loading libraries sequentially
require(["jquery"], function($) {
console.log("jQuery has been loaded? "+($ !== "undefined"));
require(["bootstrap"], function(bootstrap) {
console.log("bootstrap has been loaded? "+(bootstrap !== "undefined"));
$("#afterLoad").html("VALUE CHANGED!!!");
});//require end
});//require end
}
})
This is what I get in the console
RequiresJS has been loaded? true jQuery has been loaded? true bootstrap has been loaded? true
What has happened?
When the app loads (init event) the doInit function tries to understand if the RequireJS library has been loaded. If so fires a BlogRequireJSEvent event. If not yet loaded, dynamically creates a <script> tag with the path to RequireJS, attaching an onload handler, which in fact will inform that the library has been loaded with the same event.
The same app is also an handler for the BlogRequireJSEvent event trhough the initJS function: it will load sequentially jQuery and Bootstrap libraries: this way you are pretty sure libraries will be loaded in the correct order.
The next step in the solution given in the forums is to make a component that does all the work and fires an event that can be handled from anywhere in your app / components set.
All the code above has been packaged into a GitHub repository.
Enjoy!
