2

I'm developing a lightning component for updating a product's quantity and it's unit from a given list of products.

This is how my component look like

select block and input

This is the nested component updateQuantityCheck

<aura:component >
    <aura:attribute name="activityDetail" type="Activity_Detail__c"/>
    <aura:attribute name="units" type="String[]" default="Unit 1, Unit 2, Unit 3"/>     
    <aura:registerEvent name="updateQuantityCheck" type="c:updateQuantityCheck"/>

        <div class="slds-grid ">
            <div class="slds-col slds-size--6-of-12 slds-medium-size--8-of-12 slds-large-size--8-of-12 slds-text-heading--label">{!v.activityDetail.Product_Name__c}</div>
            <div class="slds-col slds-size--3-of-12 slds-medium-size--2-of-12 slds-large-size--2-of-12">
                <div class="slds-form-element slds-float--right">
                    <input type="number" min="0" id="{! 'number' + v.activityDetail.Id}" class="slds-input number_input" onkeyup="{!c.changeQuantity}"/>
                </div>
            </div>
            <div class="slds-col slds-size--3-of-12 slds-medium-size--2-of-12 slds-large-size--2-of-12">
                <div class="slds-form-element slds-float--right">
                    <ui:inputSelect aura:id="{! 'unit' + v.activityDetail.Id}" class="slds-select select" change="{!c.changeUnit}" value="">
                        <aura:iteration items="{!v.units}" var="unit">
                          <ui:inputSelectOption text="{!unit}" label="{!unit}"/>
                        </aura:iteration>
                   </ui:inputSelect>
                </div>
            </div>
        </div>
</aura:component>

This is js controller file corresponding to the nested component

({
    changeQuantity : function(component, event, helper) {

        var quantity = event.target.value; 
        console.log(quantity);


        var quantity_ad_id = event.target.id;
        console.log(quantity_ad_id);


        if( quantity_ad_id != undefined ){
            var activityDetail_id = number_ad_id.split('number')[1];

            var unit_id = 'unit'+activityDetail_id;
            var unit_block = component.find(unit_id);
            console.log(unit_id);

            var unit = 'unit';
            if( unit_block != undefined ){
                unit = unit_block.get("v.value");
            }

            var quantity_unit = quantity+','+unit;
            console.log('quantity_unit : '+quantity_unit);
        }


    },
    changeUnit : function(component, event, helper) {

        /*
        this was not working
        var unit  = event.target.value;
        */

        /* this fetches value */
        var unit  = event.getSource().get('v.value');

        /* getting undefined */
        var unit_ad_id = event.target.id;
        var activityDetail_id = number_ad_id.split('unit')[1];

        var quantity_id = 'number'+activityDetail_id;
        var quantity_block = component.find(quantity_id);
        console.log(quantity_id);

        var quantity = 'number';
        if( quantity_block != undefined ){
            quantity = quantity_block.get("v.value");
        }
        var quantity_unit = quantity+','+unit;
        console.log('quantity_unit : '+quantity_unit);

    }
})

I'm facing a number of issues here

  1. On loading this from app Preview in chrome, i get these kind of errors in chrome's console

    WARNING: Access Check Failed! Component.setupAttributes():'label' of component 'markup://ui:inputSelectOption {276:19;a}' is not visible to 'markup://c:QuantityCheckDetails {265:19;a}'.
    
  2. on keyup from the input text, i need to take it's value and also take it's unit from the value of near by ui:inputSelect. I'm getting it's quantity. But the unit can't be taken. Getting undefined while taking the ui:inputSelect

    var number_ad_id = event.target.id;
    var activityDetail_id = number_ad_id.split('number')[1];
    
    var unit_id = 'unit'+activityDetail_id;
    console.log(unit_id);
    var unit_block = component.find(unit_id);
    
    var unit = 'unit';
    if( unit_block != undefined ){
        unit = unit_block.get("v.value");
    }
    
  3. On Changing the select, i'm getting value. But can't fetch the id corresponding to that select. i get this error message

    WARNING: Access Check Failed! Component.getEvent():'change' of component 'markup://ui:inputSelect {113:19;a} {{! 'unit' + v.activityDetail.Id}}' is not visible to 'markup://c:todoList {1:2;a}'
    
1
  • by using the normal <select> tag instead of inputSelect, i can now select both id and value of changed select tag. But still i can't fetch adjuscent input using the dynamic id both var unit_block = component.find(unit_id); var quantity_block = component.find(quantity_id); are not working
    – sreejith
    Feb 12 '16 at 8:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.