Programmatic table not rendering correctly with DOM manipulation outside loop

OL Connect Professional Designer
1

I am trying to optimize my code where possible but I have faced a problem where my programmatic table will not render correctly when I move the DOM manipulation outside of the loop, as I’ve read here: “Avoid DOM manipulation when possible”. The added rows just end up outside of the table in spans.

Here is the code I am using.

var table = loadhtml('Snippets/Fragments/invoice-table.html');
var tableRow = query('tbody tr', table);
var tableRowClone;
var tableRows = '';

var details = record.tables.item;
for(var i = 1, l = details.length; i < l; i++){
    tableRowClone = tableRow.clone();
    tableRows += tableRowClone;
}

query('tbody', table).append(tableRows);
results.html(table);

This way, the added rows end up outside of the table. The code that I had that worked looks like this:

var table = loadhtml('Snippets/Fragments/invoice-table.html');
var tableRow = query('tbody tr', table);
var tableRowClone;

var details = record.tables.item;
for(var i = 1, l = details.length; i < l; i++){
    tableRowClone = tableRow.clone();
    query('tbody', table).append(tableRowClone);
}
results.html(table);

Is this just not possible with tables or am I missing something?

2

Your code looks fine, but I think you’re running into a bug in our script engine. The string that is passed to append() is not parsed properly in this scenario. I’ll enter a problem ticket, thanks for bringing this to our attention.

To make it work you could try replacing this line:

var tableRows = '';

by this:

var tableRows;

And this line:

tableRows += tableRowClone;

by this:

tableRows = tableRows ? tableRows.add(tableRowClone) : tableRowClone;
3

Thanks for your reply.

I have modified my code to look like this but the script will not process and gives no error.

var table = loadhtml('Snippets/Fragments/invoice-table.html');
var tableRow = query('tbody tr', table);
var tableRowClone;
var tableRows;

var details = record.tables.item;
for(var i = 1, l = details.length; i < l; i++){
    tableRowClone = tableRow.clone();
    tableRows = tableRows ? tableRows.add(tableRowClone) : tableRowClone;
}

query('tbody', table).append(tableRows);
results.html(table);
4

Sorry, I just realized that in 1.3 you’ll need to do:

var tableRows = undefined;

Otherwise the script engine will reuse the variable and append rows whenever the scripts are executed (for example, when browsing through records). This bug is fixed in 1.4.

But I’m not sure if that explains why it won’t work for you. When I follow these steps in 1.3 I get the expected result:

  • Open invoice-ol-transpromo-ctx and data from Transact-EN.
  • Edit invoice-table.html and switch to the source tab.
  • Remove the first table (we’re only interested in the second table).
  • Remove all “data-repeat” attributes (important).
  • Save and close the snippet.
  • Create a new script with selector “body”.
  • Paste your last script, changing the snippet path and the detail table name.
  • Assign “undefined” to the variable mentioned above.
  • Switch to the preview tab.
5

Yes, it works now.

Thanks for your help and the explanation!

Kind Regards,
Sven Slijkoord