Javascript, only works with eventhandler

Question

Every time my page gets loaded I want some javascript to get executed if a new message is in the TempData.

window.onload = function () {  
      $.jGrowl('Hello world!');
};

And that works fine. But do I have to put the call inside a windows.onload or other eventhandlers, because if I do it like this

<script type="text/javascript>
$.jGrowl('Hello world!');
</script>

it won´t work It comes up with a

SCRIPT438: Object doesn't support this property or method

I have been trying to put the javascript in the bottom of the page to make sure averything else is loaded first

Hope for some help Jakob

Define "doesn't work." Is there an error on the debugging console? The most common reason for this is because `$` isn't defined at the time you try to run that line of code. Is it? — David, Jun 23 '14 at 17:29
"it won´t work" doesn't describe your problem. What you expect your code to do, and what it does instead? — Teemu, Jun 23 '14 at 17:29
Probably someplace after your plugin has loaded should do the trick — Shanimal, Jun 23 '14 at 17:42
Could it be that missing closing quote on the type attribute? — Shanimal, Jun 23 '14 at 17:45
Now a have putting it just above
and it still gives a script438 — Jakobbbb, Jun 23 '14 at 17:55

score 1 · Answer 1 · edited May 23 '17 at 12:29

1

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload

The problem is the code fires before the DOM has loaded.

Here's a related article.. window.onload vs document.onload

edited May 23 '17 at 12:29

Community

1
1

answered Jun 23 '14 at 17:33

Does `jGrowl` require the DOM to be loaded before it can be used? – JLRishe Jun 23 '14 at 17:52
That could be the case. That the DOM needs to be loaded before you can manipulate with it – Jakobbbb Jun 23 '14 at 18:06

score 0 · Answer 2 · answered Jun 23 '14 at 17:54

According to their example this should be working perfectly... I tried to unwrap the call, the best I could do is remove the outter self executing function...

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.2.12/jquery.jgrowl.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jgrowl/1.2.12/jquery.jgrowl.min.js"></script>
<script type="text/javascript">
$(function(){
    $.jGrowl("Hello world!");
});
</script>

My guess is the library uses dom ready so its not available to jquery until after dom ready has executed.

Here is a JSBIN

Ok I found out what was the problem. It did´nt load the the jgrowl library. Why it worked in the onload i have no idea about. But its working now. Thanks for all the replies — Jakobbbb, Jun 23 '14 at 18:15

Javascript, only works with eventhandler

2 Answers2