0

hopefully this will be an easy one. I'm iterating through a list to populate a table, and I want to have checkboxes on the table too. I also want to be able to locate the previously chosen checkbox and set its value to false, sort of like a radio button. I made each checkbox unique using a globalId and indexVar:

<tbody>
                <aura:iteration items="{!v.refactoredData}" var="datum" indexVar="indx">
                        <tr id="{!globalId + indx+'_tr'}">

                            <aura:if isTrue="{!v.checkBoxListener}">

                                <td style="width:60px;"><ui:inputCheckbox aura:id="{!globalId + indx + '_check'}" text="{!indx}" change="{!c.boxChecked}"/></td>{!globalId + indx+'_check'}

                            </aura:if>

Then in the controller I grab the index and value:

boxChecked : function(component, event, helper) {

    var target = event.getSource();
    var idx = Number(target.get("v.text"));
    var val = target.get("v.value");
    helper.checkBox(component, idx, val);

}

Then pass them to the helper where I set an attribute value called prevCheck to the most recently clicked checkbox aura:id, which works. I'm using the prevCheck attribute to locate the checkbox that I want to set false (the last one clicked), only the component.find(id) call always returns undefined:

checkBox : function(component, idx, val){

    if(component.get("v.limitCheck")){

        if(component.get("v.prevCheck")){

            var id = component.get("v.prevCheck");

            console.log('datatable checkbox if if, component.find(component.get("v.prevCheck")) = '+component.find(id)+', component.get("v.prevCheck") = '+component.get("v.prevCheck"));

            component.find(id).set("v.value", false);
        }

        component.set("v.prevCheck", component.getGlobalId()+idx+'_check');

    }

    var listener = component.get("v.checkBoxListener");
    var event = $A.get("e.c:SDS_DataTableCheckbox_Event");
    event.setParams({"checkBoxListener": listener, "isCheckedNow" : val, "index" : idx, data : component.get("v.data")[idx]});

    console.log('event firing, listener = '+listener);

    event.fire();

}

I don't want to use lightning:input because of the required label, but I can't seem to hunt down this ui:inputCheckbox... any ideas?

1

You cannot assign aura:ids dynamically.

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/components_ids.htm

  • opps missed the part he is using aura:id instead of id, good catch – Rao Aug 11 '17 at 19:05

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.