2

I'm trying to call functions in the right order in my lightning component. First, I would like to call doInit, then, I would like to trigger a function after the script is loaded. How can I achieve this?

component.cmp

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <ltng:require
        scripts="{!$Resource.myCustomJsLibrary}" afterScriptsLoaded="{!c.scriptsLoaded}" 
    />

</aura:component>

controller.js

({
    doInit: function(cmp){
        var action = cmp.get("c.getValueFromDatabase");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.settings", response.getReturnValue());
            }
        });
     $A.enqueueAction(action);
    },  
    scriptsLoaded : function (cmp) {
        cmp.get("v.settings");      
    }
})
Improve this question
7
  • Where is the function definition you want to call after the scrpitLoaded? – itzmukeshy7 May 1 '17 at 11:20
  • You just need to call the method inside the c.scriptsLoaded which will execute once the scripts have been loaded. Here is the order or execution: Order of execution – itzmukeshy7 May 1 '17 at 11:27
  • I update my post. I trying first run doinit when its finished run scriptLoaded – John May 1 '17 at 11:31
  • Okay, you want to do something with the value of settings attribute? but here it's not sure that the value of settings is available because we are making an asynchronous request to fetch data from the server which may take some time and you will get the default value. – itzmukeshy7 May 1 '17 at 11:35
  • The settings value is JSON with settings for my js library. Therefore, it needs to be geted before loading the script. – John May 1 '17 at 11:43
2

There is no need of the init handler to fetch the data from the server because it's an Asynchronous Ajax request which may load before the scriptsLoaded method call or maybe not sometimes;

So remove the init handler and put the JS library initialization method inside the scriptsLoaded method, in this first get the JSON data from the server in the same way we are doing in the init handler:

Component

<aura:component>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />

    <ltng:require
        scripts="{!$Resource.myCustomJsLibrary}" afterScriptsLoaded="{!c.scriptsLoaded}" 
    />

</aura:component>

Controller

({
    doInit: function(cmp){
        /* initalize attributes here */
    },  
    scriptsLoaded:function(cmp){
        var action = cmp.get("c.getValueFromDatabase");
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set("v.settings", response.getReturnValue());
                /* Here we have the JSON data to initalize the JS library */
                /* Add the code here to initalize the JS library using the JSON data loaded from the server */ 
            }
        });
        $A.enqueueAction(action);
    }
})
Improve this answer
1
  • This is it - great working. – John May 1 '17 at 12:06

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.