4

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. enter image description here

  • Clicking the button opens the first modal dialog which has another button to open a second modal dialog enter image description here 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" />
4

You have registered the event on the handling modal, not the despatching modal.

Move this from the ModelDialog2.cmp:

<aura:registerEvent name="NavigateEvent" type="c:NavigateEvent"/>

To the ModalDialog1.cmp component and I think it should all work.

Your handler is also setup for handling a COMPONENT event, not an application event.

Change your handler to this:

<aura:handler event="c:NavigateEvent" action="{!c.openModel}"/>
  • did not help. I guess the problem is in the way i am firing the the event. I can see "Event Fired" in the log. But the log in event handler never gets printed. – Rohitha May 28 '17 at 21:37
  • Realised you have another issue with your handler - see edits to my answer. – Caspar Harmer May 28 '17 at 21:42
  • Thank you. This issue was with the handler. The event registration is not a problem. It needs to be on the second Modal. Please edit your answer to reflect that so i can mark it as an answer. – Rohitha May 28 '17 at 21:50
  • Is this still the case? An event registration informs the framework that you are able to despatch an event - it looks like cmp1 is the despatcher. – Caspar Harmer May 28 '17 at 23:12
  • Glad to help either way :) – Caspar Harmer May 28 '17 at 23:12

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.