function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Ayan SarkarAyan 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
Faisal BahadurFaisal Bahadur

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);
                    }
                    
Ayan SarkarAyan Sarkar
HI Faisal.. Buddy can you explain how it works? I mean the flow..... OR if you can share a link from where I can understand this
 
Faisal BahadurFaisal Bahadur

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
AhmedPotAhmedPot
Thanks Faisal. adding data attribute worked fine.
AmulAmul
Hi Faisal Bahadur,

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?
 
Radhika BansalRadhika Bansal
Hi Faisal,

event.currentTarget is working successfully when Lockerservice update is disabled. Do you have any solution when LockerService is enabled?

Regards
Radhika Bansal
BlindsydeBlindsyde
@Faisal

I got this to work for a product Id but I'd like to take everything  in the object, instead of: 
data-productid="{!product.ProductId}"

var productId = event.target.dataset.productid

I'd like to do: 
data-product="{!product}"

var btnData = event.target.dataset.product;
But I keep getting "[object Object]"

Is it possible to pass the entire object or would i need to do it in parts: 
data-productId="{!product.ProductId}" data-productCode="{!product.ProductCode}"  data-productName="{!product.ProductName}"

Also I have a secondary question, using: 
<button />

How do I get the element in the controller so I can use the following type of code against it: 
if($A.util.hasClass(btn, "red")){
	$A.util.removeClass(btn, "red");
	$A.util.addClass(btn, "blue");
}
  
var btn = event.getSource();
only works on <aura:button />