You need to sign in to do that
Don't have an account?
Saurabh Kulkarni 84
event.getSource().getLocalId() returning attribute as it is instead of attribute value
Hello All,
I have a situation where aura:iteration is running inside tbody of table to generate dynamic rows. Inside this row, I have a lightning:buttonIcon which has the aura id which is nothing but an attribute. When I do onclick of this buttonIcon which calls my controller method. When i try to fetch the aura id value it returns the attribute as it is instead the value.. Here's my example
I have a situation where aura:iteration is running inside tbody of table to generate dynamic rows. Inside this row, I have a lightning:buttonIcon which has the aura id which is nothing but an attribute. When I do onclick of this buttonIcon which calls my controller method. When i try to fetch the aura id value it returns the attribute as it is instead the value.. Here's my example
<table> <thead> .. </thead> <tbody> <aura:iteration items="{!v.myList}" var="obj"> <tr> <td> <lightning:buttonIcon aura:id="{!obj.Sequence}" iconName="utility:add" onclick="{!c.addRow}" size="x-small"/> </td> </tr> </aura:iteration> </tbody> </table> ------ addRow : function (component,event,helper){ var a = event.getSource().getLocalId(); console.log('a '+a); //THIS RETURNS --> a {!obj.Sequence} } -----
you can use dirctly like
var a = event.getSource().get("v.title");
console.log('a '+a);///Retun title value
The above mentioned target keyword will work HTML tags.
Regards
Vijay
All Answers
As per the documents in aura iteration aura:id wont give dynamic id values. So we cann't get dynamic id in this case.
I recomended to insted of using aura:id use any another attribute and get it into js.
Ex: I'm using title here.
<lightning:buttonIcon title="{!obj.Sequence}" iconName="utility:add" onclick="{!c.addRow}" size="x-small"/>
addRow : function (component,event,helper){
var a = event.target.getAttribute("title");
console.log('a '+a);
}
try this if it's not helpful to you let me know.
Regards
Vijay
It's good to know the reason why it was not working.
I tried the way you mentioned, but it still does not work. Now the console log output is --> a null
can you please let me know other way?
Also, I noticed that when I use html elements inside iteration, they do not support onclick method call. Is this intentional again?
Thanks,
Saurabh
you can use dirctly like
var a = event.getSource().get("v.title");
console.log('a '+a);///Retun title value
The above mentioned target keyword will work HTML tags.
Regards
Vijay
Also from Event docs: Markup JS Code:
I had a JSON object stored in an object field which contains the sequence number. This sequence number I wanted to fetch when a row was actioned.
Regards,
Saurabh Kulkarni
Thanks for that solution.
I can't believe how difficult it has been to get the data from a table's row.
I must be missing something.
However, your index solution has allowed me to move forward.
I'll finish my code next week and post the result.
Had to search for the solution again myself and came across Maichal's again.
So, I hope this helps others understand what is required:-
In your controller, you want to get the index of the iteration when the change method is fired from the input.
Use the "name" or "title" attribute on the input method and invent a variable such as 'idx' to populate it..
The value of 'idx' has to come from the interation's indexVar.
Now the component's onchange can retrieve and use the index value.