Is there any way to update only modified records in the list that is iterated through aura:iteration. I am trying to get index at row level using event.currentTarget. But event.currentTarget is returning undefined. Is there any solution for this kind of scenario?

Below is my code pattern


 <table class="slds-table slds-table_bordered slds-table_cell-buffer week-table">
    <aura:iteration items="{!v.roleWrappersByBR}" var="item" indexVar="index">
         <tr class="hoursHover"> 
               <td class="roles">
                        {!item.DS_Role} &nbsp; {!item.Duplicate_Role}

               <aura:iteration items="{!v.weekJunctionWrappersByBR}" var="week1" indexVar="index2">
               <td class="hours2" style="{!'background:' + week1.color+';padding:4px'}" data-value="{!index2}" data-row-index="{!index2}">
                     <ui:inputText class="hoursInput" value="{!week1.Hours}" label="{!index2}" updateOn="change" change="{!c.checkWeeksInput}"/>
        <ui:button label="Save Hours" press="{!c.SaveWeeks}" 
                   class="slds-button" disabled="{!v.isReadOnly}"/>


checkWeeksInput : function(component,event,helper){

    console.log('check values ',event.currentTarget,' -- ',event.getSource().get("v.value") );


To get the index from your current code, you can use the following code:

var index = event.target.closest('[data-row-index]').dataset.rowIndex;

Please be aware that this is not IE 11 compatible. If you want an IE 11 compatible solution, move your handler up to the table cell:

<td ... data-value="{!index2}" data-row-index="{!index2}" onchange="{!c.checkWeeksInput}">

(or, alternatively, use a span or div wrapper around the input element; you can catch handlers, there, too)

This simplifies your code to just:

var index = event.target.dataset.rowIndex;

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.