12

I'm trying to get the label of the button the user has clicked on by using event.getSource, but I'm getting the error that event.getSource is not a function.

Component

<lightning:button variant="brand" label="Submit" onclick="{!c.save}" />

Controller

save: function(component, event, helper){

    var target = event.getSource();
    console.log(target.get("v.label"));

}

Error

Uncaught Action failed: c$TimeTrackingTab$controller$save [event.getSource is not a function]

I found this function documented by Salesforce here.

Any ideas?

  • I'm guessing you have LockerService enabled? – Adrian Larson Oct 12 '16 at 22:07
  • 2
    Not my area of expertise, I just wanted to clarify since it's likely to play a huge role in the answer. – Adrian Larson Oct 12 '16 at 22:35
  • 1
    Does it work without locker activated ? You can simply deactivate it and file a bug for SFDC lightning team – Mohith Shrivastava Oct 12 '16 at 22:36
  • 1
    Okay, I disabled it and it still doesn't work. Our issue seems not to do with LockerService then. :/ – joshuadelange Oct 12 '16 at 22:46
  • 1
    Shouldn't it be Winter 17? – Adrian Larson Oct 13 '16 at 13:52
6

You'll have an official answer in Spring 17, event.getSource() will be the way to go as you were expecting. You can find more in the release notes here.

  • 1
    This doesn't appear to work with pure html elements. I have a component with a link and an onclick handler, event.getSource() is not a function when I click the link. – Scott Morrison Jun 8 '17 at 13:51
  • 2
    It seems that if it's your own markup event.target is the way to go – Scott Morrison Jun 8 '17 at 16:19
  • @ScottMorrison where you able to find out how to get the value when the element is pure html? I am stuck with that – manza Aug 15 '18 at 3:51
  • 1
    @manza if you had a data attribute on your element data-example you can use event.currentTarget.dataset.example to get the value when an event is fired – Scott Morrison Sep 5 '18 at 4:54
17

event.getSource() is a proprietary API only available on Aura Events, so, no, you can't use that with lightning:button, just like all components from the lightning namespace, they will not rely on the Aura Proprietary Event System, instead they rely on the DOM Events, using the native event when possible or a custom DOM event, just like a regular <button> will do.

Getting the label of the lightning:button is probably not a good option here, considering that the label might change overtime (maybe even translated), instead you can set the name and/or value on the lightning:button, and use that to identify which button was clicked.

Anyhow, this is an example:

<lightning:button variant="brand" label="Submit" name="save" value="something" onclick="{!c.save}" />

Then in your controller:

({
    save: function (cmp, event) {
        alert(event.currentTarget.name);
        alert(event.currentTarget.value);
    }
})
  • 1
    Hey, using your example all I get is undefined. – dzh Oct 26 '16 at 0:22
4

I notice in Which Button Was Pressed? that they use the press rather than onclick attribute. They also use a ui:button rather than a lightning:button.

With ui:button press is defined as an event. With lightning:button onclick is just an attribute.

To me this suggests that when you click the ui:button there is extra JavaScript building up the event model and populating the extra arguments to the controller method.

In contrast, lightning:button might be directly calling the controller method like any standard client site button.

Looking at the rendered HTML source would likely give you more clues. I could be way off here and it isn't clear why the Base Lightning Component isn't built on top of the ui component with the same press event.

  • Curious, how you enable the use of lightning:button. I always get the error no lightning namespace or no component. Is lighting:button new in winter17? – Eric Oct 13 '16 at 14:19
  • @Eric Yes, they are new in Winter 17 - Introducing Base Lightning Components – Daniel Ballinger Oct 13 '16 at 19:02
3

That is the way it should work and Locker is doing what is is supposed to do (defaults to secure) but currently the lightning: namespace components are not correctly granting access to their internal DOM elements from the lightning: namespace to your namespace. Once that is fixed it will work as advertised. Known issue that is supposed to be in progress - I met with the developers that own lightning: back when this came in and explained the change that is required from the lightning:button etc implementation. I was told that this would be fixed in Winter'17 .11 but that did not happen - we're now at .12 - I have pinged the team lead again just now.

  • As mentioned in the comments on the question; it still didn't work with LockerService disabled. See the marked answer for what was really going on. – joshuadelange Nov 3 '16 at 19:30
  • @DougChasman Are you saying that the lightning:button should be passing an aura event to the callback, or that they're fixing access to the DOM event? If it's going to be the DOM event, what's the reason for mixing Aura and DOM events? – mattp Nov 3 '16 at 19:40

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.