Run JavaScript after the page loads (document.ready)

Question

I have the following script inside my master page :-

<script type= "application/javascript">
document.getElementById("currentdate").innerHTML = EMBEDformatAMPM();
var myVar=setInterval(function(){myTimer()},30000);
function myTimer()
{
document.getElementById("currentdate").innerHTML = EMBEDformatAMPM();
}
//code goes here
}</script>

but the problem i am facing is that the script will run before the (currentdate").innerHTML loads, and the script will raise a null reference exception, so my question is basically about how i can force the javaScript to run after the page loads.? Thanks

EDIT

My jQuery file is raising the following error ,, not sure why :-

Error: Syntax error, unrecognized expression: unsupported pseudo: visited

enter image description here

Your question isn't clear. Where exactly is this inline script placed in your master page? And what did you mean when you said: "the script will run before the `("currentdate").innerHTML` loads?" Are you referring to the rendering of the element? — little pootis, Sep 26 '14 at 16:05
this script is directly added to my master page ,, at the bottom — john Gu, Sep 26 '14 at 16:07
Regarding that jQuery Error: The `:visited` pseudo selector isn't supported. (Don't ask me why). Use the jquery.visited plugin. http://remysharp.com/2008/02/25/visited-plugin — little pootis, Sep 26 '14 at 16:14

Bernd · Answer 1 · 2014-09-26T16:07:35.193

2

For Non-jQuery Solution:

window.onload = function(){
    YOUR CODE HERE;
};

For jQuery Solution:

$(document).ready(function(){
    CODE HERE;
});

Greetings

edited Sep 26 '14 at 16:07

answered Sep 26 '14 at 16:00

Bernd

660
1
5
13

1

http://stackoverflow.com/questions/2728922/why-not-use-javascript-handlers-on-the-body-element – LcSalazar Sep 26 '14 at 16:07
Just edited the comment... – Bernd Sep 26 '14 at 16:09

score 2 · Answer 2 · edited May 23 '17 at 11:43

With jQuery, this is extremely simple:

$(document).ready(function(){
  // Your code here.
});

There are several ways to do it without jQuery, though these are more complex. Some of the best of them are available as answers to this question on StackOverflow: $(document).ready equivalent without jQuery

Edit (to address question edit): If you're using jQuery anyway, consider rewriting what you have above to something like the following:

<script type= "application/javascript">
$("#currentdate").html(EMBEDformatAMPM());
var myVar = setInterval(function(){myTimer()},30000);
function myTimer()
{
  $("#currentdate").html(EMBEDformatAMPM());
}
</script>

If this part needs to wait until the document is ready, then it should also have the code for that wrapped around it:

<script type= "application/javascript">
$(document).ready(function(){
  $("#currentdate").html(EMBEDformatAMPM());
  var myVar = setInterval(function(){myTimer()},30000);
  function myTimer()
  {
    $("#currentdate").html(EMBEDformatAMPM());
  }
});
</script>

can you check my edit to the original question, as my jQuery 1.10.2 is raising errors? — john Gu, Sep 26 '14 at 16:10

score 0 · Answer 3 · answered Sep 26 '14 at 16:01

0

Since Jquery is one of your tags in your question, you can just use:

$(document).ready(function(){
    //your code to run

});

answered Sep 26 '14 at 16:01

Jason Roner

767
1
7
14

score 0 · Answer 4 · answered Sep 26 '14 at 16:23

Your code should run well if you place your inline script right before the closing tag, or after writing HTML for #currentdate. And please tell me if it doesn't.

The reason why that JavaScript error is being thrown is because the :visited pseudo selector is no longer supported. That feature allows websites to track users and has been removed for some privacy reasons.

You can read more about that here.

Don't worry, there's a workaround. You can use the visited plugin by Remy Sharp. If you're using :visited just for styling purposes, remove it, unless it's necessary.

Run JavaScript after the page loads (document.ready)

4 Answers4