[SalesForce] Uncaught Error in $A.getCallback() [component is not defined] when trying addClass() after toastEvent.fire()

Thanks to help here, I have a button that calls an apex controller & fires a toast. I want to also make the button disappear if the apex controller method succeeds, but an error is thrown "component is not defined" when trying to apply the css to hide the button.

Simplified component:

<aura:component implements="force:appHostable" controller="updateUsingLightningCheckboxController">
<ui:button label="Activate" press="{!c.onActivate}" aura:id="Activate"/>
</aura:component>

Simplified JS Controller. Error occurs when I added the 2 lines below toastEvent.fire():

({
onActivate: function(cmp, evt, helper){
    var action = cmp.get("c.startScheduler");
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (state === "SUCCESS") {

            var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                "title": "Success!",
                "message": response.getReturnValue(),
                "type": "success",
                "duration": 1500
            });
            toastEvent.fire();
            var toggleActivate = component.find("Activate");
            $A.util.addClass(toggleActivate.getElement(), 'invisible');
        }//if
    });
    $A.enqueueAction(action);
}
}

Style:

.THIS .uiButton.invisible {
display: none;
}

Simplified Apex Controller (including for completeness. It works as expected):

public with sharing class updateUsingLightningCheckboxController {

public updateUsingLightningCheckboxController(){
//do nothing on page load

// startScheduler();
}//updateUsingLightningCheckboxController

@AuraEnabled
public static String startScheduler(){
    system.debug('scheduler method started');
    String responseMessage='The app is already scheduled for hourly runs.  Click Deactivate in order to stop the app from updating the custom field: "Using Lightning?"';
    List<CronTrigger> ct=[SELECT Id, NextFireTime FROM CronTrigger WHERE CronExpression =: updateUsingLightningCheckboxUtils.cronJobSchedule];
    if (ct.size()==0){
        updateUsingLightningCheckboxScheduler.start(); 
        responseMessage = 'Confirmed: the app has been activated.  The Using Lightning? field will be updated every hour for each user.';
    } else {
    }//if
    return responseMessage;
}//startScheduler
}

Best Answer

Easy fix :)

I don't see where you have used toggleActivate, but fairly certain that this is the line that's causing the error, Comment this line out since you are hiding button using $A.util.addClass(button.getElement(), 'invisible'); (or)

Change 

        var toggleActivate = component.find("Activate");

to 

        var toggleActivate = cmp.find("Activate");

update:

If your intent add invisible sytleclass on success just create a invisible style with display:none and add the class using $A.util

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/js_cb_styles.htm

change

    $A.util.addClass(toggleActivate.getElement(), 'invisible');

to

    $A.util.addClass(toggleActivate, 'invisible');

and this from 

.THIS .uiButton.invisible {
display: none;
}

to

.THIS.invisible {
display: none;
}
Related Topic