0

Actually, I want to access TD and TR element in my JS Controller for further processing. " table = document.getElementsById("myTable"); console.log(table);" this line causes an error, if I use a simple table with iteration it is working fine but in lightning:datatable it is showing an error.

Here is my code:- Component:-

<aura:component controller="AccountShowController" >
<aura:attribute name="Account" type="Account[]" />
<aura:attribute name="columns" type="List" />
<aura:attribute name="SearchKey" type="String" />
<aura:handler name="init" value="{!this}" action="{!c.myAction}"/>

<div class="slds-form-element">

    <div class="slds-form-element__control">
        <div class="slds-grid slds-gutters">
            <div class="slds-col slds-size_2-of-3">
                <label class="slds-form-element__label" for="text-input-id-1">Search Account</label>
                <input type="text" value="{!v.SearchKey}" onkeyup="{!c.SearchAccount}" id="myInput" class="slds-input" placeholder="Search Accounts" />

            </div>
            <div class="slds-col slds-size_1-of-3">
                <span></span>
            </div>
        </div>



    </div>
</div><br /><br />
<div id="myTable">
    <lightning:datatable
                         keyField="id"
                         data="{!v.Account}"
                         columns="{!v.columns}"
                         hideCheckboxColumn="true" />
</div>

JS Controller:-

({
myAction : function(component, event, helper) {
    component.set('v.columns', [
        {label: 'Account name', fieldName: 'Name', type: 'text'},
        {label: 'Phone', fieldName: 'Phone', type: 'number'},
        {label: 'Annual Revenue', fieldName: 'AnnualRevenue', type: 'number'}
    ]);

    var action = component.get("c.showAccounts");
    action.setCallback(this, function(response){
        var state=response.getState();
        if(state === 'SUCCESS')
        {
            component.set("v.Account", response.getReturnValue());
        }
        else
        {
            alert("error");
        }
    });
    $A.enqueueAction(action);

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

    var input, filter, table, tr, td, i;
    input = document.getElementById("myInput");
    //input = component.get("v.SearchKey");
    //var input = component.find("myInput").get("v.value");
    console.log(input.value);
    filter = input.value.toUpperCase();


    table = document.getElementsById("myTable");
    console.log(table);
     tr = table.getElementsByTagName("tr");
    console.log(tr.length);
   for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {

                tr[i].style.display = "";
                console.log("hi");
            } else {
                tr[i].style.display = "none";
                console.log("hello");

            }       
        } 
    }


}

})

Apex Controller:-

public class AccountShowController {

@AuraEnabled
public static List<Account> showAccounts()
{
    return [SELECT Id, Name, Phone, AnnualRevenue From Account];
}

}

Thanks in advancve.

5
  • 2
    What error did you get? Where are you facing the problem? Commented Aug 23, 2018 at 7:23
  • Actually, I want to access TD and TR element in my JS Controller for further processing. ' table = document.getElementsById("myTable"); console.log(table);' this line causes an error, if I use a simple table with iteration it is working fine but in lightning:datatable it is showing an error; Commented Aug 23, 2018 at 7:26
  • 1
    Update your question with this so that everyone can see your problem. Comments may not be seen by everyone. Commented Aug 23, 2018 at 7:28
  • Yes, var table = document.getElementsById("myTable"); console.log(table); will throw an error because you are trying to access element which is not in the current component dom that is part of some other component DOM, and lightning doesn't allow this. Commented Jul 1, 2019 at 14:52
  • And if you just want to apply some style, then there is no need of JavaScript that you can directly do in the CSS part. Commented Jul 1, 2019 at 14:53

1 Answer 1

6

This is just Locker Service working as designed. To stop malicious code from one component being able to scrape data from another component, Locker Service prevents access to the DOM elements of a component if you're trying access from a different namespace.

Data table is in the lightning namespace, so you'll never be allowed to get the DOM elements.

Read up on Locker Service here:

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

Then, go back to why you are trying to access the DOM, and figure out a more Lightning-ish way of doing it instead.

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .