1

I have a component that dynamically creates buttons which, when clicked, apply filters and then re-query the back end for data.

While I can assign onclick events to each button, I can't find a way to call a helper function.

I have only had success in using pure Javascript to assign

myButton.onclick = function(){alert('this works');};

but the code needs to pass parameters to the back end and then process and display the results in the DOM, so I really need to be able to call a helper function.

I saw an article saying someone was able to call a helper function, but this doesn't work when onclick is assigned dynamically. I have tried helper.functionToCall(cmp), this.functionToCall(cmp), this.helper.functionToCall(cmp), functionToCall(cmp) and many other things.

Is there a way to do this?

  • So to be clear, my question is: is there a way to dynamically create buttons after the page loads which can call a helper function and pass specific parameters when clicked? What does that onclick assignment look like which can call a helper function and also pass parameters? – Tim Thomas Jul 14 '17 at 1:49
3

I just did something like this the other day. Not sure if it meets all your needs but it at least illustrates the concept

Component Controller

({
doinit: function(component,event,helper){
    <iframe name="pc-frame" src="{!v.iframe-url}" style="width: 100%;height: 770px; border: none;" scrolling="true"/>

        $A.createComponent(
            "aura:html",
             { 
                 tag: "iframe",
                 HTMLAttributes:{
                     "id": "pc-frame",
                     "src": tmp, 
                     "scrolling" : "true",
                     "onload" : component.getReference("c.handlerFunction") //You can change to onclick if your html element supports it 
                 },
             }
                function(compo){
                    var container = component.find("container");
                    if (container.isValid()) {
                        var body = container.get("v.body");
                        body.push(compo);
                        container.set("v.body", body);
                    }
                }
        );

},

handlerFunction : function(component, event,helper){

    console.log('something');

}

)}
  • My situation is different - I am creating many buttons, but they all need to call the same function, but with different parameters. – Tim Thomas Jul 14 '17 at 1:38
  • Well that would have been helpful to know up front. You may want to update the question to include that...If you can find a way to deduce the parameters from within the function this would still work though – Eric Jul 14 '17 at 1:40
0

I would really hope there is a better way, but in the absence of any apparent SF solution, I implemented a JS hack -

I put a hidden button on the form so it existed in the component at the time of load, and had onclick code which invoked a defined controller function.

<input type="button" class="hide" id="topicId" value="" onclick="{! c.getCategories }" />

Then I added onclick functions to each of the buttons that need to call the helper function:

button.onclick = function(){var x = document.getElementById('topicId'); x.value=this.id;x.click();};

Upon clicking, the controller function retrieves the (string) parameter from the button's value and passes it the helper function:

    getCategories : function(cmp, event, helper){
        var topicId = document.getElementById("topicId");
        helper.getFilteredCategories(topicId);
    },

I'm really not proud of this, but it works. Any cleaner suggestions would be appreciated.

  • 1
    All of that could be done with my answer using the event object from the function as far as I can tell – Eric Jul 14 '17 at 17:23

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.