0

I am dynamically creating HTML <div> and I need to handle the onclick event : when the user clicks on it, I want to call a controller function and this function requires an argument. How do I pass an argument to a reference function ?

Here is my code

$A.createComponent(
    "aura:html",
    {
        tag: "div",
        HTMLAttributes: {
            "class": "prestationBlock",

            // here I pass a reference to my controller function... How do I pass
            // an argument to this function ?
            "onclick": component.getReference("c.onPrestationClick")
        }
    },

    // called when the element is created
    function(div)
    {
           // ...
    }
);
  • What exactly are you trying to do? This question is an X-Y Problem; there is a way to accomplish your task, but this solution is not viable. – sfdcfox Mar 15 at 10:20
  • I am trying to execute a function when clicked on a dynamically created <div>. Each created element has a different prestationID, I need the onclick to take into account this specific data and execute an action accordingly. This is why I'm looking for a way to pass an argument to the controller function – metheM Mar 15 at 10:39
1

My previous answer already demonstrated this, but here's another example:

<aura:application >
    <aura:attribute name="prestationBlocks" type="Aura.Component[]" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    {!v.prestationBlocks}
</aura:application>

({
    init: function(component, event, helper) {
        $A.createComponents(
            [
                ["div", { "data-id": 1, "class": "prestationBlock", onclick: component.getReference("c.click") }],
                ["div", { "data-id": 2, "class": "prestationBlock", onclick: component.getReference("c.click") }],
                ["div", { "data-id": 3, "class": "prestationBlock", onclick: component.getReference("c.click") }]
            ],
            function(divs) {
                component.set("v.prestationBlocks", divs);
            }
        );
    },
    click: function(component, event, helper) {
        alert(event.target.dataset.id);
    }
})

.THIS.prestationBlock {
    min-height: 3em;
    border: 3px solid red;
}

Notice how I attach a value to each div. In my case, they are hard-coded, but you simply need to put the correct ID in to a data attribute, and you can get it back during your click handler.

  • oh ok I did not know the event was bubbled up by default - sacré Salesforce :-) thank you – metheM Mar 15 at 11:17
0

You can use explicit binding, more explanation on this: Docs
you can put the onPrestationClick on the helper, or the bussiness logic inside a function on the helper and you change to this:

var prestationClick = helper.prestationClick;
if (!$A.util.isUndefinedOrNull(prestationClick )) {
//explicit binding
    prestationClick = prestationClick.bind(null, param1, param2);
}
$A.createComponent(
    "aura:html",
    {
        tag: "div",
        HTMLAttributes: {
            "class": "prestationBlock",

            // here I pass a reference to my controller function... How do I pass
            // an argument to this function ?
            "onclick": prestationClick
        }
    },

    // called when the element is created
    function(div)
    {
           // ...
    }
);

  • thanks - unfortunately, I get a TypeError: prestationClick.bind is not a function error – metheM Mar 15 at 9:45
  • @metheM, are you able to use the browser's debugger to find out what the type of the "prestationClick" variable's value is? I'm getting the feeling you might need to use component.get instead of component.getReference in order to receive back a function rather than a proxy for that function. – Phil W Mar 15 at 9:58
  • @metheM, my other question is: where are the parameter values coming from and can't these be held as state within the component itself. – Phil W Mar 15 at 9:59
  • @PhilW ok so using the debugger on the component.getReference : undefined. Using component.get( ) : undefined. How could it pass the $A.util test ? Also, I create multiple <div> with the sample code I posted, and for each of these div the onclick event must perform an action specific to this div, which is why I need an argument (in this case, a prestation ID) – metheM Mar 15 at 10:10
  • I did edit the answer, please verify if that solves your problem, thanks. – Elias Pinheiro Mar 15 at 10:11

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.