1

I have two components:

  1. showAccountsOnCheck - It has a checkbox. If its checked, then an event is fired. This event is handled by a component(showAccountFromCheckbox).

  2. showAccountFromCheckbox - This component has handler to the event fired in showAccountsOnCheck component. It displays list of account if the checkbox is checked else it display plain text suggesting to click Checkbox.

When i load my app which contains these two components, checkbox in unchecked by default in showAccountsOnCheck component and a plain text suggesting to check the box is displayed in the showAccountFromCheckbox. When i check the checkbox, Accounts is being fetched from server and being displayed correctly on showAccountFromCheckbox.

Here is the PROBLEM. Now when i uncheck the checkbox in showAccountsOnCheck, i expect the 2nd component(showAccountFromCheckbox) to just show a plain text and the Account Data should be hidden. But this doesnt happen. i get an error on browser stating: "Something has gone wrong. Cannot read property 'childNodes' of null. Please try again."

Please let me know what am i doing wrong in the code.

Code of showAccountsOnCheck.cmp

     <aura:component >
    <ui:inputcheckbox label="Select Me To Show Account" aura:id="firstCheck" change="{!c.showAccount}" />
</aura:component>

Controller for showAccountsOnCheck component

//Controller for showAccountsOnCheck component
({
    showAccount : function(component, event, helper) {
        var getCheckVal = component.find("firstCheck").get("v.value");
        console.log('value of checkbox '+getCheckVal);
        var needtofire = $A.get("e.c:checkEventShowAccount");
        needtofire.setParams({"carryValue":getCheckVal});
        console.log('I am going to fire event');
        needtofire.fire();
    }
})

The event:

<aura:event type="APPLICATION" description="Event template" >
    <aura:attribute name="carryValue" type="boolean" />
</aura:event>

Code of showAccountFromCheckbox component

<aura:component controller="tryShowAccountComponent">
    <aura:attribute name="allAccounts" type="Account[]" />
    <aura:attribute name="showData" type="Boolean" />
    <aura:handler event="c:checkEventShowAccount" action="{!c.handleAppEvent}" />
    <aura:renderIf isTrue="{!v.showData}">
        <aura:iteration items="{!v.allAccounts}" var="acc">
            <table>
                <tr>
                    <td>{!acc.Name}</td>
                    <td>{!acc.Phone}</td>
                </tr>
            </table>
        </aura:iteration>
        <aura:set attribute="else">
            <p>Check the CheckBox to Display Data</p>
        </aura:set>
    </aura:renderIf>
</aura:component>

Controller of showAccountFromCheckbox

({
    handleAppEvent : function(component, event, helper) {
        console.log('handling event here');
                var eventResult = event.getParam("carryValue");

        if(eventResult){
            component.set("v.showData",true);
            console.log("value of showData" + component.get("v.showData"));

            helper.callServer(component);
        }
        else{
            console.log('I am in else now');
            component.set("v.showData",false);
            console.log('value of show data '+component.get("v.showData"));
        }
    }
})

Helper resource of showAccountFromCheckbox

({
    callServer : function(compo) {
        console.log('now in helper');
        var seeAccount = compo.get("c.displayAccount");
        console.log('bingo');
        seeAccount.setCallback(this,function(results){
            compo.set("v.allAccounts",results.getReturnValue());
            console.log('data here'+results.getReturnValue());
        });
        $A.enqueueAction(seeAccount);
    }
})

One Weird Behaviour: if i put <ui:message> component to display a message inside showAccountFromCheckbox component's <aura:renderIf>, my code works fine for check and uncheck both! if i remove this message, the code doesnt work when the checkbox is false!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.