I am having trouble raising event from one component and capturing it in another component.
Here is what i am trying to do.
I have button on my home page.
Clicking the button opens the first modal dialog which has another button to open a second modal dialog
Problem:
Clicking the button "Open Another modal" is supposed to fire an event on another component and open the second modal dialog, but that does not happen.
Here is the code.
Application
<aura:application > <ltng:require styles="/resource/SLDS052017/assets/styles/salesforce-lightning-design-system.css" /> <c:ModalDialog1 /> <c:ModalDialog2 /> ModalDialog1.cmp
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable"> <!--use boolean attribute for Store true/false value, make default to "false" so modal box are not display on the load of component. --> <aura:attribute name="isOpen" type="boolean" default="false"/> <!--Use "slds-m-around- -xx-large" class to add standard Large padding to the component--> <div class="slds-m-around--xx-large"> <button class="slds-button slds-button--brand" onclick="{!c.openModel}">Open Modal Dialog</button> <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] --> <aura:if isTrue="{!v.isOpen}"> <!--###### MODAL BOX Start From Here ######--> <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open "> <div class="slds-modal__container"> <!-- ###### MODAL BOX HEADER Part Start From Here ######--> <div class="slds-modal__header"> <h2 id="header99" class="slds-text-heading--medium">Modal Dialog 1</h2> </div> <!--###### MODAL BOX BODY Part Start From Here ######--> <div class="slds-modal__content slds-p-around--medium"> <p><b>This is Modal Dialog 1</b></p> </div> <!--###### MODAL BOX FOOTER Part Start From Here ######--> <div class="slds-modal__footer"> <button class="slds-button slds-button--neutral" onclick="{!c.closeModel}" >Cancel</button> <button class="slds-button slds-button--brand" onclick="{!c.openSecondModal}">Open Another Modal</button> </div> </div> </div> <div class="slds-backdrop slds-backdrop--open"></div> <!--###### MODAL BOX Part END Here ######--> </aura:if> </div> ModelDialog1Controller
({ openModel: function(component, event, helper) { // for Display Model,set the "isOpen" attribute to "true" component.set("v.isOpen", true); }, closeModel: function(component, event, helper) { // for Hide/Close Model,set the "isOpen" attribute to "Fasle" component.set("v.isOpen", false); }, openSecondModal: function(component, event, helper) { // Display alert message on the click on the "Like and Close" button from Model Footer // and set set the "isOpen" attribute to "False for close the model Box. component.set("v.isOpen", false); var cmpEvent = $A.get('e.c:NavigateEvent'); cmpEvent.fire(); console.log("Event fired.") }, })
ModelDialog2.cmp
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable"> <!--use boolean attribute for Store true/false value, make default to "false" so modal box are not display on the load of component. --> <aura:attribute name="isOpen" type="boolean" default="false"/> <aura:registerEvent name="NavigateEvent" type="c:NavigateEvent"/> <aura:handler name="NavigateEvent" event="c:NavigateEvent" action="{!c.openModel}"/> <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] --> <aura:if isTrue="{!v.isOpen}"> <!--###### MODAL BOX Start From Here ######--> <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open "> <div class="slds-modal__container"> <!-- ###### MODAL BOX HEADER Part Start From Here ######--> <div class="slds-modal__header"> <h2 id="header99" class="slds-text-heading--medium">Modal Dialog 2</h2> </div> <!--###### MODAL BOX BODY Part Start From Here ######--> <div class="slds-modal__content slds-p-around--medium"> <p><b>This is Modal Dialog 2</b></p> </div> <!--###### MODAL BOX FOOTER Part Start From Here ######--> <div class="slds-modal__footer"> <button class="slds-button slds-button--brand" onclick="{!c.closeModel}">Close</button> </div> </div> </div> <div class="slds-backdrop slds-backdrop--open"></div> <!--###### MODAL BOX Part END Here ######--> </aura:if> ModelDialog2Controller
({ openModel: function(component, event, helper) { // for Display Model,set the "isOpen" attribute to "true" // console.log("Open Model 2 called"); component.set("v.isOpen", true); }, closeModel: function(component, event, helper) { // for Hide/Close Model,set the "isOpen" attribute to "Fasle" component.set("v.isOpen", false); } }) Event
<aura:event type="APPLICATION" description="Event template" /> 
