1

I sincerely appologize for the very long code, I have been working on this for a really long time but it is still not working...Please help

I have 4 lightning components

The main Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="c:NavigateToContactDetail" action="{!c.NavigateComponent}"/>
    <aura:handler event="c:NavigateToAddMedicineComponent" action="{!c.NavigateMedicineComponent}"/>
        {!v.body}
</aura:component>

The MainComponentController

({
    doInit : function(component, event, helper) {
    $A.createComponent(
        "c:MyLightComponent",
    {

    },
    function(newCmp){
        if (component.isValid()) {
            component.set("v.body", newCmp);
        }
    });
    },

    NavigateComponent : function(component,event,helper) {
    $A.createComponent(
        "c:ContactDetailsLightningComponent",
    {
        "contactId" : event.getParam("recordId")
    },
    function(newCmp){
        if (component.isValid()) {
            component.set("v.body", newCmp);
        }
    });
    },

    NavigateMedicineComponent : function(component,event,helper) {
    $A.createComponent(
        "c:EnterMedicineDetailsLightningComponent",
    {
        "contactId" : event.getParam("recordId")
    },
    function(newCmp){
        if (component.isValid()) {

            component.set("v.body", newCmp);
        }
    });
    }
})

MyLightComponent

<aura:component controller="contactSearch" implements="force:appHostable" >
    <aura:attribute access="public" name="maxResults" type="Integer" default="10" />
    <aura:registerEvent name="navigate" type="c:NavigateToContactDetail"/>
    <aura:attribute name="contacts" type="Contact[]" />

    <div>
        <ui:inputText aura:Id="searchTerm" label="Contact Name"    placeholder="Enter a Contact Name"></ui:inputText>
        <ui:button label="Search" press="{!c.search}"></ui:button>
    </div>


<ul>
<aura:iteration items="{!v.contacts}" var="contact" indexVar="index">
    <li class="minli"> 
            <h3>
                <a onclick="{!c.viewRecord}" style="width:100%;" data-index="{!index}">{!contact.Name}</a>
            </h3>
        </li>
    </aura:iteration>
</ul> 
</aura:component>

MyLightComponentController

({
    search : function(component, event, helper) {
        helper.helperSearch(component,event);
        console.log('helper');
    },

    viewRecord : function(component, event, helper) {
         var navEvent = $A.get("e.c:NavigateToContactDetail");
         var idx = event.target.getAttribute('data-index');
         var contact = component.get("v.contacts")[idx];
         if(navEvent){
             navEvent.setParams({
                  recordId: contact.Id,
             });
             navEvent.fire(); 
         }

    },

})

MyLightComponentHelper

({
    helperSearch : function(component,event) {
        var searchText = component.find("searchTerm").get("v.value");
        var recordLimit = component.get("v.maxResults");
        var action = component.get("c.getContacts");

        action.setParams({
            searchTerm: searchText,
            maxResults: recordLimit

        });

       action.setCallback(this, function(data) {
        component.set("v.contacts", data.getReturnValue());
        });

        $A.enqueueAction(action);
       }
})

NavigateToContactDetailEvent

<aura:event type="APPLICATION">

<aura:attribute name="recordId" type="Id"/>

</aura:event>

ContactDetailsLightningComponent

<aura:component controller="contactSearch" implements="force:appHostable">
    <aura:attribute name="contactRows" type="Contact[]" />
    <aura:attribute name="contactId" type="Id" />
    <aura:registerEvent name="navigate" type="c:NavigateToAddMedicineComponent"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!--The result is {!v.contactId}-->
    <aura:iteration items="{!v.contactRows}" var="contact">
        <li class="minli"> <h3>{!contact.Name}</h3> </li>
        <li class="minli"> <h3>{!contact.Email}</h3> </li>
    </aura:iteration>
    <ui:button label="Add New Dose" press="{!c.insert}"></ui:button>
</aura:component>

ContactDetailsLightComponentController

({
    doInit : function(component, event, helper){
        helper.getContactDetails(component);
    },
        insert : function(component, event, helper) {
         var navEvent = $A.get("e.c:NavigateToAddMedicineComponent");
         var contactId = component.get("v.contactId");
         if(navEvent){
             navEvent.setParams({
                  recordId: contactId,
             });
             navEvent.fire(); 
         }

    },
})

ContactDetailsLightningComponentHelper

({
    getContactDetails : function(component, event, helper) {
        var contactId = component.get("v.contactId");
        var action = component.get("c.getAllDetails");
        action.setParams({
            contactId: contactId            
        });
        action.setCallback(this, function(a){
            component.set("v.contactRows", a.getReturnValue());
        });
        $A.enqueueAction(action);
    }
})

NavigateToAddMedicineComponent.evt

<aura:event type="APPLICATION">

<aura:attribute name="recordId" type="Id"/>

</aura:event>

EnterMEdicineDetailsLightningComponent

