0

I am Doing Lightning Super Badge,but stuck atone place.

Following is the code snippet.

BoatTile.cmp

<lightning:button class ="{!v.selected=='true' ? '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>

BoatTile.ctrl

({
    onBoatClick : function(component, event, helper) {
        debugger;
        var BoatClick = component.getEvent("boatSelect");
        //var boatId = event.getSource().get("v.name");
        var boatId = component.get("v.boat").Id;  //here id value is present
        BoatClick.setParam({
            "boatId" : boatId
        });
        BoatClick.fire();

    }
})

BoatSelect.evt

<aura:event type="COMPONENT" description="Boat Event" access = "global">
<aura:attribute name ="boatId" type ="ID" />
</aura:event>

BoatSearchResults.cmp

<aura:component controller="BoatSearchResults" access ="global">
    <aura:attribute name = "boats" type = "Boat__c[]"/>
     <aura:attribute name = "boatTypeId" type = "ID"></aura:attribute>
    <aura:attribute name = "selectedBoatId"  type = "ID"/>
    <aura:handler name = "boatSelect" event = "c:BoatSelect" action = "{!c.onBoatSelect}"/>
     <aura:handler name="init" value = "{!this}" action="{!c.doInit}"/>
    <aura:method  name= "search" action = "{!c.doSearch}" Description = "This is called from BoatSearch Component" access="PUBLIC">
        <aura:attribute name = "boatTypId" type ="ID"></aura:attribute>
     </aura:method>
   <lightning:layout horizontalAlign="space" multipleRows = "true">
     <aura:iteration items ="{!v.boats}" var ="boat">  
         <lightning:layoutItem size = "3" flexibility = "grow">
            <c:BoatTile boat="{!boat}" selected ="{!boat.Id == v.selectedBoatId ? 'true':'false'}"/>  
         </lightning:layoutItem>    
    </aura:iteration>
       <aura:if isTrue = "{!v.boats.length==0}">
       <lightning:layoutItem class = "slds-align_absolute-center" padding = "around-small">
        <ui:outputText value = "No boats founds">     
        </ui:outputText>
       </lightning:layoutItem>
       </aura:if>    
   </lightning:layout>
</aura:component>

BoatSearchResultsController.js

({
    doInit : function(component, event, helper) {
        console.log('inside init');
        helper.onSearch(component);
    },

    doSearch : function(component, event, helper) {
        console.log('insidedoSearch');
        var params = event.getParam('arguments');
        component.set("v.boatTypeId",params.boatTypId);
        helper.onSearch(component);
    },
    onBoatSelect : function(component, event, helper) {
        console.log("event is");
        console.log(event.getParam("boatId"));
        var BoatId = event.getParam("boatId");  // Here boatId is undefined
        debugger;                               //(Why?)
        component.set("v.selectedBoatId",BoatId);
        console.log("slected value"+component.get("v.selectedBoatId"));

    },

})

I am not getting the BoatId attribute's value of event in BoatSearchResultsController.js.However it is being passed from BoatTile.ctrl as I checked on console. Also, in console it is showing , boatId is undefined.

Please help,although I have complete the corresponding challenge,but It is not working as expected.

1

Issue is in your BoatTile controller. When you set params at the point of firing the event, you need to set it as an id not an object type.

Example,

({
    onBoatClick : function(component, event, helper) {
        var BoatClick = component.getEvent("boatSelect");
        var boatId = component.get("v.boat").Id;  
        BoatClick.setParam("boatId" ,boatId);
        BoatClick.fire();
    }
})
  • It is not allowing me to save the same unexpected token ':' error. – Pankaj Andhale Sep 16 '18 at 11:34
  • You may have missed a comma at the of the method after the curly brace? – Ranga Sep 16 '18 at 11:37
  • No comma missed as only one function is there.Are you sure we can use this syntax for setting parameters to event – Pankaj Andhale Sep 16 '18 at 11:50
  • Apologies, it should be a comma separating attribute name and value in set params! I’ve updated the answer! – Ranga Sep 16 '18 at 11:53
  • 1
    I got the point.For setParams you can use json format.While,for setParam you need to use single attribute,value format – Pankaj Andhale Sep 16 '18 at 19:08

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.