You need to sign in to do that
Don't have an account?
Ayan Sarkar
passing values to js Controller from Lightning component while calling it on mouse over event
I have a lightning component from which I am retrieving contact records onto an aura:attribute which is as follows:
<aura:attribute name="data" type="Contact[]"/>
after retrieving the result from the controller I am printing it on component using aura:iteration which is as follows:
<aura:iteration items="{!v.data}" var="data">
<tr>
<td><a href="{! '#/sObject/' + data.Id +'/view'}" onmouseover="{!c.mouseOver}">
<p>{!data.Name}</p></a></td>
<td><a href="{! '#/sObject/' + data.Id +'/view'}">
<p>{!data.Phone}</p></a></td>
<td><a href="{! '#/sObject/' + data.Id +'/view'}">
<p>{!data.CreatedDate}</p></a></td>
</tr>
</aura:iteration>
As you can see on the first <td> tag I have used mouseover from where I am calling a js controller method ...
I want that method to be looked like this:
mouseOver : function(component, data){
console.log('data = '+ data);
}
now the 'data' argument I want to pass while the method is called i.e., mouse is hovered on that <td> and the data should be the name i.e., "{!data.name}"
where 'data' is the 'var' for the aura:iteration..
So how to send argument to js controller from component while calling from there only....
please help me its urgent
<aura:attribute name="data" type="Contact[]"/>
after retrieving the result from the controller I am printing it on component using aura:iteration which is as follows:
<aura:iteration items="{!v.data}" var="data">
<tr>
<td><a href="{! '#/sObject/' + data.Id +'/view'}" onmouseover="{!c.mouseOver}">
<p>{!data.Name}</p></a></td>
<td><a href="{! '#/sObject/' + data.Id +'/view'}">
<p>{!data.Phone}</p></a></td>
<td><a href="{! '#/sObject/' + data.Id +'/view'}">
<p>{!data.CreatedDate}</p></a></td>
</tr>
</aura:iteration>
As you can see on the first <td> tag I have used mouseover from where I am calling a js controller method ...
I want that method to be looked like this:
mouseOver : function(component, data){
console.log('data = '+ data);
}
now the 'data' argument I want to pass while the method is called i.e., mouse is hovered on that <td> and the data should be the name i.e., "{!data.name}"
where 'data' is the 'var' for the aura:iteration..
So how to send argument to js controller from component while calling from there only....
please help me its urgent
Hi, Ayan
you can use data attribute and assign the value to the attribute and in controller use event.currentTarget as instance .and get the value of the Name.
<td><a href="{! '#/sObject/' + data.Id +'/view'}" data-record="{!data.Name}" onmouseover="{!c.mouseOver}">
<p>{!data.Name}</p></a></td>
mouseOver : function(component, event){
var selectedItem = event.currentTarget;
var Name = selectedItem.dataset.record;
console.log('data Name = '+ Name);
}
Hi Ayan,
the data- Attribute is HTML Attribute . in this case we use the combination of HTML attribute and lightning Events. first we assign to value to the data element and then access the value thoruh event.currentTarget set the Dom to current Target . and here is the documentation about data- Attribute http://www.w3schools.com/tags/att_global_data.asp
I have created my component like this.
<aura:iteration items="{!v.expenses}" var="expense">
<td>{!expense.amullight__Amount__c}</td>
<td>{!expense.amullight__Client__c}</td>
<td>{!expense.amullight__Date__c}</td>
<td>
<ui:inputCheckbox name="chkbox" aura:id="selectedAccount" value="{!expense.amullight__Reimbursed__c}" click="{!c.fireComponentEvent}"/>
</td>
</tr>
</aura:iteration>
==============================================================================================
on this fireComponentEvent i wish to read the "expense" variable
fireComponentEvent : function(cmp, event) {
}
and wish to pass this to Controller class.
Any idea how we can do this?
event.currentTarget is working successfully when Lockerservice update is disabled. Do you have any solution when LockerService is enabled?
Regards
Radhika Bansal
I got this to work for a product Id but I'd like to take everything in the object, instead of:
I'd like to do: But I keep getting "[object Object]"
Is it possible to pass the entire object or would i need to do it in parts:
Also I have a secondary question, using:
How do I get the element in the controller so I can use the following type of code against it: only works on <aura:button />