Is there a comprehensive list of what JS Prince supports? It appears that HtmlDivElements do not support `getBoundingClientRect`. I am having trouble just loading a version of jquery and jquery-ui to use inside of Prince.

Prince runs JavaScript before beginning layout, so properties and methods that depend on element sizes and positions will not be available. This includes getBoundingClientRect and other properties like offsetWidth and offsetHeight, etc.

Would

table.tHead.rows.length

be one of those attributes ?
(I am trying to sort tables)

Just as additional background, I am using sortable.js which is running fine in chrome,
but prince is not happy with it as line 53(so I deleted it), and then at 60 (which is kind of
essential).
I also tried Datatables.js
which caused similar problems, so I'm in a bit of a panic as to how I might workaround.

Prince doesn't support these table-specific DOM properties, although we hope to add them in the future as most of them are structural and do not depend on layout. You can get implement them yourself by going through the DOM and collecting all the <tr> element children, it's just a little tedious to do.

Sorry, I don't follow; Do you mean manipulate the DOM from the server side ?

I mean you can access table.tHead.rows by doing something like this:

var thead = table.getElementsByTagName("thead")[0];

for (var elem = thead.firstElementChild; elem != null; elem = elem.nextElementChild)
{
    if (elem.tagName == "TR") { ... }
}

I think what I will do is bypass the built-in javascript interpreter, use chrome to process the javascript, and copy/paste the final body subtree (minus the javascript) into a new html file and process that through princeXML. Would've been nice though.
Thanks,
Robert

That might be a quicker solution. We'll get there one day.

Hi rws68, that is indeed one solution.

Another solution that might work is to write a small script to help Prince support what you need, and use the --script argument. I'd like to have a look at the JavaScript libraries you've tried to use to see what is missing from Prince's JavaScript support. Seems there are several scripts called sortable (or sortable-something), would you mind sharing some links?

With some luck I might be able to write a compatibility script too

Announcement: repos for tests/utils

http://www.kryogenix.org/code/browser/sorttable/sorttable.js

Ah, the Stuart Langridge lib - I've come across it before.

I'm not entirely sure what you are trying to do here. The PDF generated by Prince won't be interactive, so you won't be able to click headers to sort the data "live". But you can use Prince with sorttable.js without any errors - just use the attached file and add this argument to the command line:

--script /path/compat.js

Announcement: repos for tests/utils

1. compat.js‎ 0.6 kB ‎
   Compatibilty shim for sorttable.js

<script>
$(document).ready(function(){
console.log("hello..");
var myTH = document.getElementsByTagName("th")[0];
sorttable.innerSortFunction.apply(myTH, []);
});

Is how I sort it the php generated table. When I load the page into chrome I see it sorted. Your adapter script seems to work in that the error messages are gone, but the table is not getting sorted...

Actually, when compat.js is there, the table in chrome is distorted (although technically sorted).

http://www.factums.ca/workspace/my-files/prince.php
You can see it for yourself.

Hi,
first compat.js needs to run before sorttable.js so you should move it one line up. I'm not surprised if it causes odd effects in Chrome since it is trying to fake parts of the DOM that Chrome actually does support, in the process clobbering the host objects Chrome has.

The markup seems a bit messy.. You expect the part underneath the header "Authorities" to be sorted?

Announcement: repos for tests/utils

compat.js clobbers the table no matter where it is. It doesn't work in chrome or in Prince.

http://www.factums.ca/workspace/my-files/prince-nocompat.php#authh
is what it should look like.

My code's not messy, it's "Agile".

Hi again, you are right - compat.js didn't take into account the fact that nested tables exist, so it did indeed mess up that page badly. A new and fixed version is attached.

There's one more thing you should do to make this reliable: sorttable.innerSortFunction doesn't actually get defined until the module's init() method has run. I suggest adding a sorttable.init() call just inside the document.ready block to make sure the method is defined when you try to call it:

$(document).ready(function(){
sorttable.init();
var myTH = document.getElementsByTagName("th")[0];
sorttable.innerSortFunction.apply(myTH, []);

I hope this works for you!

Announcement: repos for tests/utils

1. compat.js‎ 1.1 kB

Edited 21 Nov 2016 by hallvord

It seems to be doing the sort when viewed in Chrome.
But it's back to reporting the error at line 53 in sorttable.
I did make sure and put the init() call as you recommended.

It's not mission critical, though, I still have the fallback approach.
Thanks for trying.

Yes, if you don't comment out line 53 we need to fake table.tHead as well
I've put the compat script here in case others need it:
https://github.com/yeslogic/prince-scripts/tree/master/compatibility/sorttable
Also attached. I've tested this against your site and it seems to work..

Announcement: repos for tests/utils

1. compat.js‎ 1.8 kB