2

I have a table with inline edit with a button to save changes and another to add new lines,this table is connected to Salesforce through an APEX Controller,the table is already saving and updating correctly but usually works once before this error starts appearing in most functions,"Cannot set property 'innerHTML' of null".

cmp:

<aura:attribute name="active" type="boolean"/>
<aura:attribute name="save" type="boolean" default="false"/>
<aura:attribute name="cancel" type="boolean" default="false"/>
<aura:attribute name="lstTypeDetails" type="List"  /> 
<aura:attribute name="editField" type="boolean[]"/>

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

<lightning:input type="toggle" label="On/Off" name="On/Off" checked="{!v.active}" onchange="{!c.switchToggle}" />  
<br></br>

<span class="nolabel">

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

        <table class="table1 slds-table slds-table_bordered slds-table_cell-buffer">
            <thead>
                <tr class="slds-text-title_caps">
                    <th scope="col">
                        <div class="slds-truncate" title="Type">Type</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Order">Order</div>
                    </th>
                    <th scope="col">
                        <div class="slds-truncate" title="Active">Active</div>
                    </th>
                </tr>
            </thead>

            <tbody>
                <aura:iteration items="{!v.lstTypeDetails}" var="typeDetailItem" indexVar="index">
                    <tr>
                        <th scope="row" data-label="Type">
                            <div class="slds-truncate" data-value="{!typeDetailItem.idRow}" ondblclick="{!c.editFirstField}">
                                <aura:if isTrue="{!typeDetailItem.idField[0]}" >
                                    <span data-value="{!typeDetailItem.idRow}" id="0" onkeypress="{!c.keyCheck}" >
                                        <lightning:input value="{!typeDetailItem.typeDetailsName}" name="{!typeDetailItem.idRow+'type'}" label=" "  />
                                    </span>
                                    <aura:set attribute="else">
                                        {!typeDetailItem.typeDetailsName}

                                    </aura:set>

                                </aura:if>

                            </div>
                        </th>
                        <td data-label="Order">
                            <div class="slds-truncate" data-value="{!typeDetailItem.idRow}" ondblclick="{!c.editSecondField}">

                                <aura:if isTrue="{!typeDetailItem.idField[1]}" >
                                    <span data-value="{!typeDetailItem.idRow}" id="1" onkeypress="{!c.keyCheck}" >
                                        <lightning:input type="number" value="{!typeDetailItem.typeDetailsOrder}" name="{!typeDetailItem.idRow+'order'}" label=" " />
                                    </span>
                                    <aura:set attribute="else">
                                        {!typeDetailItem.typeDetailsOrder}
                                    </aura:set>

                                </aura:if>
                            </div>
                        </td>
                        <td data-label="Active">
                            <div class="slds-truncate" data-value="{!typeDetailItem.idRow}" ondblclick="{!c.editThirdField}">

                                <aura:if isTrue="{!typeDetailItem.idField[2]}">
                                    <span data-value="{!typeDetailItem.idRow}" id="2" onkeypress="{!c.keyCheck}">
                                        <lightning:input type="checkbox" checked="{!typeDetailItem.typeDetailsActive}" name="{!typeDetailItem.idRow+'active'}" label=" "/>
                                    </span>
                                    <aura:set attribute="else">
                                        <lightning:input type="checkbox" checked="{!typeDetailItem.typeDetailsActive}" disabled="true" name="{!typeDetailItem.idRow+'active'}" label=" "/>
                                    </aura:set>

                                </aura:if>

                            </div>
                        </td>
                        <td data-label="Edit">
                            <lightning:buttonMenu name="{!typeDetailItem.idRow}" alternativeText="Settings" onselect="{! c.handleMenuSelect }">
                                <lightning:menuItem label="Edit" value="edit" />
                                <lightning:menuItem label="Clone" value="clone" />

                            </lightning:buttonMenu>

                        </td>

                    </tr>

                </aura:iteration>

            </tbody>              

        </table>

        <br></br>

        <lightning:button variant="brand" label="Add new element" iconName="utility:add" iconPosition="left" onclick="{!c.addNew}"/>

        <aura:if isTrue="{!v.save}">
            <lightning:spinner variant="brand" size="large" alternativeText="loading"/>

            <aura:set attribute="else">
                <lightning:button variant="brand" label="Save changes" iconName="utility:save" iconPosition="left" onclick="{! c.save }"/>
            </aura:set>

        </aura:if>

        <aura:if isTrue="{!v.cancel}">
            <lightning:button variant="destructive" label="Discard new lines" iconName="utility:close" iconPosition="left" onclick="{! c.cancel }"/>
        </aura:if>

    </aura:if>

