Develop Reference

wkhtmltopdf and the jQuery.ready() function

I've been trying to generate a PDF using the wkhtmltopdf tool (http://wkhtmltopdf.org/). The page from which I want to generate a PDF using jQuery and has some initializations using a jQuery.ready() function, something like this:
jQuery(function() {
// do something
});
However, when I try to generate a PDF from the page the script is not executed. I've tried setting a delay to wait for the JavaScript to be executed with the option:
--javascript-delay 30000
But the result is the same.
When I've enabled wkhtmltopdf's JavaScript debugging option I get a warning, which I'm not sure if it's related to the problem:
Warning: undefined:0 TypeError: 'null' is not an object
Has anyone encountered this problem? Is there some kind of workaround?
EDIT: Seems the problem is caused by the error Warning: undefined:0 TypeError: 'null' is not an object. I've managed to print the error on the PDF using:
window.onerror = function(error, url, line) {
$('body').before('<b> Error: ' + error + '</b> <br />');
$('body').before('<b> Url: ' + url + '</b> <br />');
$('body').before('<b> Line: ' + line + '</b> <br />');
console.log(error, ' ', url, ' ', line);
};
But the information is very limited and I have no idea what might cause it:
Error: TypeError: 'null' is not an object
Url: undefined
Line: 0

The problem turned out to be that Qt doesn't support localStorage, so one of the initialization scripts failed which cause the jQuery.ready() not being executed.
I've managed to debug it with a browser with Qt support: QtWeb. (Tried Arora as well, couldn't run it on my system).

How to catch all javascript warnings and errors to an output div?

i'm using try, catch, for debugging, but warnings is not create exceptions. How to get all javascript warnings and errors to output div?
UPDATED:
If browser supports Afaik logging, how to get that log to string or output div?
UPDATED:
I found the way how to do that:
i can reload console.log function to my custom function an call native console.log function.

First of all, get rid of the try catch. Don't use try catch when you are debugging.
Second, you don't want to out errors to a div, use firebug or inspector for that - console.log();
Third, if you really want to do it: you could use try catch and in the catch, use something like
$('body').append($('div').html('variable for error message goes here'));
if you are using jquery
OR
document.getElementByTagName("body").appendChild( document.createTextNode("variable for error message goes here") );
if you have plain javascript
EDIT: try looking up ie debug bar , ie webDeveloper

I understand myself why someone may want something to actually happen when an error occours in the document. The answers above just say that you would use developer tools, but I needed things to actually happen, and after some searching, here's what I found...
If you wish to catch all errors that come through, you can put the following code into your file, best at the top:
window.onerror = function(errorMsg, url, lineNumber){
// any action you want goes here
// errorMsg is the error message itself.
// url should be the file presenting the error, though i have
// found that it only presents to me the address of the site.
// lineNumber is the line number the error occoured on.
// here is an example of what you could do with it:
alert("Error in " + url + " at " + lineNumber + ":\n" + errorMsg);
}
I, myself, like to output the errors to a div that contains them all, though you can do literally anything to this information that you could do with any other string passed to a function.
Here is an example of what may happen if you throw an error with a button using the code above:
Error in your.site.here at 1:
Uncaught ReferenceError: foo is not defined

For IE javascript debugging you can follow this guide:
http://msdn.microsoft.com/en-au/library/ie/gg699336(v=vs.85).aspx
Keep in mind that the developer tools window must be open prior to loading the page for the warnings and errors to appear in the console.
For webkit, (chrome, safari) developer console - here is a guide:
https://developers.google.com/chrome-developer-tools/docs/console
...Firefox also has a console

Is there a way to try/catch an entire page dynamically?

I have a page on which mysterious JavaScript errors keep popping up. They appear to be coming from the application we use and do not own the source for. I'm working on a real solution to this issue, but we have a demo tomorrow and I was wondering if there is a way to just suppress JS errors page wide (like wrapping ALL the javascript components in a giant try catch).

