Unintended HTML in example code

garretthyder

Hello,

Less support and more a flag to admin that there's some odd HTML ending up in these examples;
https://datatables.net/reference/api/row().child()#Examples

All the best,
Cheers

garretthyder

Seems this is pretty well across the board for JS snippets on the site, some examples;
https://datatables.net/forums/discussion/34247/how-to-get-a-cell-from-a-selected-row-in-datatables
https://datatables.net/reference/api/cell().data()
https://datatables.net/examples/basic_init/hidden_columns.html

tangerine

The HTML is required for the purpose of displaying the code. Actual usage of the code does not deploy the HTML.

garretthyder

Hi @tangerine that's not actually correct. The HTML shouldn't be displayed or copied as it defeats the purpose of the code snippet. Copying one of those sections gives you useless code see below;

<span class="token keyword">var</span> table <span class="token operator">=</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#example'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">DataTable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#example tbody'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span> <span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token string">'td'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token function">alert</span><span class="token punctuation">(</span> table<span class="token punctuation">.</span><span class="token function">cell</span><span class="token punctuation">(</span> <span class="token keyword">this</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token punctuation">)</span><span class="token punctuation">;</span>

The current syntax highlighting system used on this website is broken, hoping a sysadmin sees this.
Cheers

tangerine

Show / hide a row based on its current state, adding the row content as needed.:

var table = $('#example').DataTable();
 
$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).parents('tr');
    var row = table.row( tr );
 
    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row (the format() function would return the data to be shown)
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

If you are using "View page source", then don't.

colin

Yep, just copy if from the tabs on the bottom of the page...

Colin

kthorngren

I think @garretthyder is saying that when looks at the examples he is seeing what he shows in his screenshots. Where we aren't seeing that problem. We are seeing this:

@garretthyder It may be a particular browser with the problem. Have you tried others and what browser are you using that is showing the problem.

Kevin

colin

Another trick is to view the page in private browsing mode in case any extensions are causing the problem,

Colin

garretthyder

Thank you all, greatly appreciate troubleshooting through that. It did come down to an extension, the 'axe - Web Accessibility Testing' extension found here;
https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd
*I'll report an issue to them.

Sorry for the delay in my replies, just found I had to enable email to get notifications from the forum here.

garretthyder

I confirmed with axe and they're aware of the issue quoting;

We’re aware of the issue, it’s been a long standing issue with the syntax highlighter (prism) that we’ve been using.
https://github.com/dequelabs/axe-core/issues/1868
https://github.com/dequelabs/axe-core/issues/2711

colin

Thanks for reporting back, that was a confusing one!

Colin