1

I am trying to make a dynamic filter on accounts. What I want to achieve is to show only the records where the checkboxes are true.

The issue I have is that my function is not working based on a checkbox selection.

In my lightning debug console I see the events being logged but no actions.

Controller

    public class accountList {
    @AuraEnabled
    public static List<Account> getAllAccounts()
    {
        List<Account> lstacc=[select Name,BillingCity from Account where BillingCity != null];
        return lstacc;
    }
}

Component

<aura:component controller="accountList">
    <aura:attribute name="allaccounts" type="Account[]" description="All accounts" />
    <aura:handler name="init" value="{!this}" action="{!c.fillAccount}"/>
    <aura:attribute name="name" type="string" /> 
    <aura:attribute name="text" type="string" /> 
    <aura:attribute name="value" type="string"/> 
    <aura:attribute name="selectedvalues" type="string" />
    <aura:attribute name="SelectedCity" type="List[]" />
    <aura:attribute name="myBool" type="Boolean" default="true"/>
    <div class="container">       
        <div>
            <div style="background-color: #7f7e8a;height: 20px;"></div>    
            <aura:iteration items="{!v.allaccounts}" var="account">
                <article class="slds-card">
                    <div class="slds-card__header slds-grid">
                        <header class="slds-media slds-media--center slds-has-flexi-truncate">
                            <div class="slds-media__body slds-truncate">
                                <h2>
                                    <a href="javascript:void(0);" class="slds-text-link--reset">
                                        <span class="slds-text-heading--small">{!account.Name}</span>
                                    </a>
                                </h2>
                            </div>
                        </header>
                    </div>
                    <div class="slds-card__body">{!account.BillingCity}</div>
                </article>
            </aura:iteration>
        </div>
    </div>   
    <aura:iteration var="a" items="{!v.allaccounts}" indexVar="indx">
        <ui:inputCheckbox aura:id="checkbox" text="{!a.BillingCity}" name="{!indx}" label="{!a.BillingCity}" change="{!c.selectoptionvalue}"/>
    </aura:iteration>
    <aura:iteration items="{!v.selectedvalues}" var="account">
        <article class="slds-card">
            <div class="slds-card__header slds-grid">
                <header class="slds-media slds-media--center slds-has-flexi-truncate">
                    <div class="slds-media__body slds-truncate">
                        <h2>
                            <a href="javascript:void(0);" class="slds-text-link--reset">
                                <span class="slds-text-heading--small">{!account.Name}</span>
                            </a>
                        </h2>
                    </div>
                </header>
            </div>
            <div class="slds-card__body">{!account.BillingCity}</div>
        </article>
    </aura:iteration>
</aura:component>

Javascript Controller

({      
    fillAccount : function(component, event, helper) {
        var action = component.get("c.getAllAccounts");
        action.setCallback(this,function(a){
            var state=a.getState();
            if(state == "SUCCESS"){
                component.set("v.allaccounts",a.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    selectoptionvalue :function(component,event,helper){
        var temp=component.get("v.selectedvalues");
        var SelectedCity=component.get("v.SelectedCity");
        var accountdetails = component.get("v.allaccounts");
        temp = [];


        var check = component.find("checkbox")
        var SelectedCity = [];
        if(check.get("v.value")== true){
            SelectedCity.push({'ids':check.get("v.name"),'name':check.get("v.text"),'value':check.get("v.value")});    }

        if(check.get("v.value") == false){
            for(var j=0;j<SelectedCity.length;j++){
                if(SelectedCity[j].ids == check.get("v.name")){
                    var index = j;
                }
            }
            SelectedCity.splice(index,1);
        }
        component.set("v.SelectedCity",SelectedCity);      
        var accountdetails = component.get("v.allaccounts");        
        for(var i=0;i<accountdetails.length;i++){
            for(var k=0;k<SelectedCity.length;k++){
                if(accountdetails[i].BillingCity == SelectedCity[k].name){
                    temp.push(accountdetails[i]);
                }
            }
        }
    }
})
  • please avoid deleting and reposting questions in order to draw more attention to your posts. Thanks – glls Jan 28 '18 at 14:45
  • @glls As nobody could answer my previous question and I am trying another approach I deleted the post as it doesnt add to the community. This post is a total different question but thanks for pointing this out. Furthermore It would be nice to offer some help to solve this issue but thanks anyway. – Thomas Jan 28 '18 at 14:50
  • I'm pretty confident that you could modify your posts to include minimal code samples with a specific problem description, debug info, what you have tried to correct the behavior and point out specific code lines that are causing you a headache. As is, I personally dont feel like going through all your code and pointing out what changes you should make. "Maybe" someone else will... – glls Jan 28 '18 at 15:04
  • Another Pointer (which has been mentioned to you in the past in comments of other of your post(s) ) you should add exception and error handling to your code, and more logging for you to better understand what goes on when you executing your code. – glls Jan 28 '18 at 15:08
  • @glls I completely disagree with you as I already pointed out that the issue is the combination of my checkbox and function. I added all the code so its easy to reproduce. Furthermore your answers do not point in anyway to for example were to look at and isn't very constructive as is the purpose of the exchange. I am not a pro like you to precisely know where to look at if I would I would'n be asking. – Thomas Jan 28 '18 at 15:15
0

What I find form your post is that there are two if block out of which the only one will execute.

 if(event.getSource().get("v.value")){
    SelectedCity.push({'ids':event.getSource().get("v.name"),'name':event.getSource().get("v.text"),'value':event.getSource().get("v.value")});
}
if(event.getSource().get("v.value") == false){
    for(var j=0;j<SelectedCity.length;j++){
        if(SelectedCity[j].ids == event.getSource().get("v.name")){
            var index = j;
        }
    }
     SelectedCity.splice(index,1);
 }

and each time you click on a checkbox controller function "selectoptionvalue" will set SelectedCity to an empty list. Maybe that is the issue in your code. Please have a look at it deeply may this will help you.

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.