You could add a handler to the window.onerror event. In this case, all the errors that occur inside the window will be redirected to the handler of this event. (I did test this in Firefox and it worked, but I was having trouble with it in Chrome - my Chrome installation is pretty messed up, so that could be the problem, but there are Chromium bugs filed that relate to this issue: bug #7771 and bug #8939)
window.onerror = function (msg, url, line) {
alert("Error on line " + line + " in " + url + ":\n" + msg);
// return true to prevent browser from displaying error
return true;
}

Problem using window.location in a function called from onsubmit

I'm currently creating a very small form on my homepage using HTML and JavaScript. I've run into a problem I'm pretty sure I could circumvent somehow (probably in a pretty ugly way though), but I got interested in why this error appears.
I have a form on my page which I specify in the following way:
<FORM name="form1" onsubmit="submitTheScript()">
The function "submitTheScript()" is placed in the header and reads:
setCookie("F_GivenSum", GivenSum);
window.location="LastScreen.html";
"setCookie()" is a function that basically just, well, creates a cookie :).
Now, the problem arises with the last line of code. I'm trying to send the user to another page, after the cookie has been set (I'm doing some controls that the input value is alright, but I've skipped that part here) but FireFox gives me the following error:
uncaught exception: [Exception... "Cannot modify properties of a WrappedNative" nsresult: "0x80570034 (NS_ERROR_XPC_CANT_MODIFY_PROP_ON_WN)" location: "JS frame :: chrome://global/content/bindings/autocomplete.xml :: onxblpopuphiding :: line 827" data: no]
I guess I can't call this function the way I do, from within a onsubmit command, however, I don't see why.

Okay, I did a quick test and found out that you need to assign the onsubmit event handler via javascript like so:
document.getElementById("myform").onsubmit = doSubmit;
function doSubmit() {
document.cookie = "F_GivenSum=200";
window.setTimeout(function() {
window.location = ('test2.html');
}, 20);
return false;
}
This did not give any errors in FF.

Firebug not showing Javascript errors for Rails applications

I have a Rails application, and when I have Javascript errors they are not showing in the Firebug console. I have 'Show javascript errors' and 'Show javascript warnings' selected.
When I insert javascript errors in a basic html file, the errors show as expected.
In the javascript of the Rails app, it only shows errors in rare cases.
For example i can insert nonsense like:
dfghaefb;
and no error is shown in Firebug. But if i insert a space in there Firebug does show the error:
dfgh aefb;
Any ideas? This is driving me nuts.
UPDATE:
Pumbaa80 was right, it's syntax vs runtime.
So I set up onerror:
onerror=errorHandler;
var error="";
function errorHandler(errMessage,url,line){
error="There is an error at this page.\n";
error+="Error: " + errMessage+ "\n";
error+="URL: " + url + "\n";
error+="Line: " + line + "\n\n";
error+="Click OK to continue viewing this page,\n";
alert(error);
return true;
}
And I have a method with an error:
function initForm() {
asdfs;
}
And it works when I call it outside of a method:
initForm();
but not in this case:
document.observe('dom:loaded', function() {
initForm();
});
Why is that?

dfghaefb;
produces a run-time error. Those errors may be suppressed by putting an onerror handler on the window or by trapping them in a try/catch in some way. In that case, Firebug won't show anything.
In contrast,
dfgh aefb;
is a syntax error, which is shown in the error console, regardless of try/catch and onerror.

Did you let the page load completely? I have a rails app running in front of me right now with firebug on and i entered dfghaefb; and yes it does throw an error!
ReferenceError: dfghaefb is not defined { message="dfghaefb is not defined", more...}
Running Firefox 3.6.3, Firebug 1.5.3 and MacOSX 10.5.6 :)

This may appear to be obvious, but be sure you wrap your inline JS using
<script type="text/javascript"> code </script>
Otherwise FireBug won't look at it at all.

I had the same, it wasn't showing anything and it was driving me crazy for ages, even if i had "Show javascript errors" in the console tab selected, it seems that it started working after I did "Enable all panels".

These kinds of problems cannot be answered without a test case.