function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
lightning demo 22lightning demo 22 

alert not displaying when button is clicked

Hello
I am going through aura:Action and developed a piece of code as follows. 
P1Event.evt
----------
<aura:event type="COMPONENT" 
            access="global"
            description="Event template">

</aura:event>


P1Child.cmp
-----------
<aura:component>
    
	<aura:registerEvent name="handleComponentEvent"
                                         type="c.P1Event"/>
    
   <lightning:button label="Click Here To Fire The Component Event"
                      onclick="{!c.FireComponentEvent}"
                     aura:id="button1"
                      variant="brand"/>
</aura:component>

P1ChildControlelr.js
--------------------

({
	FireComponentEvent : function(component, event, helper) {
		//only get the event name
        var evtName=component.getEvent("handleComponentEvent");
        alert(evtName);
        evtName.fire();
	}
})


P1Parent.cmp
-----------
<aura:component implements="flexipage:availableForAllPageTypes" 
                access="global">
	
    <!--Here handle the component event-->
   <aura:handler event="c:P1Event"
                 name="myEventInstance"
                 action="{!c.HandleComponent}"/>
    
  <c:P1Child aura:id="ClapButton"/>
   <c:P1Child aura:id="SoundButton"/>
   <c:P1Child aura:id="DanceButton"/>
    
</aura:component>


P1ParentController.js
---------------------
({
	HandleComponent : function(component, event,helper) {
        var buttonclicked = event.getSource().getLocalId(); //find out which button was clicked
        alert(buttonclicked);
        if (buttonclicked === 'ClapButton')
            alert("I clapped");
        else if (buttonClicked === 'jumpbutton')
            alert('I am jumping!');
        else 
            alert('I am dancing!');
		}
})

When I click the button I am not able to get the alert message.

Please help me out.

thanks
oliva
Raj VakatiRaj Vakati
You can not able to get javascript alters in the lightning component,. instead, use toast message s..
lightning demo 22lightning demo 22
Here is what I did

({
    HandleComponent : function(component, event) {
        var buttonClicked = event.getSource().getLocalId();
        var toastEvent = $A.get("e.force:showToast");
        if (buttonClicked === 'ClapButton')
        {
                              resultsToast.setParams({
                        "title": "Saved",
                        "message": "I clapped!!",
                        "mode":"sticky"
                    });
                    resultsToast.fire();
        }
        else if (buttonClicked === 'SoundButton')
        {
                     resultsToast.setParams({
                        "title": "Saved",
                        "message": "I Made a sound!",
                        "mode":"sticky"
                    });
                    resultsToast.fire();
        }
        else 
            alert('I am dancing!');
    }
})

But when I click the button clap in dev console then its now showing the appropriate alert.

could u le tme know?

thanks
oliva
GauravendraGauravendra
Hi Oliva,

Find the attached Toast message code. You are declearing 'toastEvent' variable and using 'resultToast' variable for toast. Add the component to LIghtning page, where you can see it working. 
showToasted : function(component,event,helper) {
        var toasty = $A.get("e.force:showToast");
        toasty.setParams({
            "title": "Hello Toast",
            "type": "succcess",
            "message": "Its toasty here!"
            
        });
        toasty.fire();
    }
Hope this helps.
 
GauravendraGauravendra
Hi Oliva,

As I was going through your original question, I found that what are you trying to attain is easily possible. No need to go through the Toast. Your approach was also right. For me its working. One mistake that I was able to find out is in event registration, it should be  type="c:P1Event". 

Child Component: LightningDS 
<lightning:button variant="brand" label="Component Button" aura:id="cmptBtn1" class="slds-m-top_medium" onclick="{!c.fireEvent}" />
Child Component Controller: LightningDSController 
fireEvent : function(component, event, helper) {
        var btnName = event.getSource().getLocalId();
        var compEvent = component.getEvent("buttonEvent");
        //compEvent.setParams({"btnName": btnName});
        compEvent.fire();
    }
Parent Component: 
<aura:handler name="buttonEvent" action="{!c.handleEvent}" event="c:BtnEvent" />

<div class="slds-box">
        <c:LightningDS aura:id="cmp1" />
        <c:LightningDS aura:id="cmp2" />
    </div>
Parent Component Controller: 
handleEvent: function(component, event, helper) {
        var btnClicked = event.getSource().getLocalId();
        console.log('btnclicked',btnClicked);
        if(btnClicked === 'cmp1')
            alert('Component 1');
        if(btnClicked === 'cmp2')
            alert('Component 2');
         }

Hope this helps.