You need to sign in to do that
Don't have an account?
PRUTHVI ADMIN
Dynamically change an attribute value from lightning controller
I am trying to explore various concepts in lightning. My requirement is pretty simple. I have a zipped static resource with multiple images. I have used the <img> tag in the component and defaulted its src attribute to one of the images. Created a lightning button in the component definition whose action in the controller will change the 'src' attribute value to a different image. However, I am getting the below error in the console when the button is clicked and the image is not getting changed to a new one. Am I missing something here ?
Error: WARNING: AttributeSet.set(): unable to override the value for 'srcvalue=function (cmp, fn) { return fn.add($A.get("$Resource.SachinImages"),"/SachinImages/1image.jpg"); }'. FunctionCallValues declared in markup are constant.
Component definition:
<aura:component >
<aura:attribute name="srcvalue" type="string" default="{!$Resource.SachinImages+'/SachinImages/1image.jpg'}"/>
<img class="imgclass" src="{!v.srcvalue}" aura:id="imageid" /> <br/> <br/>
<lightning:button onclick="{!c.buttonClickAction}" label="Click to start slide"/>
</aura:component>
Controller:
({
buttonClickAction : function(component, event, helper) {
var btnlabel = event.getSource().get('v.label');
var srcval = component.get('v.srcvalue');
if(btnlabel == 'Click to start slide')
{
var changeNbr = srcval.substring(srcval.lastIndexOf('/') + 1, srcval.lastIndexOf('/') + 2);
var finalvalue = '{!$Resource.SachinImages' + '+' +'\'/SachinImages/' + (Number(changeNbr) + 1) +'image.jpg\'}';
console.log('finalvalue'); -> This value is as expected.
component.set('v.srcvalue',finalvalue);
}
}
})
Error: WARNING: AttributeSet.set(): unable to override the value for 'srcvalue=function (cmp, fn) { return fn.add($A.get("$Resource.SachinImages"),"/SachinImages/1image.jpg"); }'. FunctionCallValues declared in markup are constant.
Component definition:
<aura:component >
<aura:attribute name="srcvalue" type="string" default="{!$Resource.SachinImages+'/SachinImages/1image.jpg'}"/>
<img class="imgclass" src="{!v.srcvalue}" aura:id="imageid" /> <br/> <br/>
<lightning:button onclick="{!c.buttonClickAction}" label="Click to start slide"/>
</aura:component>
Controller:
({
buttonClickAction : function(component, event, helper) {
var btnlabel = event.getSource().get('v.label');
var srcval = component.get('v.srcvalue');
if(btnlabel == 'Click to start slide')
{
var changeNbr = srcval.substring(srcval.lastIndexOf('/') + 1, srcval.lastIndexOf('/') + 2);
var finalvalue = '{!$Resource.SachinImages' + '+' +'\'/SachinImages/' + (Number(changeNbr) + 1) +'image.jpg\'}';
console.log('finalvalue'); -> This value is as expected.
component.set('v.srcvalue',finalvalue);
}
}
})
use below code this will work for you: i hope it helps you.
Let me inform if it helps you and kindly mark it best answer if it helps you so it make proper solution for others
thanks
http://sfdcmonkey.com
All Answers
you can set an attribute by controller, but for access the static resource, use:
buttonClickAction : function(component, event, helper) {
var btnlabel = event.getSource().get('v.label');
var srcval = component.get('v.srcvalue');
if(btnlabel == 'Click to start slide')
{
// var changeNbr = srcval.substring(srcval.lastIndexOf('/') + 1, srcval.lastIndexOf('/') + 2);
var finalvalue = $A.get('$Resource.SachinImages') +'/image.jpg';
console.log('finalvalue: ' + finalvalue);
component.set('v.srcvalue',finalvalue);
}
And it's work!!
Thanks for the response. I tried the below code and it threw me the same error.
var changeNbr = srcval.substring(srcval.lastIndexOf('/') + 1, srcval.lastIndexOf('/') + 2);
var finalvalue = $A.get('$Resource.SachinImages') + '/SachinImages/' + (Number(changeNbr) + 1) + 'image.jpg';
console.log(finalvalue);
component.set('v.srcvalue',finalvalue);
I think its something to do with the way we are trying to change the attribute value of a HTML tag from controller. There must be a different way of doing it.
use below code this will work for you: i hope it helps you.
Let me inform if it helps you and kindly mark it best answer if it helps you so it make proper solution for others
thanks
http://sfdcmonkey.com