+ Start a Discussion
Poonam Agarwal 7Poonam Agarwal 7 

Trailhead lightning component framework Challenge 6 Issue

Hi,
I am facing issue with challenge 6 it gives error as in below screenshot

User-added image
 

I don't understand I have created the onBoatSelected controller function to run when BoatSelected application event is fired...but still I am getting this error. I have checked console log and I am getting all the boat details in my BoatDetails component. Below is my code -

BoatTile.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="boat" type="Boat__C"/>
    <aura:attribute name="selected" type="Boolean"/>
    <aura:registerEvent name="BoatSelect" type="c:BoatSelect"/>
    <aura:registerEvent name="BoatSelected" type="c:BoatSelected"/>
    <!--<lightning:button class="tile{! v.selected ? 'selected' : 'tile' }" onclick="{!c.onBoatClick}">
        <div style="{!'background-image:URL(\'+v.boat.Picture__c+'\')'}" class="innertile">
              <div class="lower-third">
                   <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
              </div>
        </div>
    </lightning:button> -->
    

    <lightning:button class="{!v.selected ? 'tile selected' : 'tile'}" onclick="{!c.onBoatClick}">

        <div style="{!'background-image: url(\'' + v.boat.Picture__c + '\')'}" class="innertile">

            <div class="lower-third">

                <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>

            </div>

        </div>

    </lightning:button>
    
</aura:component>



BoatTileController.js

onBoatClick : function(component, event, helper) {
        var eve = component.getEvent("BoatSelect");
        console.log('component.get("v.boat.Id")>>>'+component.get("v.boat.Id"));
        eve.setParams({"boatId" : component.get("v.boat.Id")});
        eve.fire();
        var appeve = $A.get("e.c:BoatSelected");
        console.log('component.get("v.boat") Application eve fire'+component.get("v.boat"));
        appeve.setParams({"boat" : component.get("v.boat")});
        appeve.fire();
    }

BoatDetails.cmp

<aura:component access="global" implements="force:appHostable,flexipage:availableForAllPageTypes">
    
    <aura:handler event="c:BoatSelected" action="c.onBoatSelected" phase="capture"/>
    
    <aura:attribute name="boat" type="Boat__c" access="public"/>
    <aura:attribute name="id" type="Id" access="public"/>
    <aura:attribute name="boatError" type="String"/>
    
    <force:recordData aura:id="service" recordId="{!v.id}" targetFields="{!v.boat}" fields="Id,Name,Description__c,Price__c,
                    Length__c,Contact__r.Name,Contact__r.Email,Contact__r.HomePhone,BoatType__r.Name,Picture__c"
                      targetError="{!v.boatError}" recordUpdated="{!c.onRecordUpdated}"/>
    
    <lightning:tabset >
        <lightning:tab label="Details">
            <aura:if isTrue="{! !empty(v.boat)}">
            <c:BoatDetail boat="{!v.boat}"/>
            </aura:if>
        </lightning:tab>

        <lightning:tab label="Reviews">

            

        </lightning:tab>
        
        <lightning:tab label="Add Review">

            

        </lightning:tab>

    </lightning:tabset>

</aura:component>

BoatDetailsController.js

onBoatSelected : function(component, event, helper) {
        var boatvar = event.getParam("boat");
        console.log(boatvar.Id+'<<<<<<Application Eve Receiver boatVar');
        component.set("v.id",boatvar.Id);
        console.log(component.get("v.id")+'<<<<<<Application Eve Receiver boatVar');
        component.find("service").reloadRecord(true);
        for(var i=0;i<1000;i++)
            {
                
            }
        console.log(component.get("v.boat")+'<<<<<<Application Eve Receiver');
        
    },
    
    onRecordUpdated : function(component, event, helper) {
    }
SandhyaSandhya (Salesforce Developers) 
Hi,

There is a sample code given in below links I would suggest you cross verify if you have done the same thing.

https://developer.salesforce.com/forums/?id=9060G0000005OTXQA2
 
https://developer.salesforce.com/forums/?id=9060G000000MU1hQAG
 
Please mark it as solved if my reply was helpful. It will make it available for other as the proper solution.
 
Best Regards
Sandhya
 
 
Poonam Agarwal 7Poonam Agarwal 7
Hi Sandhya,

I have verified my code with others.... it is same but I don't know why it's giving me that error. In the UI it is working fine, BoatTile component fires the event and BoatDetails component  handles it and displays it on the UI            
Darrell GallegosDarrell Gallegos
DId you ever get this figured out? I am running into the same problem.

Thanks
ayu sharma devayu sharma dev
If anyone still having same problem, then just remove true from
component.find("service").reloadRecord();
and it will work.