I have a parent component and one child component. Child component is a table which does calculation and the calculated value is sent to parent component through event. On each time calculate function is called I have also a logic to apply style to on the table based on the calculated value.

My styles were working fine before adding event to send the calculated value to the parent component. Can someone help me here what is going wrong in my scenario?

Event to store the calculated value

<aura:event type="APPLICATION">
    <aura:attribute name="calcTot" type="String"/>

Parent Component

<aura:component controller="testController">
<aura:attribute name="total" type="String" />
<aura:handler event="c:calTotalEvent" action="{!c.calcTotal}"/>
<div class="slds-size_1-of-2">
                    <div class="slds-form-element slds-m-around_x-small">
                        <label class="slds-form-element__label" for="tot">Total Value</label>
                       <div class="slds-form-element__control">
                        <input type="text" aura:id="tot" id="tot" class="slds-input" value="{!v.total}" disabled="true"/>
<section class="slds-card__body slds-m-top_small">
                        <c:childComponent />

Child Component Controller:

Calculate: function(component, event, helper){
var varindex = event.target.id; 
var inputValue = document.getElementById(varindex).value;
var varindex2 = varindex.substring(7);e
var totVal = 0;
var tableItems = [];
//tableItems is populated with values from backend server action
totVal = tableItems[i].Value;
var createEvent = $A.get('e.c:TotalEvent'); 
createEvent.setParams({ "calcTot": totVal });       
document.getElementById("id" + varindex2).style.backgroundColor = "YELLOW";
  • If they are parent-child components - why not use a COMPONENT event instead of APPLICATION event - then the event would have been sent to the parent component only and every suspected event conflicts like this would not exist – Itai Shmida Oct 1 '17 at 4:48
  • Yes that’s correct. I have to try that – ləːnə Oct 1 '17 at 6:01

I have a workaround for that but I am not sure is it useful in your case.

in child component Create doneRending method

doneRendering: function(component, event, helper) {
    document.getElementById("id" + varindex2).style.backgroundColor = "YELLOW";

Handle that rending method in child component:

<aura:handler event="aura:doneRendering" action="{!c.doneRendering}"/> 

Hope this approach will work.

  • This is not working. doneRendering is called as soon as the page is loaded. – ləːnə Sep 29 '17 at 7:25
  • Ok so tell me in: document.getElementById("id" + varindex2).style.backgroundColor = "YELLOW"; In this code the Id is of element present which is in child? – Ankita Dhamgaya Oct 2 '17 at 11:45
  • Yes it is present in child – ləːnə Oct 2 '17 at 12:04

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.