0

I have a custom component that sets a table header and body dynamically with jQuery append but it's not working.

I have loaded my scripts into .cmp and it's working cause I start my onInit controller method when these are loaded successfully.

This is what one of my header/body responses look like:

Header:

<tr class="slds-line-height_reset">
<th>
    <div class="slds-truncate">
    </div>
</th>
<th class="tmTableHeader" scope="col">
    <div class="slds-truncate">
        <lightning:input type="toggle" label="Test header 1" name="1-0" checked="false" onchange="{!c.checkFullColumn}"/>
    </div>
</th>
<th class="tmTableHeader" scope="col">
    <div class="slds-truncate">
        <lightning:input type="toggle" label="Test header 2" name="1-1" checked="false" onchange="{!c.checkFullColumn}"/>
    </div>
</th>

Body:

<tr class="slds-hint-parent">
<td style="width:30%">
    <div class="slds-truncate">Test text</div>
</td>
<td>
    <div class="slds-truncate">
        <lightning:input type="toggle" name="1-0" checked="false" onchange="{!c.handleToggleElement}"/>
    </div>
</td>
<td>
    <div class="slds-truncate">
        <lightning:input type="toggle" name="1-1" checked="false" onchange="{!c.handleToggleElement}"/>
    </div>
</td>

And here are my .cmp and .controller function

.cmp:

<table class="slds-table slds-table_cell-buffer">
    <thead id ="concesionarioHeader">

    </thead> 
    <tbody id ="concesionarioBody">

    </tbody>
</table>

.controller (headerHTML and bodyHTML are string variables):

$('#concesionarioHeader').append(headerHTML);
$('#concesionarioBody').append(bodyHTML);

If I try hardcoding my headerHTML and bodyHTML into my .cmp it works but it's failing when trying from $().append. Also if I debug $('#concesionarioHeader') and $('#concesionarioBody') both have references found.

Is there a way to fix this? Or do I have to make a different approach to set my table header and body with these string values?

3

When you are not using native lightning javascript APIs to get elements from DOM (like jQuery), it will cross the component boundary and get all the elements matching the identifications. For example, when you are loading same table component twice with different data, then there will be 2 concesionarioBody tbody's present in window and when you add a row from any component, it will be added in both the components. To avoid this situation, you can use $(component.find('concesionarioBody').getElement()) which will not cross component boundary and give the tbody in same component. Below is the working example:

cmp file:

<div class="slds-theme_default">
    <lightning:button label="Add Row" onclick="{!c.addRow}" />
    <table class="slds-table slds-table_cell-buffer">
        <thead aura:id="concesionarioHeader">
            <tr>
                <th>Id</th>
                <th>Name</th>
            </tr>
        </thead> 
        <tbody aura:id ="concesionarioBody">

        </tbody>
    </table>
</div>

controller.js:

addRow : function(component, event, helper){
    $(component.find('concesionarioBody').getElement()).append('<tr><td>101</td><td>My Name</td></tr>');
}
  • I tried setting id as aura:id but now when i debug component.find().getElement() it gives me null – molinet Aug 23 at 10:37
  • That means it didn't render. Can you add full code in question – salesforce-sas Aug 23 at 10:40
  • Sorry, I didn't write ir properly. Is console.log(component.find('concesionarioHeader').getElement()); which is giving me null. I edited my first comment – molinet Aug 23 at 10:42
  • Okay, now it's not giving me any error but if I debug console.log(component.find('concesionarioBody').getElement()); before and after $(component.find('concesionarioBody').getElement()).append(bodyHTML); it stills give me null.. – molinet Aug 23 at 10:50
  • what is bodyHTML? and can you add full code in question? – salesforce-sas Aug 23 at 11:20

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.