8

How can i pass parameters from lightning app component and access them in java-script controller where I can set or pass them to my event. Or is there a way out how i can know which attribute in my component was clicked inside my js controller. Actually I am iterating an array in my component and displaying all the iterations in tabular form setting dynamic ids to them, now when a user clicks an idem i want to pass its id and few more attributes to the controller, Can anyone help me with this.

Component

<aura:iteration items="{!v.all}" var="xxx">
    <aura:if isTrue="{!xxx != v.search}">
        <span class="sub_main_owner_icon">
        <img aura:id="{!xxx}" onclick="{!c.loadDetails}" src="/Owner.png" />
        </span>
    </aura:if>
</aura:iteration>

Controller

loadDetails : function(component, event, helper) {
    loadDetails.setParams({
        **I want to pass values here from my component**
        "xxx": component.get("v.xxx.Id")
        "account": component.get("v.xxx.Id")
   });
6
  • Some example code would be helpful. – pchittum May 14 '15 at 9:42
  • Try event.getSource(), see if that gets you the component you expect. – Kris Gray May 14 '15 at 21:32
  • I think if it is just the ID the getSource option might work. If you need more params, you may need to create your own special wrapper component with attributes that are set and then passed. The event handler would then be on the wrapper component, instead of this one. Sorry I don't have time to build out an example and show, but hopefully this comment sends you in the right direction. – pchittum May 15 '15 at 10:03
  • Right the child component could throw an event that the parent handles. Our support for event delegation is weak at the moment. – Kris Gray May 15 '15 at 16:20
  • @Kris Gray Could you tell me how can i pass parameters on simple click on some DOM attribute, If i want to access the values say I have 10 images on my DOM dynamically created with different aura IDs, how could i know in my Js Controller, which image was clicked. and i would like to know is there a way i can pass n no. of parameters from my comp. to js controller onClick(). as in traditional programming we would pass as js function parameters or via HTTP POST or GET methods. – ScoRpion May 19 '15 at 7:46
3

What I do is add a data-* style attribute to the element that is triggering the event.

<img aura:id="{!xxx}" onclick="{!c.loadDetails}" src="/Owner.png" data-id="{!xxx}" />

and then in the handler, pull that id out with

loadDetails: function(component, event, helper){
   var el = event.srcElement;
   var id = el.dataset.id;//id here is from 'data-id' in the element

now I don't know (off the top of my head) how cross browser that code is, but it appears to work in Salesforce1.

0

In the component, create a div with the unique id/class/aura:id. Then in the controller, you can use jquery to grab the value/attribute (or component.get). I usually pass component, event, helper in the function, and inside that controller's function, you can access most values and attributes if the component is passed in as parameter

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.