How to hold called function until document.body not return complete

Question

I am creating a function alerts() and call it in my script tag, that is in <head> Actully currenty i am woking on live editor,so i have to put users code in head,normally all function call in head but here ,it shows error ! I want to hold the user code and run when DOM completes! like:

HTML

   <head>
     <script src='alertResource.js' type ='text/javascript' ></script>

      <script>

          alerts();

      <script>

  </head>

alertResource.js

 function alerts(msg) {
    var _M_DoWn = { x: '', y: '', isdown: '' };
    var _A = document.createElement('HTML_alert');
     _A.id = "codeit_HTML_alert";

     insertAfter(document.body, _A);

 }

  function insertAfter(refrNode, newNode) {
   refrNode.parentNode.insertBefore(newNode, refrNode.nextSibling);
  }

So, whenever I call the alerts() it shows me an error in my console :

Error

Uncaught TypeError: Cannot read property 'parentNode' of null

I guess the error appears because my function gets called before DOM is loaded. Now I want to do something like: delay any function call until DOM is ready. I know how to check readystate but not able to implement it, as per my case.

Any idea? What I need to do to achieve this?

@Akh ,Thanks for reply but,,I am not using `Jquery` in my `DOC`. — ashbuilds, Feb 21 '14 at 11:36
Then add javascript code or refrence at bottom of html ie in last of html code — Akhlesh, Feb 21 '14 at 11:39

124 · Answer 1 · 2014-02-21T11:46:49.243

1

call your function after page is completely loaded by using this:

Using JavaScriopt

document.addEventListener('DOMContentLoaded', function() {
     alerts();
}, false);

Using JQuery

$(function(){
     alerts();
});

edited Feb 21 '14 at 11:46

answered Feb 21 '14 at 11:28

124

2,509
22
36

Any similar solution in javascript ?? – ashbuilds Feb 21 '14 at 11:32
@AshishMishra see how jQuery implement it, e.g: http://stackoverflow.com/a/800010/1414562 – A. Wolff Feb 21 '14 at 11:37
2

best way is to add javascript code or refrence at bottom of html ie in last of html code – Akhlesh Feb 21 '14 at 11:38
@Akh i guess you mean just before closing `
` tag, that's the simplest way for sure
– A. Wolff Feb 21 '14 at 11:39
@A.Wolff Yes before closing body tag – Akhlesh Feb 21 '14 at 11:41
@AshishMishra - See Updated Answer. – 124 Feb 21 '14 at 11:47
but is it good way? if user write its "own function" inside this function,and call from onclick in HTML then the function inside load is run or not? – ashbuilds Feb 21 '14 at 11:51
1

generally good coding practice is to use every user interaction after page is completely loaded, because it may be possible that many functions are loaded from outside the page. we can proceed after that external files are loaded into out page, so don't worry about this scenario if you don't have heavy content that affect parsing of web page. – 124 Feb 21 '14 at 11:56
Thanks @Nikhil Butani, I will try for this...:) – ashbuilds Feb 21 '14 at 12:00

score 1 · Answer 2 · answered Feb 21 '14 at 11:36

1

When you call to "alerts" the document is not fully loaded and "refrNode.parentNode" return null.

Try this, without jQuery

<body onLoad="alerts();">
....
</body>

answered Feb 21 '14 at 11:36

Rafa Hernández

458
6
18

score 0 · Answer 3 · answered Feb 21 '14 at 11:32

0

Please use this. (Javascript way)

window.onload=function(){SomeJavaScriptCode};
<body onload="SomeJavaScriptCode">

answered Feb 21 '14 at 11:32

Java_User

1,295
3
25
37

score 0 · Answer 4 · answered Feb 21 '14 at 11:40

0

Depending on if you need to support IE8 or not, you could do this:

document.addEventListener('DOMContentLoaded', function(){
  alerts();
});

answered Feb 21 '14 at 11:40

James Hibbard

13,797
9
55
65

How to hold called function until document.body not return complete

4 Answers4