3

I have some buttons inside a component that are by default hidden, but are shown when certain event is received.

When I receive the event, I am using $A.util.addClass() and $A.util.removeClass() to remove slds-hide and add slds-show. But this is not working.

Markup:

<lightning:layout aura:id="modalSearch">
    <aura:if isTrue="{!v.showModal}">
        <c:modal title="Test Modal">
            <aura:set attribute="left">
                <lightning:button  aura:id="leftCancelButton" variant="neutral" label="Cancel" onclick="{!c.hideModal}" class="slds-hide" />
            </aura:set>
            <aura:set attribute="right">
                <lightning:button aura:id="rightCancelButton" variant="neutral" label="Cancel" value="modalSearch" onclick="{!c.hideModal}" class="slds-hide"/>
                <lightning:button aura:id="doneButton" variant="brand" label="Done" value="modalSearch" onclick="{!c.handleDone}" class="slds-hide"/>
            </aura:set>        
        </c:modal>
    </aura:if>
</lightning:layout>

<!--some code -->

Controller: Here modal is made visible on click of a button:

showUploadModal: function( component, event, helper ) {
    $A.util.addClass('modalSearch', 'slds-show');  //Theses classes work 
fine
    $A.util.removeClass('modalSearch', 'slds-hide');//Theses classes work 
fine
    component.set( 'v.showModal', true );
}

Now after this modal is opened, after some action an event is thrown from other component and handled in this component helper as below:

Helper, to show the already hidden buttons conditionally:

var leftCancelButton = component.find('leftCancelButton');
var rightCancelButton = component.find('rightCancelButton');
var doneButton= component.find('doneButton');
if($A.get("$Browser.isIPad")){
    $A.util.removeClass(leftCancelButton, 'slds-hide'); 
    $A.util.addClass(leftCancelButton, 'slds-show');
}
else{
    $A.util.removeClass(rightCancelButton, 'slds-hide'); 
    $A.util.addClass(rightCancelButton, 'slds-show');    
}
$A.util.removeClass(doneButton, 'slds-hide'); 
$A.util.addClass(doneButton, 'slds-show');

Modal.cmp markup:

<div>
    <div class="slds-float--left">
        <aura:iteration items="{!v.left}" var="action">
            <span class="slds-p-horizontal--x-small">{!action}</span>
        </aura:iteration>
    </div>
    <div class="slds-float--right">
        <aura:iteration items="{!v.right}" var="action">
            <span class="slds-p-horizontal--x-small">{!action}</span>
        </aura:iteration>
    </div>
</div>

I think this is due to the aura:if. However, can somebody please help what can be solution for this?

  • What is the value if showModal initially ? Please share few more lines of code – Mohith Shrivastava Sep 19 '17 at 13:01
  • @MohithShrivastava : Please have a look now. The showModal is by default false. – Sarang Sep 19 '17 at 13:10
  • 1
    When the if is hiding the elements, it's like they don't exist so your code should set the showModal to true then add the classes. Try moving the set to the first line of the block above the add class – Eric Sep 19 '17 at 13:26
  • @Eric : The "showModal" is made true initiatlly. Only after it is made true the code to add/remove class in helper is executed. I hope I got you right. – Sarang Sep 20 '17 at 5:55
  • Even I am facing a similar situation the only difference is I am not able to add my custom defined CSS classes, whereas I am able to add remove SLDS classes under aura:if component – maniac coder Sep 25 '17 at 15:44
0

Fixed it in markup through what seems a juggle up of aura:if and aura:set:

<lightning:layout aura:id="modalSearch">
    <aura:if isTrue="{!v.showModal}">
        <c:modal title="Test Modal">
            <aura:set attribute="left">
                <aura:if isTrue="{!$Browser.isIPad}">
                    <lightning:button  aura:id="leftCancelButton" variant="neutral" label="Cancel" onclick="{!c.hideModal}" class="{!v.enableButtons ? '' : 'slds-hide'}"/>
                </aura:if>
            </aura:set>
            <aura:set attribute="right">
                <aura:if isTrue="{!$Browser.isIPad}">
                    <lightning:button aura:id="doneButton" variant="brand" label="Done" value="modalSearch" onclick="{!c.handleDone}" class="{!v.enableButtons ? '' : 'slds-hide'}"/>
                    <aura:set attribute="else">
                        <aura:if isTrue="{!v.enableButtons}">
                            <lightning:button aura:id="rightCancelButton" variant="neutral" label="Cancel" value="modalSearch" onclick="{!c.hideModal}" />
                            <lightning:button aura:id="doneButton" variant="brand" label="Done" value="modalSearch" onclick="{!c.handleDone}" />
                        </aura:if>
                    </aura:set>
                </aura:if>
            </aura:set>        
        </c:modal>
    </aura:if>
</lightning:layout>

Still the question of why add/remove class is not working is open.

| improve this answer | |
  • 1
    You accepted this as the answer, but it appears like your question is still not answered. I'm a bit confused here. – dphil Sep 5 '18 at 16:31
  • @dphil : Yes it is not yet answered, though i found a workaround for my problem. Not sure if this is still a valid problem, SF may have fixed it. – Sarang Sep 10 '18 at 9:23
0

I know, it is a old post. Hopefully, anyone still searching might see solution for this.

  • $A.util.addClass
  • $A.util.removeClass

Both doesn't work, if aura:id is used inside aura:if in above conditions.

Of course, aura:if does impact availability of that component and then can only be used in controller javascript for reference in general condition.

| 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.