0

I need to get an input filed (let's say an email field) inside a table with a wrapper list iteration. OnFocusout is what I am using right now which will get the row number of the table as aura:id. And if we change data/input details, I can update list with row number and maintain structure of table. This is not useful for my situation. I need to use onKeyup , updateOn="keyup" but i need to get row number to update the wrapper list. How do I approach this logic.

Let's say I have 10 rows of data, i am iterating a table of 10 rows with ID as 0,1,2,3,... If I can get row number while using keyup event, i can manage my logic.

I think I can use dataset (something like data-value) but I'm not sure how.

<table style="margin: 0 auto;width:90%;" 
           class="slds-table slds-table--edit slds-table--fixed-layout slds-table--resizable-cols slds-no-cell-focus" 
           role="grid">
<!-- Start of Table Header -->
<thead><tr> <th>  <!-- headers of table --> </th> </tr></thead>
<tbody> <tr> <td> <!-- a few rows of data --> </td> 
<aura:iteration items="{!v.contactList}" var="con">
<td role="gridcell" class="slds-cell-edit mtd">
        <input type="text" class="selectEle" 
                            id="{!'Phone-'+con.rowCount}" 
                            value="{!con.phone}" 
                            onfocusout="{!c.changedPhone}"/>
       </td></tr> 
</aura:iteration>
</tbody>
</table>

above code is working fine. I am showing contactList wrapper in the table and rowCount is the reference that I am using to update the values. I need something which working with onkeyup in Input section. Please help. Thank you.

  • Please provide a sample of the code you are using. – gNerb Jun 13 '19 at 15:39
  • can you add code snippet? – Pranay Jaiswal Jun 13 '19 at 15:44
  • you can not bind the expression to aura:Id. <div aura:id="{!index}" /> markup doesn't give any error , but when u find the cmp component.find(index) . it returns nothing – sdandamud1 Jun 13 '19 at 16:08
  • Please check the post once again. I have updated the code. – AshSFcloud Jun 14 '19 at 5:16
0

enter image description hereif you wrap your input with span or div .it'll be very easy to get current row index by using dataset i edited my answer with tested code based on your code please try and let me know.

cmp

    <aura:attribute name="listOfDocuments" type="List" default="[{'Name' : 'Document1', 'id':'1'},{'Name' : 'Document2','id':'2'},{'Name' : 'Document3','id':'3'}]"/>
    <aura:attribute name="currentindex" type="string"></aura:attribute>

    <table 
           class="slds-table slds-table--edit slds-table--fixed-layout slds-table--resizable-cols slds-no-cell-focus" 
           role="grid">
<!-- Start of Table Header -->
        Current Index : {!v.currentindex}
<thead><tr> <th>  <!-- headers of table --> </th> </tr></thead>
        <tbody>
            <aura:iteration items="{!v.listOfDocuments}" var="con" indexVar="index">
                <tr>
                    <td> <!-- a few rows of data --> </td> 

                    <td role="gridcell" class="slds-cell-edit mtd">
                        <span data-record="{!index}" onkeyup="{!c.keypfunc}" >
                            <input type="text" class="selectEle" 
                            id="{!'Phone-'+con.rowCount}" 
                            value="{!con.phone}" />
                        </span>

                    </td>
                </tr> 
            </aura:iteration>
        </tbody>
</table>

controller.js

({
  keypfunc: function (cmp, evt) {
    var index = evt.currentTarget.dataset.record;
    cmp.set("v.currentindex",index);
    setTimeout(this.keyupaftertwosec(cmp,evt),2000); 

    },
   keyupaftertwosec : function(cmp,evt){
   //do logic here what you want in after 2 seconds
   }
})
  • Are we getting data-value or data-row-index in controller here?? I mean is that index or index2 ?? I am getting nothing in console.log when I use above code @sdandamud1 am I doing any mistake? – AshSFcloud Jun 14 '19 at 5:15
  • updated with Tested code and result image. – sdandamud1 Jun 14 '19 at 13:45
  • I am getting confused here. You are using onFocusout again. Why? I specified that onfocusout is working fine but I need to get it worked done using onkeyup @sdandamud1 . Please let me know if there is possibility. – AshSFcloud Jun 19 '19 at 4:35
  • i prepare solution by using your code, if you want you can replace onfocusout event with onkeyup event it 'll works for both of them, but make sure onkeyup event fires for every key stroke. – sdandamud1 Jun 19 '19 at 14:12
  • Thank you. It worked after changing onfocusout with onkeyup. I request you to edit your answer one last time and update. Also please let me know if there is a JS code to fire onkeyup after one second. It is keep firing like while typing. – AshSFcloud Jun 21 '19 at 4:57
0

If you use <lightning:input /> instead of html <input /> things will be easier.

For getting information of every changing data inside lightning:input , could be possible using onchange="{!c.changedPhone}" , which will serve your purpose of using onkeyup event.

For getting index of changed value you can use following technique:-

<lightning:input type="text" value="{!valueBindingVariable}" name="{!index}" onchange="{!c.changedPhone}" />

and inside controller you can use following code to get index of changing data

changedPhone : function(cmp, evt, hlp) {
    let index = parseInt(evt.getSource().get("v.name"));
    console.log(index);
}

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.