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");      
    }
})
7
  • Where is the function definition you want to call after the scrpitLoaded? May 1, 2017 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 May 1, 2017 at 11:27
  • I update my post. I trying first run doinit when its finished run scriptLoaded
    – John
    May 1, 2017 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. May 1, 2017 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, 2017 at 11:43

1 Answer 1

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);
    }
})
1
  • This is it - great working.
    – John
    May 1, 2017 at 12:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .