Cannot read property "appendChild" of null

[eugenedw]

Expected behavior

The alertify module should have initialized properly, with no errors upon adding the following:

alertify.success("my success message")

Actual behavior

Instead of loading as expected, the console logged the message: "Cannot read property 'appendChild' of null

Steps to reproduce the behavior

Using the standard (non-angular) version of alertify, version 1.0.11, and jQuery, place the message above within the $(document).ready(function(){}) closure.

Version of Alertify in use

1.0.11

My resolution: During debugging, it was found that the "setupLogContainer" message was the root cause of the problem. If no "div" container with class "alertify-logs" exists, the error is thrown. Adding a container at the bottom of my webpage fixed the issue. This is an undocumented requirement, if it isn't a defect.

[jrusinek]

I tried your workaround. It did not work for me, though. What helped me, actually, was calling alertify.parent(document.body) manually.

[eugenedw]

Good to know that your workaround resolved the issue.

[quedicesebas]

What about this? es really serious

[quedicesebas]

The problem is to include de alertify.js script on head. If you move it to the end of body, not workaround is required ;)

[damuz91]

I think this is an issue that should be documented somewhere. But can you help me understand?, If i put my script in the head, and use it on my document ready callback, how comes it doesn't know that the body is already loaded? Or does he setup in load time?

[Hodes]

I had the same issue in my project. Diving into the source code I found that the 'parent' property of alertify is set only on reset() method. So, I did call to alertify.reset() just after initialize my SPA.

One thing that would help on this issue is:

if(this.parent === null){
    this.parent = document.body;
}

Because if there's no parent for alertify yet in the time that you want to show something, it could just grab a default one.