html tables with template tags (but not inside td tag)

Joe Love

unread,

Jan 12, 2016, 10:56:44 AM1/12/16

to phantomjs

It seems like phantomjs does not like <template> tags inside of a <table> or <tr> tag. The <template> tag was introduced a long while ago, and intentionally is supposed to be supported as a child of nearly any other element, including <table> and <tr>.

I've been utilizing them in an experiment with vue.js, so I know it works in the major web browsers, but I went to try it with phantomjs, and received unexpected errors: the result of it moving the <template> tag outside of the <table>.

Here's the test html code I have for demonstration purposes:

<!DOCTYPE html>
<html>
 <head>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.min.js' type="text/javascript"></script>
 </head>
 <body>
  <div id='page'>
   <div id='content'>
    <h1 class='ui-widget-header ui-corner-top'>Job List</h1>
    <table id="job_report" class="job_report">
     <thead>
      <tr>
       <th class='nowrap'> Job # </th>
      </tr>
     </thead>
     <tbody>
      <template v-for='entry in report.jobs'>
       <tr>
        <td colspan=4>{{entry.number}}</td>
       </tr>
      </template>
     </tbody>
    </table>
    <script type='text/javascript'>
     lastnote = null;
     jobdata = new Vue({
      el: '#job_report',
      data: {
       report: {'jobs': [{"number":"12345"}, {"number":"67890"}]},
      },
     });
    </script>
   </div>
  </div>
 </body>
</html>

I've been using phantomjs from the command line like this:

phantomjs render_page.js test.html

render_page.js:

var page = require('webpage').create(),
  system = require('system'),
  address;

if(system.args.length === 1) {
  console.log('Usage: render_page.js <URL>');
  phantom.exit();
}
address = system.args[1];

page.onConsoleMessage = function(msg) {
  console.log(msg);
}
page.open(address, function(status) {
  if(status !== 'success') {
    console.log('Failed to load address "'+address+'"');
  } else {
    console.log(page.content);
  }
  phantom.exit();
});

Doing this will result in showing you html content that doesn't have the data loaded, and the <template> tag gets moved before the table (as if it were something like a <div>).

I'm not sure where to start in helping to solve the problem, but I figured I'd report it, since all the modern web browsers (firefox, chrome, safari, opera, edge) handle it correctly.

-Joe

Christopher Tate

unread,

Feb 10, 2016, 5:45:20 PM2/10/16

to phantomjs

I'm running into a similar issue as well. Does the PhantomJS not currently support template tags correctly?

Joe Love

unread,

Feb 10, 2016, 6:03:05 PM2/10/16

to phan...@googlegroups.com

From what I can tell, this is actually a problem with qtwebkit, which phantomjs (and wkhtmltopdf) both depend upon. It supports template tags *unless* they are embedded inside a <table> or <tr> tag (possibly others as well).

Ultimately, I decided to use a different product, as I was unable to wait for a patch or release cycle.

-Joe

Reply all

Reply to author

Forward