Why is my javascript function sometimes not working

Question

I have a large javascript function init() that hides and shows a large number of div's. When the page is loaded the javascript function is triggered by the script below.

<script type="text/javascript">
$(document).ready(function() {
init();
});
</script>

Most of the time the javascript is triggered by the script below. However once in a while the script init() seems not to be triggered. Approximately 1 of 20 times the function init() seems not to be triggered. All the other 19 times the page and javascript is working fine without any errors. The circumstances when this error occurs seem to be no different from normally as this error occurs when Pressing F5 20 times.

I checked that init() seems to not being called at all because the first statement (alert("function called");) in init() wasn't called. In the cases that the javascript was working fine I got the alert message and the page was loaded fine without any errors.

I tried different ways to trigger the javascript such as window.onload and putting at the end of the page this script:

<script type="text/javascript">init();</script>

All those different methods to trigger init() didn't seem to make any difference.

This is the init() function:

function init(){
pauzereload__gl_var=1;
load2__gl_var=0;

//Hide bus options:
var boxbusnotshow = document.getElementById("boxDiv").getElementsByTagName("a");
boxbusnotshow[3].style.display="none";
boxbusnotshow[4].style.display="none";
boxbusnotshow[5].style.display="none";

document.getElementById("loadingdiv").style.display = "none";
document.getElementById("loadingdivdate").style.display = "none";
getvariables(); //Get variables generated by the php script, to get activetab

var a=1; b=1;
highlightboxinitiate(a,activetab__gl_var,load2__gl_var);
highlightlistinitiate(a,b);

pauzereload__gl_var=0;
}

This is the highlightboxinitiate function that is being called from the init() function:

function highlightboxinitiate(divnr,linenr,load2__gl_var) {

getvariables();

for (i = 1; i < 8; i++) {document.getElementById("nextnr" + i).style.display = "none";}
if(counttab__gl_var[linenr]>(9 + settab__gl_var[linenr]) && load2__gl_var==0){
document.getElementById("nextnr" + linenr).style.display = "block";}

for (i = 1; i < 8; i++) {document.getElementById("prevnr" + i).style.display = "none";}
if(settab__gl_var[linenr] >2 && load2__gl_var==0){
document.getElementById("prevnr" + linenr).style.display = "block";}

for (i = 1; i < 8; i++) {document.getElementById("pagenr" + i).style.display = "none";}
if(load2__gl_var==0 && counttab__gl_var[linenr]>9){
document.getElementById("pagenr" + linenr).style.display = "block";}


if(load2__gl_var==1){
for (i = 1; i < 8; i++) {document.getElementById("renextnr" + i).style.display = "none";}
if(counttab__gl_var[linenr]>(9 + settab__gl_var[linenr])){
document.getElementById("renextnr" + linenr).style.display = "block";}

for (i = 1; i < 8; i++) {document.getElementById("reprevnr" + i).style.display = "none";}
if(settab__gl_var[linenr] > 2){
document.getElementById("reprevnr" + linenr).style.display = "block";}

for (i = 1; i < 8; i++) {document.getElementById("repagenr" + i).style.display = "none";}
if(counttab__gl_var[linenr]>9){
document.getElementById("repagenr" + linenr).style.display = "block";}
}

var box = document.getElementById("boxDiv").getElementsByTagName("a");
current_tab__gl_var=linenr;
   for (i = 0; i < box.length; i++) {unselectboxinitiate(divnr,i);}

tabselnr = linenr-1;
if (tabselnr<=2){box[tabselnr].className="selected1";}
if (tabselnr>2 && tabselnr<=5){box[tabselnr].className="selected2";}
if (tabselnr==6){box[tabselnr].className="selected3";}


    for (j = 1; j < 10; j++) {
    for (i = 1; i < 8; i++) {
    document.getElementById("list"+j+"n"+i).style.display = "none";
    document.getElementById("it"+j+"n"+i).style.display = "none";}
    document.getElementById("list"+j+"n"+linenr).style.display = "block";
    document.getElementById("it"+1+"n"+linenr).style.display = "block";}

}

This is the highlightlistinitiate function that is being called from the init() function:

function highlightlistinitiate(divnr,linenr) {
   var box = document.getElementById("listmenu").getElementsByTagName("a");
current_list__gl_var=linenr;
   for (i = 0; i < box.length; i++) {
    box[i].className="unselected";}
    box[linenr-1].className="selected";
        for (j = 1; j < 10; j++) {
    for (i = 1; i < 8; i++) {
    document.getElementById("it"+j+"n"+i).style.display = "none";}}
    document.getElementById("it"+current_list__gl_var+"n"+current_tab__gl_var).style.display = "block";
    }

This is the getvariables function that is being called from the highlightboxinitiate function:

function getvariables(){
counttab__gl_var = new Array (7);
settab__gl_var = new Array (7);
counttab__gl_var [1] = 83; settab__gl_var [1] = 0; activetab__gl_var = 2; counttab__gl_var [2] = 111; settab__gl_var [2] = 0; activetab__gl_var = 2; counttab__gl_var [3] = 137; settab__gl_var [3] = 0; activetab__gl_var = 2; counttab__gl_var [4] = 1; settab__gl_var [4] = 0; activetab__gl_var = 2; counttab__gl_var [5] = 1; settab__gl_var [5] = 0; activetab__gl_var = 2; counttab__gl_var [6] = 1; settab__gl_var [6] = 0; activetab__gl_var = 2; counttab__gl_var [7] = 1; settab__gl_var [7] = 0; activetab__gl_var = 2; }

I have the impression that the functions are ok because when the page was not properly initiated the first statement in the init() function was not executed.

I checked that crossbrowser is not influencing this problem. This problem occurs in all browsers.

When the error occurs I don't see any error messages in the firebug console.

I've been searching and debugging a lot so any help will be very welcome and appreciated!

Answer 1

The problem was that somehow not all the content was loaded into the page, so the javascript crashed because it couldn't find all the objects.

The following statement at the end of the page helped resolve this issue:

<?php
print str_pad('',4096)."\n";
ob_flush();
flush();
set_time_limit(45);
?>

The above sends everything parsed until that statement to the browser.

Answer 2

You should use $(document).ready instead of $(window).load.

This is because $(window).load only triggers when the entire page has fully loaded, including (external) images/javascript/css/frames etc. $(document).ready triggers when the DOM has fully been loaded. This means that you can already do DOM manipulation without having to wait on images being loaded etc.

Answer 3

You can try

<script type="text/javascript">
   $(window).load(function() {
      init();
   });
</script>

instead of

<script type="text/javascript">
   $(document).ready(function() {
      init();
   });
</script>