10

I have a button in a table in lightning component. I'm trying to get clicked id of the record.

Component markup

    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
        <thead>
            <tr class="slds-text-heading--label">
                <th scope="col">
                    <div class="slds-truncate" title="Name">Name</div>
                </th>
                <th scope="col">
                    <div class="slds-truncate" title="Remove">Remove</div>
                </th>
            </tr>
        </thead>
       <tbody>
            <aura:iteration items="{!v.Items}" var="item">
                <tr>
                    <td>
                        <div class="slds-truncate" title="{!item.Name}">{!item.Name}</div>
                    </td>
                    <td>
                        <form onclick="{!c.removeItem}">
                            <input type="hidden" class="prodclass" value="{!item.Id}" id="{!item.Id}"  />
                            <lightning:button label="Remove" iconName="utility:delete" iconPosition="left" variant="destructive" value="{!item.Id}"/>
                        </form>
                    </td>
                </tr>
            </aura:iteration>
        </tbody>
    </table>

JS Controller

removeItem: function(component, event, helper) {

    var id_str = event.target.getElementsByClassName('prodclass')[0].value;

    console.log(id_str);

}

I'm getting error,

ElementsByClassName is not a function

Appreciate any help on this. Thanks.

2
  • document.getElementsByClassName('prodclass')[0].value returns the value, so the issue is not with getElementsByClassName are you sure you are sharing all your code, why are you using event.target? can you share your event, if any?
    – glls
    Apr 27, 2017 at 2:27
  • @glls Thanks. it's a simple button call. No event involved. I'm trying to get event's parameters to read the current record Id. Apr 27, 2017 at 4:08

3 Answers 3

29

There is no need for a form in your td.

Wrap your button in a div, attach the value to the div via a data- attribute and grab it from the event.currentTarget. Eg:

<div onclick="{!c.removeItem}" data-value="123">
    <lightning:button label="Remove" iconName="utility:delete" iconPosition="left"  variant="destructive" value="123"/>
</div>

Controller method:

removeItem: function(component, event, helper) {
    var ctarget = event.currentTarget;
    var id_str = ctarget.dataset.value;
    console.log(id_str);
}
1
  • 3
    An additional point is that for data-stageName="123" you might expect ctarget.dataset.stageName to work. But the name gets mapped to lowercase so it has to be ctarget.dataset.stagename. So best to avoid camel-casing in the name.
    – Keith C
    Dec 12, 2017 at 13:55
6

I think currently recommended by Salesforce way of passing parameters from button to controller is by using event.getSource(). Please note it will work only on Lightning components (for example on lightning:button and not on standard HTML <button>. For HTML components use event.currentTarget as in other answer) Please consider following example:

Component

<aura:attribute name="colours" type="String[]" default="['red', 'green', 'blue']"/>
<aura:iteration items="{!v.colours}" var="col">
    <lightning:button label="{!'Colour ' + col}" value="{!col}" onclick="{!c.onBtnColourClick}"/><br/>
</aura:iteration>

Controller

onBtnColourClick: function(component, event, helper) {
    var msg = event.getSource().get('v.value');
    //do something with value
    component.set('v.message', msg);
},

This is especially useful in cases like when you need to make a table in which every row has individual button (let's say Delete the record from this row). We have to pass somehow the recordId of record in specific row.

For lightning:button component, you can use name and value attributes to assign value from iterated object.

WARNING: Please note that as time of writing you cannot generate aura:id dynamically, so in the example above writing aura:id="{!col}" and using event.getSource().getLocalId() in controller would give you literally '{!col}' string!

5

The alternative method is to define a new custom component for a row in the table. Make that component have Item as an attribute, then you can read it in the event handler.

<aura:component>
    <aura:attribute name="item" type="Item__c" />
    <tr>
        <td>
            <div class="slds-truncate" title="{!item.Name}">{!item.Name}</div>
        </td>
        <td>
            <lightning:button label="Remove" iconName="utility:delete" iconPosition="left" variant="destructive" onclick="{!c.removeItem}" value="{!item.Id}"/>
        </td>
    </tr>   
</aura:component>

Then the controller for this component would include:

removeItem: function(component, event, helper) {
    var id_str = component.get('v.item').Id;
    console.log(id_str);
}
1
  • This is a nice clean way to do it. Apr 27, 2017 at 14:35

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .