0

I have an aura:component which have two divs inside it. I run a query on my controller apex class and based on the returned value from the query, i want to hide or show any one of the div. Based on this answer, i wrote the code like this:

<aura:component implements="flexipage:availableForAllPageTypes" access="global"
            controller="ControllerClass">

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

     <div class="buyer">
           <!--rest of the code-->
     </div>

     <div class="seller">
           <!--rest of the code-->
     </div>

</aura:component>

helper.js:

    getType: function(component, event, helper) {
        var action = component.get("c.getUserType");
        action.setCallback(this, function(response){
             var type = response.getReturnValue();
             if (type === 'buyer') {
                  var elements1 = document.getElementsByClassName("buyer");
                  elements1[0].style.display = 'block';
                  var elements2 = document.getElementsByClassName("seller");
                  elements2[0].style.display = 'none';
             }
             if (type === 'seller') {
                  var elements1 = document.getElementsByClassName("buyer");
                  elements1[0].style.display = 'none';
                  var elements2 = document.getElementsByClassName("seller");
                  elements2[0].style.display = 'block';
             }
        });
        $A.enqueueAction(action);
}

This code works fine most of the time. But, sometimes even if I get the response value correct, both divs will be visible. I happens very rarely. I will have reload the page again to solve it. I couldn't find the reason why. So, what could be the problem? How can I solve this?

4

What you implemented is fine. I assume it could be because of cache issue. However, the way you implemented is not the best practice per-se. You should be using aura:if.

Below is how it would look like:

COMPONENT:

<aura:component implements="flexipage:availableForAllPageTypes" access="global"
                controller="ControllerClass">

    <aura:handler name="init" value="{!this}" action="{!c.getType}" />
    <aura:attribute name="showBuyer" type="Boolean" default="false" />
    <aura:attribute name="showSeller" type="Boolean" default="false" />

    <aura:if isTrue="{!v.showBuyer}">
        <div class="buyer">
            <!--rest of the code-->
        </div>
    </aura:if>

    <aura:if isTrue="{!v.showSeller}">
        <div class="seller">
            <!--rest of the code-->
        </div>
    </aura:if>

</aura:component>

CONTROLLER:

getType: function(component, event, helper) {
    var action = component.get('c.getUserType');
    action.setCallback(this, function(response) {
        var type = response.getReturnValue();
        component.set('v.showBuyer', type === 'buyer');
        component.set('v.showSeller', type === 'seller');
    });
    $A.enqueueAction(action);
}
| improve this answer | |
  • thanks for the asnwer. so whats the differece between <aura:if> and <aura:renderIf> – Jayesh Babu Jun 10 at 10:16
  • renderIf is deprecated – salesforce-sas Jun 10 at 10:59
0

Try these options:

1. Use elements1[0].style="display:none"; //instead of .style.display 

OR Define an aura attribute and use aura:renderIf 2.

     <aura:renderIf isTrue="{!v.truthy}">
        True
        <aura:set attribute="else">
          False
        </aura:set>
      </aura:renderIf> 
| improve this answer | |

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.