Refresh Component When Attribute Changes

Question

I have a primary component that has an attribute used to render different areas of the page. I click a button that updates the variable and renders the correct section of the page. However, when I try to render back, the attribute is getting updated but the re rendering is not happening. Let me know if you need to other components but I don't think they matter with this issue. The render that updates the value to true uses an event since a sub component is updating it. But my problem is updating and re rendering from the main component.

Here is the main component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction,force:hasRecordId,lightning:isUrlAddressable" access="global" controller="GSController">
 <!-- Handle component initialization in a client-side controller -->
 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<!-- Main attribute uses to display all of the group structures under the VIEWING section -->
<aura:attribute name="groupstructures" type="Group_Structure__c[]"/>
<!-- the groupstructureList attribute is used to refilter the groupstructures attribute when 
filters change on the page (using the handleSelect function)   -->
<aura:attribute name="groupstructureList" type="Group_Structure__c[]"/>
<!-- totalGroupStructures variable is used to show the user how many group structures are on the page -->
<aura:attribute name="totalGroupStructures" type="Integer"/>
<!-- attribute that holds the group structures that are cloned over -->
<aura:attribute name="ClonedGroupStructures" type="Group_Structure__c[]"/>
<!-- these attributes are used to filter the group structures -->
<aura:attribute name="groupnumbers" type="Group_Structure__c[]"  />
<aura:attribute name="sections" type="Group_Structure__c[]"/>
<aura:attribute name="packages" type="Group_Structure__c[]"/>
<aura:attribute name="products" type="Group_Structure__c[]"/>
<aura:attribute name="prefixes" type="Group_Structure__c[]"/>
<aura:attribute name="AccountName" type="string"/>
<!--  Not sure if I need recordId.. check later and remove if not needed  -->
<aura:attribute name="recordId" type="String"/> 
<!-- attribute used to Toggle sections when Cloning  -->
<aura:attribute name="cloning" type="boolean" default="false" />


<ui:button label="Log Value"  press="{!c.logValue}"/>
<ui:button label="Check cloning"  press="{!c.cloning}"/>
<!-- this attribute is used to get the account ID thats passed to the component when launched -->
<aura:attribute name="Aid" type="Id" description="Id of the account"/>

 <aura:handler event="c:CloneToGS" action="{!c.CloneToGS}" default="false"/>  

<!-- handler to fire when the cloning variable changes -->
<aura:handler name="change" value="{!v.cloning}" action="{!c.CloneChange}"/>

<!-- Page header with a counter that displays total number of contacts -->
<div class="slds-page-header slds-page-header_object-home">
    <lightning:layout>
        <lightning:layoutItem>
            <lightning:icon iconName="standard:group_structure__c" />
        </lightning:layoutItem>
        <lightning:layoutItem class="slds-m-left_small">
            <p class="slds-text-title_caps slds-line-height_reset">Group Structures</p>
            <h1 class="slds-page-header__title slds-p-right_x-small">Group Structures for {!v.AccountName} - There are {!v.totalGroupStructures} matching Group Structure(s)</h1>
        </lightning:layoutItem>
    </lightning:layout>

 <lightning:layoutItem padding="around-small">
        <!-- Create a dropdown menu with options for Section code-->
        <lightning:select aura:id="selectGroupNum" label="GroupNum" name="sourceGroupNum" onchange="{!c.handleSelect}">
                 <aura:iteration items="{!v.groupnumbers}" var="gs">
                     <option value="{!gs}" text="{!gs}"/>
             </aura:iteration>
        </lightning:select>
     </lightning:layoutItem>

    <lightning:layoutItem padding="around-small">
        <!-- Create a dropdown menu with options for Section code-->
        <lightning:select aura:id="selectSection" label="Section" name="sourceSection" onchange="{!c.handleSelect}" >
             <aura:iteration items="{!v.sections}" var="gs">
                 <option value="{!gs}" text="{!gs}" />
             </aura:iteration>
        </lightning:select>
     </lightning:layoutItem>

    <lightning:layoutItem padding="around-small">
        <!-- Create a dropdown menu with options for Package code-->
        <lightning:select aura:id="selectPackage" label="Package" name="sourcePackage" onchange="{!c.handleSelect}" >
             <aura:iteration items="{!v.packages}" var="gs">
                <option value="{!gs}" text="{!gs}"/>
             </aura:iteration>
        </lightning:select>
     </lightning:layoutItem>

     <lightning:layoutItem padding="around-small">
        <!-- Create a dropdown menu with options for Health Product-->
        <lightning:select aura:id="selectHP" label="Product" name="sourceProduct"  onchange="{!c.handleSelect}">
             <aura:iteration items="{!v.products}" var="gs">
                <option value="{!gs}" text="{!gs}"/>
             </aura:iteration>
        </lightning:select>
     </lightning:layoutItem>


    <lightning:layoutItem padding="around-small">
        <!-- Create a dropdown menu with options for Active and Inactive -->
        <lightning:select aura:id="selectStatus" label="Status" name="source" onchange="{!c.handleSelect}"
                            class="slds-m-bottom_small">
            <option value="All" text="All"/>
            <option value="Active" text="Active"/>
            <option value="InActive" text="InActive"/>

        </lightning:select>
    </lightning:layoutItem>

     <lightning:layoutItem padding="around-small">
        <!-- Create a dropdown menu with options for Status-->
        <lightning:select aura:id="selectDraftStatus" label="Draft Status" name="sourceHP" 
                   onchange="{!c.handleSelect}" class="slds-m-bottom_small">
            <option value="All" text="All"/>
            <option value="Draft" text="Draft"/>
            <option value="Final" text="Final"/>
        </lightning:select>
      </lightning:layoutItem>
</lightning:layout> 

<!-- Iterate over the list of Group Structures and display them -->
       <lightning:button variant="brand" label="Save Clones" onclick="{!c.SaveClones}" />
       <lightning:button variant="brand" label="Cancel" onclick="{!c.CancelClones}"/>
       <aura:iteration var="groupstructure" items="{!v.ClonedGroupStructures}">
           <c:GSCloneRecord  groupstructure="{!groupstructure}" /> 
        </aura:iteration>
   </lightning:layoutItem>
</lightning:layout>    

Here is the function on that component to cancel and re render.

CancelClones : function(component, event, helper){
      var cloneFalse = "False"; 
          component.set("v.cloning", cloneFalse);
      // helper.CancelClones(component)

    },

Thanks!!

Fred

Answer 1

The type for attributes should be properly cased. It's not strictly required, but recommended. This may or may not be causing the issue:

<aura:attribute name="cloning" type="Boolean" default="false" />

---

JavaScript has a native Boolean value. It is strictly true or false. You'll find that you need to use the correct types and casing or you'll get unexpected results. In this case:

var cloneFalse = false; 

Ironically, in JavaScript, "False" is considered a true value, which you can verify with code like this:

if("False") { alert("The value is truthy!") }

Answer 2

You can use change handler to call the controller there you can refresh the component.

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