Forum › How do I...?

Javascript table of contents with Prince 8.0?

web559
Is it possible to include a javascript-generated table of contents in a Prince PDF?

I am using http://fuelyourcoding.com/scripts/toc/ which works in the standard manner, scanning header tags and then inserting a linked list of them into an empty div that you specify.

It works fine on my webpage, but it doesn't show up in my prince PDF, generated like this:

prince http://myurl --javascript -o test.pdf


I get several instances of the innerHTML warning while running prince: warning: innerHTML is not yet supported. Is this what's preventing the TOC from working? I also get this error while including jQuery: https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js?ver=1.6.1:18: error: TypeError: value is not an object. Line 18 appears to contain several references to innerHTML, so perhaps this is related.

Is it possible to use this sort of Table of Contents script in the absence of innerHTML support? Can it be modified to work?

I followed Mike's link to the lovely and helpful PrintingCSS post on javascript TOCs in Prince 8 (http://printingcss.com/?p=61), but it might have the same problem—the table of contents in the sample PDF is blank.
The HTML (with functioning js table of contents): http://www.princexml.com/howcome/2011/oliver-twist/oliver-twist.html
The PDF ("Contents" page is blank): http://www.princexml.com/howcome/2011/oliver-twist/oliver-twist.pdf

(Interestingly, the same Table of Contents works fine with DocRaptor (the Prince-based web service). However, I just learned that they use their own javascript implementation, not Prince 8's, and are still on Prince 7.)
mikeday
We don't support innerHTML in Prince 8.0, but we are working on it, and fixing other jQuery issues. The Oliver Twist example on printingcss.com appears to work if you run Prince on the HTML yourself, perhaps the PDF was generated without the --javascript flag.
mikeday
We have now released Prince 8.1, with support for the innerHTML property and many other JavaScript/DOM improvements.