3

I have two function that need to be initialized in afterScriptsLoaded.I tried define as below but it prompt error.

 <ltng:require scripts="/resource/unid__jQuery,/resource/unid__highchart" afterScriptsLoaded="{!c.generateChart},{!c.readData}" />

The error is:

Failed to save undefined: Cannot mix expression and literal string in attribute value, try rewriting like {!'foo' + v.bar}: Source

How to define more function in afterScriptsLoaded ?

1
  • Whats the error its throwing ?
    – Monish
    Oct 26, 2015 at 7:58

3 Answers 3

3

afterScriptsLoaded event can call only single method as far as I got from the salesforce doc. You can't call multiple method from that event but if you want to call your second method from your first method you can use following code.

  1. Controller.js

    ({  
    generateChart : function(component, event, helper) {
    
    console.log('first script called');
    component.secondmethod();
    },
    readData: function(cmp, event) {
     console.log('second script called');
    },
    
    })
    
  2. component.cmp

    <ltng:require scripts="/resource/unid__jQuery,/resource/unid__highchart" afterScriptsLoaded="{!c.generateChart}"/>
    <aura:method name="secondmethod" action="{!c.readData}" access="PUBLIC"></aura:method>
    
1
  • This works, but can you edit afterScriptsLoaded="{!c.initScripts}" to afterScriptsLoaded="{!c.generateChart }" so it will be useful for other to refer.Once you done , I will select this as answer.
    – unidha
    Oct 30, 2015 at 5:15
1

The lightning component helper JS artifact exists for functionality that should be called. So in this instance, the two "child" functions to call need to be in the helper.

helper

({
  func1 : function(component){
    //here's one function
  },
  func2 : function(component){
    //here's another
  }
})

The helper is always passed as a parameter to event handlers in the client side JS controller:

client controller

({
  requireEventHandler : function(component, event, helper){
    helper.func1(component);
    helper.func2(component);
  }
})

The above function is the one you bind to in your ltng:require tag in the component.

<ltng:require scripts="/resource/unid__jQuery,/resource/unid__highchart" afterScriptsLoaded="{!c.requireEventHandler}"/>
0

I am not sure if there's a way to call multiple methods using the expression syntax, but even if its there I would suggest you

  1. use a wrapper method which internally calls your required methods and
  2. then you call the wrapper method in the expression.

This will help you if you want to reuse it in different places and also in future if you need to add any validation between the method calls or do some additional stuff you can simply do it in one place.

so it will be like

markup

<ltng:require scripts="/resource/unid__jQuery,/resource/unid__highchart" afterScriptsLoaded="{!c.myMethod}" />

controller

({
generateChart : function() {
    console.log("in generateChart");        
},

readData : function() {
    console.log("in readData");
},

myMethod : function(){
    generateChart();
    readData();
}
})

EDIT :

I didn't test this code. If its not possible to call the controller methods directly within each other (sounds silly), may be we can try moving them to helper.js and call them if possible.

The key takeaway is the concept of calling multiple methods by using a wrapper method not the exact syntax.

3
  • hey vamsi, I tried with your code and I found that we can't directly call the method from component controller itself the way you defined. did you tested it?
    – Himanshu
    Oct 26, 2015 at 9:17
  • i didn't test this. if its not possible to call the controller methods directly within each other, may be we can try moving them to helper and call it Oct 26, 2015 at 9:43
  • yah that is the only way to do that. otherwise I have added my answer which works perfectly :)
    – Himanshu
    Oct 26, 2015 at 9:43

You must log in to answer this question.

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