</span>

Controller:

doInit : function(component, event) {

    var idAc = component.get("v.recordId");
    var TypeRecord = 'Technical Info';
    var actionM = component.get("c.getStatus");
    var TypeDetailsName = 'Technical_Info';
    var action1 = component.get("c.getTIorGroup");

    actionM.setParams({"TypeRecord":TypeRecord,"idType":idAc});
    actionM.setCallback(this, function(response){
        var state = response.getState();
        if(state==="SUCCESS"){
            var status = response.getReturnValue();
            console.log(status);
            component.set("v.active", status);
        }
    });

    $A.enqueueAction(actionM);


    action1.setParams({"TypeDetailsName":TypeDetailsName,"idType":idAc});
    action1.setCallback(this, function(response){
        var state = response.getState();
        if(state==="SUCCESS"){
            var lstType = response.getReturnValue();
            console.log(lstType);
            component.set("v.lstTypeDetails", lstType);
        }
    });
    $A.enqueueAction(action1);

},
addNew : function(component, event) {

    var idAc = component.get("v.recordId");
    var TypeDetailsName = 'Technical_Info';
    var newList = component.get("v.lstTypeDetails");
    var listSize = newList.length;
    var JSONwrappers = JSON.stringify(newList);
    var actionNew = component.get("c.createNewTypeDetails");

    actionNew.setParams({"JSONwrappers":JSONwrappers,"TypeDetailsName":TypeDetailsName,"idType":idAc,"position":listSize});
    actionNew.setCallback(this, function(response){
        var state = response.getState();
        if(state==="SUCCESS"){

            var newLine = response.getReturnValue();
            console.log(newLine);


            component.set("v.lstTypeDetails", newLine); //

        }
    });

    $A.enqueueAction(actionNew);


    component.set("v.cancel",true);


},  
save :  function(component, event) {
    component.set("v.save",true);

    var idAc = component.get("v.recordId");
    var TypeDetailsName = 'Technical_Info';
    var listWrappers = component.get("v.lstTypeDetails");
    var JSONwrappers = JSON.stringify(listWrappers);
    var actionSave = component.get("c.saveChanges"); 
    var actionReload = component.get("c.getTIorGroup");

    console.log(listWrappers);

    actionSave.setParams({"JSONwrappers": JSONwrappers });
    actionSave.setCallback(this, function(response) {
        var state = response.getState();
        console.log(state);
        if (state === "SUCCESS") {

            setTimeout(function(){ component.set("v.save",false); }, 1000);
            var updatedlist = response.getReturnValue();

            component.set("v.lstTypeDetails",updatedlist); 
            component.set("v.cancel",true);

            var message = 'Changes were saved successfully';
            var toastEvent = $A.get("e.force:showToast");

            toastEvent.setParams({
                mode: 'dismissable',
                message: message,
                type: 'success'
            });
            toastEvent.fire();

        }

        else if(response.getReturnValue() === 'ERROR') {
            var toastEvent = $A.get("e.force:showToast");
            toastEvent.setParams({
                mode: 'dismissable',
                title: 'ERROR',
                message: 'Something went wrong.Please try again',
                type: 'error'
            });
            toastEvent.fire();
        }

    });

    $A.enqueueAction(actionSave);

    // Reload

    actionReload.setParams({"TypeDetailsName":TypeDetailsName,"idType":idAc});
    actionReload.setCallback(this, function(response){
        var state = response.getState();
        if(state==="SUCCESS"){

            var reload = response.getReturnValue();

            component.set("v.lstTypeDetails", reload);

        }
    });

    $A.enqueueAction(actionReload);


},

I can post the APEX if necessary

Stack Trace:

Object.updateText()@link/libraries/lightning/domLibrary/dom.js:189:80 Object.showFormattedValue()@link/components/lightning/input.js:387:13 Object.onAttrChangeFromOutside()@link/components/lightning/input.js:286:26

1

Finally solved it!

Had to change the order input from number to text

Probably a bug from lightning

Changed this input

<lightning:input type="number" value="{!typeDetailItem.typeDetailsOrder}" name="{!typeDetailItem.idRow+'order'}" label=" " />

to

<lightning:input type="text" value="{!typeDetailItem.typeDetailsOrder}" name="{!typeDetailItem.idRow+'order'}" label=" " />
  • Please don't forget to come back and accept this answer when you are able. – Adrian Larson Feb 2 '18 at 21:07

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.