1

I have the following codes:

Event

<aura:event access="global" type="COMPONENT" description="Event template" >
<aura:attribute name="data" type="String"/>
<aura:attribute name="sample"   type="String"/>
</aura:event>

testcomp:

<aura:component >
<aura:handler name="TEST_Event" event="c:testevent" action="{!c.handleComponentEvent}"/>
<aura:attribute name="dataValue" type="String" default="testselect"/>
<aura:attribute name="sampl" type="String" />

<aura:if isTrue="{!v.dataValue == 'testselect'}">
        <c:testselect/>
</aura:if>
<aura:if isTrue="{!v.dataValue == 'testcomp2'}">
        <c:testcomp2 testdata="{!v.sampl}"/>
</aura:if>
</aura:component>

testcomp controller js:

({
handleComponentEvent : function(component, event) {
    var cmpdata = event.getParam("data");
    component.set("v.dataValue", cmpdata);

    var cmpmm = event.getParam("sample");
    component.set("v.sampl", cmpmm);

    console.log('dataValue '+component.get("v.dataValue"));
    console.log('msg '+component.get("v.sampl"));
}
})

testselect:

<aura:component >
<aura:registerEvent name="TEST_Event" type="c:testevent"/>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
    <thead>
        <tr ><th ><div >Sample Table</div></th></tr>
    </thead>
    <tbody><tr class="slds-hint-parent"><th  data-label="Batch Donation Form Name" scope="row">
                    <div class="slds-truncate" ><a aura:id="sampleId" data-value="id12345" onclick="{!c.gotoNext}">message 1</a></div>
                </th>
           </tr>
    </tbody>
</table>
</aura:component>

testselect controller js:

({
gotoNext:function(component, event, helper){
var trId = event.currentTarget.dataset.value;
console.log('trId '+trId);
var nextpage = "testcomp2";
var cmpEvent = component.getEvent("TEST_Event");
cmpEvent.setParams({
    "data" : nextpage,
    "sample" : trId});
cmpEvent.fire();
}})

testcomp2:

<aura:component >
<aura:registerEvent name="TEST_Event" type="c:testevent"/>
<aura:attribute name="testdata" type="String" />
<label>Output data here: {!v.testdata}</label>

<aura:handler name="init" action="{!c.doInit}" value="{!this}" />
</aura:component>

testcomp2 controller js:

({
doInit : function(component, event, helper) {
   var sid = event.getParam("sample");
   component.set("v.testdata",sid);
   console.log('testdata '+component.get("v.testdata"));
}})

it worked well and the sample value is displayed but when I get the value - component.get("v.testdata"), it gets an undefined value. I'm supposed to use it for my query but I didnt get any value though it displays in the page. what might went wrong?

0

doInit is called before your component would receive any other event-based data. In fact, it's called even before it's rendered and becomes part of the DOM. All of this means that what you're looking for is a value change handler:

<aura:handler name="change" action="{!c.checkChange}" value="{!v.testdata}" />

checkChange: function(component, event, handler) {
  // new value will be here
  var data = component.get("v.testdata");
  console.log(data);
}

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.