3

I have code that iterates over a list. for some reason the onclick method does not seem to fire. Is there something wrong in my code below? Also how can I get the index id of the clicked row ?`

<aura:iteration items="{!v.txList}" var="tl" indexVar="index">
<tr>
    <td>
        <div class="slds-truncate"  >{!tl.dateCreatedFormatted}</div>
    </td>
    <td>
        <aura:if isTrue="{!tl.status == 'Sent'}">
            <ui:outputCurrency aura:id="{!index}"  class = "red" value="{!tl.amount}" click = "{!c.handleRowClick}"/>
        </aura:if>
        <aura:if isTrue="{!tl.status == 'Received'}">
            <ui:outputCurrency aura:id="{!index}"  class = "green" value="{!tl.amount}" click = "{!c.handleRowClick}"/>
        </aura:if>

    </td>

    <td>
        <div class="slds-truncate" >{!tl.transactionId}</div>
    </td>
    <td>
        <div class="slds-truncate" >{!tl.status}</div>
    </td>

</tr>

Controller.js

handleRowClick: function(component, event, helper) { 
    console.log("Row clicked");     

},
  • can you add details of what you would like to do on ui:outputCurrency click? – Praveen Apr 10 '17 at 12:23
0

You've got a couple of small problems.

First, notably, aura:id does not support merge syntax, so you've literally named your elements {!index}. While you can use aura:id to find all the elements, it's not really necessary in this case, because we do happen to know which row was selected based on the event.target.

The relevant documentation for aura:id states:

aura:id doesn't support expressions. You can only assign literal string values to aura:id.

Second, if you're really interested in capturing a click for the entire row, consider setting it on your tr element directly:

<tr onclick="{!c.handleRowClick}">
  <!-- omitted for brevity -->
</tr>

Of course, you could choose to attach the handler to each individual element, as in your example, but it won't handle clicks made in the whitespace that comprises the row around the elements.

The easiest way to identify your row is to use a dataset attribute somewhere:

<tr onclick="{!c.handleRowClick}" data-row-index="{!index}">
  <!-- omitted for brevity -->
</tr>

Which is accessed in your code as follows:

handleRowClick: function(component, event, handler) {
    var target = event.target;
    while(target && !target.dataset.rowIndex) {
        target = target.parentNode;
    }
    if(target) {
        console.log(target.dataset.rowIndex);
    }
}

This code simply walks up the DOM hierarchy until it finds the element that has a rowIndex attribute.

If you're not familiar with dataset, make sure you read it on MDN. The most important part to know is that hyphens, as demonstrated above, convert the next letter to uppercase, since we can't literally use a hyphen in a variable name.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.