0

I want to execute a function at the end when the HTML has been loaded. I tried it with onload without success. I also tried it with ready, but it still doesn’t work. Here is my code. This is again placed in the header:

<script type="text/javascript">
    $(document).ready(function() {
        $('#infowindow_content').html('test');
    });
</script>

The div is also set by an external JavaScript file. Content:

window.onload = initialize;

function initialize() {
    document.getElementById('infowindow_content').innerHTML = 'testa';
}

It is included the following way before the closing body tag:

<script type="text/javascript" src="../lib/functions.js"></script>

I tried to place the above code before the closing body tag, but currently I have no idea why this doesn't work (the content isn't changed by my JavaScript code). If I execute it on the console afterwards everything works fine.

Solution:

I set a configuration parameter (language) in the HTML file. In the JavaScript file I ask for this value and depending on the value I define another content. Sometimes it could be so simple ...

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
testing
  • 19,681
  • 50
  • 236
  • 417
  • 2
    What do you mean by "The div is also set by a JS-file."? – woz Jul 12 '12 at 17:42
  • 1
    @woz I'm guessing it means that `#infowindow_content` is created through js – qwertymk Jul 12 '12 at 17:43
  • 1
    **What do you mean by "it still don't work"??** – Pointy Jul 12 '12 at 17:43
  • @woz: I have before the closing tag included a JS-file with which the content of the div is set. Now I want to overwrite this content. – testing Jul 12 '12 at 17:43
  • @Pointy: The content isn't changed. With the console I can easily change the content, but this should be made automatically. – testing Jul 12 '12 at 17:45
  • If there's *another* script changing it, then it may be doing so *after* your code here has changed it. – Pointy Jul 12 '12 at 17:47
  • Have you tried a simple $(document).ready(function(){ alert ('test'); }); - you should get an alert, if not, something wrong with your jQuery set up – TS- Jul 12 '12 at 17:49
  • @Pointy: I also thought so. Thats the reason why I moved the code below the inclusion of the script. But it doesn't changed anything. – testing Jul 12 '12 at 17:51
  • @tsOverflow: If I place an alert in my code it is executed. I tried to alert the content of my element but at that time it is empty ... – testing Jul 12 '12 at 17:51
  • Perhaps the reason is the `window.onload` in my external JS? – testing Jul 12 '12 at 18:07
  • If coming from a search engine looking for the exact place (this question is not a canonical question for that) for the 'script' tag (e.g., just before the ending body tag), see *[Where should I put – Peter Mortensen Nov 21 '21 at 13:28

3 Answers3

5

Try this:

setTimeout(function() {
 $(document).ready(function() { 
     $('#infowindow_content').html('test');
 });
}, 20);
qwertymk
  • 34,200
  • 28
  • 121
  • 184
  • If the somewhat cryptic allusion to the "JS-file" means that there's another script somewhere overwriting the work of the code in the OP, then this could definitely help. – Pointy Jul 12 '12 at 17:51
  • This code worked. But I don't know why I need something like this. What's the reason or what I'm doing wrong? – testing Jul 12 '12 at 17:53
  • @testing since the div is being added a-la javascript, there is no load or ready event for it. However if you wait 20 ms for all the js to execute then jQuery can find the div that your other js created – qwertymk Jul 12 '12 at 17:57
  • @qwertymk: The div is already there in HTML as placeholder. So it should be found I mean. The external JS file can set the content with `document.getElementById('infowindow_content').innerHTML = 'test'` and than I try with jQuery to set the content again. I also tried the Javascript way with the same results. But I think your solution is the only one which works. – testing Jul 12 '12 at 18:01
  • FYI: Your code only works in between `$(document).ready(function() {`. – testing Jul 12 '12 at 18:12
1

I don't know the jQuery equivalent but try the native JS.

Since the <body> has the most HTML & loads after <head>...

document.body.onload=function(){
    yourFunction(args)
}
<body onload="yourFunction(args)">...</body>

Or maybe the window object, since it's the root of every webpage DOM...

window.onload=function(){
    yourFunction(args)
}
ShouravBR
  • 685
  • 7
  • 10
0

Always place DOM manipulating code directly before your </body> tag. JavaScript in the header should only be called to libraries, such as jQuery.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Andrew McGivery
  • 1,350
  • 8
  • 20
  • 2
    Common wisdom is to put the scripts at the end of the `` so that their evaluation doesn't delay page rendering. – Pointy Jul 12 '12 at 17:43
  • Reason for this is that it allows all of the DOM to be parsed before it tries to manipulate it, and overall improves loading time. – Andrew McGivery Jul 12 '12 at 17:43
  • Oh sorry; the `

    ` in your answer was hidden because it was unquoted :-)

     – Pointy Jul 12 '12 at 17:44