<aura:component controller="contactSearch">
    <aura:attribute name="contactId" type="Id" />
    <ui:inputText aura:Id="medicineName" label="Medicine Name"    placeholder="Medicine Name"></ui:inputText>
    <ui:inputText aura:Id="medicineDose" label="Medicine Dose"    placeholder="Medicine Dose"></ui:inputText>
    <ui:inputText aura:Id="medicineStartDate" label="Medicine Start Date"    placeholder="Medicine Start Date"></ui:inputText>
    <ui:button label="Save" press="{!c.insert}"></ui:button> 
</aura:component>

EntermedicineDetailsLightningComponentController

({
    insert : function(component, event, helper) {
        helper.helperInsert(component,event);
    }
})

EnterMedicineDetailsLightningComponentHelper

({
    helperInsert : function(component,event) {
        var medicineName = component.find("medicineName").get("v.value");
        var medicineDose = component.find("medicineDose").get("v.value");
        var medicineStartDate = component.find("medicineStartDate").get("v.value");
        var contactId = component.get("v.contactId");
        var action = component.get("c.insertMedicine");

        action.setParams({
            medicineName: medicineName,
            medicineDose: medicineDose,  
            medicineStartDate: medicineStartDate,              
        });

        $A.enqueueAction(action);
       }
})

The first two components are worning fine but the third component EnterMedicineDetailsLightningComponent is throwing an error. I am very new to lightning and I really need help

  • Id recommend making an edit to your question to remove the components which are working fine, and adding the error message from the component which throwing an exception. As it stands, this question is a wall of text, and no one will be able to reproduce or assist with the issues you are having. – battery.cord Jul 6 '16 at 16:55
  • @Rimii Can you share the exact error you are facing – Gopal Rao Jul 7 '16 at 6:07
  • @GopalRao When I click on the Add New Dose button in component ContactDetailsLightningComponent it is not loading the the third component, EntermedicineDetailsLightningComponent – Rimii Jul 7 '16 at 11:14
  • it is throwing the following error - Error in $A.getCallback() [ReferenceError: 'concole' is undefined] throws at madhurima2-dev-ed.lightning.force.com/auraFW/javascript/…................. – Rimii Jul 7 '16 at 11:35
  • Are there any console.log statements in your flow, that you didn't include here ? looks like a typo, it should be 'console' instead of 'concole' somewhere. Just a guesss.. Otherwise the entire flow seems fine to me – Gopal Rao Jul 7 '16 at 12:28
2

I tried the code in my dev org and faced the same issue. This seems to be a framework's bug(regarding 'body' attribute), anyhow the same flow is working fine if we tweak the code a little bit and use a <div> to display the dynamically created component instead of using the 'body' attribute of the component Modified the MainComponent to :

<aura:component implements="force:appHostable" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler event="c:NavigateToContactDetail" action="{!c.NavigateComponent}"/>
    <aura:handler event="c:NavigateToAddMedicineComponent" action="{!c.NavigateMedicineComponent}"/>
    <div aura:id="testing"></div>
    <!--{!v.body}-->
</aura:component>

and the MainComponent controller as :

({
    doInit : function(component, event, helper) {
        $A.createComponent(
            "c:MyLightComponent",
            {
            },
            function(newCmp, status){
                if (status === "SUCCESS" && component.isValid()) {
                    component.find("testing").set("v.body", newCmp);
                    //component.set("v.body", newCmp);
                }
            });
    },

    NavigateComponent : function(component,event,helper) {
        $A.createComponent(
            "c:ContactDetailsLightningComponent",
            {
                "contactId" : event.getParam("recordId")
            },
            function(newCmp, status){
                if (status === "SUCCESS" && component.isValid()) {
                    component.find("testing").set("v.body", newCmp);
                    //component.set("v.body", newCmp);
                }
            });
    },

    NavigateMedicineComponent : function(component,event,helper) {
        console.log('Handling the event :NavigateMedicineComponent');
        $A.createComponent(
            "c:EnterMEdicineDetailsLightningComponent",
            {
                "contactId" : event.getParam("recordId")
            },
            function(newCmp, status){
                if (status === "SUCCESS" && component.isValid()) {
                    component.find("testing").set("v.body", newCmp);
                    /*var body = component.get("v.body");
                    console.log('body old');
                    console.log(body);
                    body.push(newCmp);
                    component.set("v.body", body);*/
                }
            }
        );
    }
})

Hope this works for you.

  • it is still throwing me the same error Uncaught rerender threw an error in 'markup://c:MainComp' [rerender threw an error in 'markup://aura:expression' [TypeError: Cannot read property 'childNodes' of null]] @GopalRao – Rimii Jul 8 '16 at 4:30
  • Is there any other way I can fix it – Rimii Jul 8 '16 at 4:58
  • The code seems perfectly fine. I will try this once in my dev org – Gopal Rao Jul 8 '16 at 6:25
  • Thanks.. That would be really helpful. i am in dire need of this by today @GopalRao – Rimii Jul 8 '16 at 6:48
  • I am getting the same error, tried various things but nothing seems to work. Could be a framework bug. Will post here if I find anything – Gopal Rao Jul 8 '16 at 9:15

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.