1

I added these Console.logs to RowsPerPageController.js

enter image description here

selectedValue prints "5" to Console as expected But it seems "5" is never added as a param to the event. Furthermore, in Test1Controller.js I have a console log at the very beginning of function rowsPerPageChange. That never prints, which may indicate the event is not actually firing or being caught by the Parent's handler.

I've been at this for some hours and had another pair of eyes on it :| Your help is much appreciated!

My Parent Component: Test1.cmp

<aura:component access="public" implements="force:appHostable,lightning:isUrlAddressable,flexipage:availableForAllPageTypes" controller="FirebirdOrganizationsController">  
<aura:attribute name="quanitySelected" type="String" default="0"/>

<aura:handler name="RowsPerPageEvent" 
                event="c:RowsPerPageEvent" 
                action="{!c.rowsPerPageChange}" />

<c:RowsPerPage/>

Test1Controller.js

({
doInit: function(component, event, helper) {    


},
rowsPerPageChange : function(component, event, helper) {
    console.log("In Parent JS: rowsPerPageChange function");
    component.set("v.quanitySelected", event.getParam("rowsPerPage"));
    var test = component.get("v.quanitySelected");
    console.log(test);
    //helper.getDataBasedOnRowsPerPage(component, helper);      
}

})

RowsPerPageEvent.evt

<aura:event type="COMPONENT" description="Rows Per Page Event">
<aura:attribute name="rowsPerPage" type="String" default="0"/>

My Child Component: RowsPerPage.cmp

<aura:component>
<aura:registerEvent name="RowsPerPageEventChange" type="c:RowsPerPageEvent" />

<div>
    <div scope="col">Show</div>
    <ui:inputSelect value="20" aura:id="rowsPerPageSelect" change="{!c.rowsPerPageChange}">
        <ui:inputSelectOption text="5" value="5"/>
        <ui:inputSelectOption text="10" value="10"/>
        <ui:inputSelectOption text="20" value="20"/>
        <ui:inputSelectOption text="30" value="30"/>
    </ui:inputSelect>
</div>

RowsPerPageController.js

({
rowsPerPageChange : function(component, event, helper) 
{       
    var selectedValue = component.find("rowsPerPageSelect").get("v.value");
    console.log("### selectedValue: ", selectedValue);
    var rowsPerPageChangeEvent =
        component.getEvent("RowsPerPageEventChange");
        console.log("getEvent: ", component.getEvent("RowsPerPageEventChange"));
        rowsPerPageChangeEvent.setParams({
            "rowsPerPage" : selectedValue
        });
    console.log("getEvent: ", component.getEvent("RowsPerPageEventChange"));    
    console.log("### rowsPerPageChangeEvent: ", rowsPerPageChangeEvent);

    rowsPerPageChangeEvent.fire();      
}

})

  • Something easy to try, remove 'name=" RowsPerPageEvent"' from your event Test1.cmp markup. This has fixed events not working properly for me in the past. – Brandon Fitch Feb 19 at 19:42
  • If that doesn't work, I recommend using the syntax here when firing your event. Change the following in your controller.js: 'component.getEvent("RowsPerPageEventChange")' To the following: var rowsPerPageEvent = $A.get("e.c:RowsPerPageEvent"); – Brandon Fitch Feb 19 at 19:46
  • The first thing didn't work. I implemented your second suggestion and got this... Uncaught Action failed: c:RowsPerPage$controller$rowsPerPageChange [Cannot read property 'markup://c:RowsPerPageEvent' of undefined] – Ryan McNeely Feb 19 at 20:01
  • I created a new Event, just to make sure that wasn't corrupt. The new event is called RowsPerPageEvent2. Now I get this error... Uncaught Action failed: c:RowsPerPage$controller$rowsPerPageChange [Cannot read property 'setParam' of undefined] – Ryan McNeely Feb 19 at 20:12
  • var rowsPerPageChangeEvent = $A.get("e.c:RowsPerPageEvent2"); – Ryan McNeely Feb 19 at 20:12
0

Okay I felt bad we weren't able to solve it yesterday, so I went and created a mock of your components in a dev box. I have the event firing, listening, and logging on both ends properly. Here's the code:

Parent.cmp:

<aura:attribute name="quanitySelected" type="String" default="0"/>

<aura:handler event="c:RowsPerPageEvent" 
              action="{!c.rowsPerPageChange}" />

<c:RowsPerPage/>

Parent.js

rowsPerPageChange : function(component, event, helper) {
    console.log(event.getParam('rowsPerPage'));
}

Event component did not change - use your original one.

RowsPerPage.cmp:

<aura:registerEvent name="rowsPerPageEvent" type="c:RowsPerPageEvent" />

<div>
    <div scope="col">Show</div>
    <ui:inputSelect value="20" aura:id="rowsPerPageSelect" change="{!c.rowsPerPageChange}">
        <ui:inputSelectOption text="5" value="5"/>
        <ui:inputSelectOption text="10" value="10"/>
        <ui:inputSelectOption text="20" value="20"/>
        <ui:inputSelectOption text="30" value="30"/>
    </ui:inputSelect>
</div>

RowsPerPageController.js:

rowsPerPageChange : function(component, event, helper) {       
    var selectedValue = component.find("rowsPerPageSelect").get("v.value");
    console.log("### selectedValue: ", selectedValue);
     var rowsPerPageEvent = $A.get("e.c:RowsPerPageEvent");
    rowsPerPageEvent.setParams({
        "rowsPerPage": selectedValue
    });
    console.log('prefire')
    rowsPerPageEvent.fire();

}
| improve this answer | |
  • Thanks Brandon! I'm tied up at the moment, but will definitely try this by tomorrow and circle back. – Ryan McNeely Feb 20 at 18:42
  • Just got this error... Error force-app/main/default/aura/Test1/Test1.cmp A aura:handler that specifies an event="" attribute must handle an application event. Either change the aura:event to have type="APPLICATION" or alternately change the aura:handler to specify a name="" attribute. – Ryan McNeely Feb 20 at 21:58
  • added Name, now getting... Uncaught Action failed: c:RowsPerPage$controller$rowsPerPageChange [Cannot read property 'markup://c:RowsPerPageEvent' of undefined] – Ryan McNeely Feb 20 at 22:01
0

Everything in my original post is fine except for...

name in the handler (on Parent .cmp)

    <aura:handler name="RowsPerPageEvent" 
                event="c:RowsPerPageEvent" 
                action="{!c.rowsPerPageChange}"/>

did not match name in the registerEvent (on Child .cmp)

<aura:registerEvent name="RowsPerPageEventChange" type="c:RowsPerPageEvent" />

ALSO, includeFacets="true" was needed on the handler

So replace handler in my original post with this, and it works perfectly...

    <aura:handler name="RowsPerPageEventChange" 
                event="c:RowsPerPageEvent" 
                action="{!c.rowsPerPageChange}"
                includeFacets="true" />
| improve this answer | |

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.