js function not running on page load?

Question

I apologize for this rather BASIC question, but I am at whits end here!

I have a javascript function that I want to run when the page loads... simple right? I have tried putting the function in doc readys, window readys, putting it before and after the main function, etc etc. NOTHING seems to work.

Code so far:

function calcme() {         
    DA FUNCTON
    }

$(document).ready(function(){   
    calcme();
    $("input").bind("keyup", calcme);

});

Please note... the keyup bind DOES work, but I need the calcme function to load on page load. Thoughts?

UPDATE: As per request, here is the full fiddle. http://jsfiddle.net/vpsSA/

If the bind works then the initial calcme must be called. It may seem it is not, but that's due to the behaviour of the function itself (in which we have no insight). — GolezTrol
– GolezTrol, Commented Oct 3, 2012 at 0:44
If keyup is working means onload function already worked and binded event. Use Firebug to see js error, post calcme() method too. It seems it is causing to the error. — Elbek
– Elbek, Commented Oct 3, 2012 at 0:44
what is ´DA FUNCTON´?. This should work perfectly, you have to check for any problem in the "calcme" — andres descalzo
– andres descalzo, Commented Oct 3, 2012 at 0:46
Did you check for javascript errors when calcme runs? Did you set a breakpoint in calcme to what it execute and see what's going wrong? — jfriend00
– jfriend00, Commented Oct 3, 2012 at 0:52

techfoobar · Accepted Answer · 2012-10-03 01:06:56Z

1

Problem found: The calcme() function assumes it is called from the context of one of the inputs and uses this.value inside. So, when you call it without any arguments, it obviously fails. This can be solved by trigger the keyup of each of your inputs, instead of calling calcme() directly. See the fiddle below.

Working fiddle: http://jsfiddle.net/vpsSA/1/

In your ready() handler, the bind statement comes after the caclme() call. And as you mentioned the event binding worked. This means:

a) calcme() was definitely executed on load. There is no other way since you've mentioned that the binding statement which comes after the calcme() call worked as expected.

b) calcme() did not throw any JS errors - if so, it would have stopped at the error and the event binding would not have taken place. Maybe it threw a warning, which you'll be able to see in your JS console.

c) Since you haven't provided whats inside calcme(), we can't say for sure. But what it looks like is some sort of condition failure because of which you did not get the expected result from calcme() when running on load. Are you using anything inside calcme() thats initialized after running it on load. I would suggest putting in a debugger; statement as the first line in your ready() handler and tracing it in Firebug or Chrome.

edited Oct 3, 2012 at 1:06

answered Oct 3, 2012 at 0:54

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

PaulHanak Over a year ago

Thanks for the thorough response. I at least understand a bit better now. Here is the full fiddle if it does shed any light on anything... jsfiddle.net/vpsSA

techfoobar Over a year ago

OK, problem found. Your calcme() function assumes it is called from the context of one of the inputs and uses this.value inside. So, when you call it without any arguments, it obviously fails.

PaulHanak Over a year ago

Ahhh that makes sense! Thank you! So the code you added loops through each input and "keysup"? Forcing it to run, rather than calling the function?

techfoobar Over a year ago

Exactly. It simulates a keyup on each of your inputs, one by one.

andres descalzo · Accepted Answer · 2012-10-03 00:54:05Z

0

try this:

function calcme() {         
   try {
      //your code
   }
   catch(e) {
      alert('error: ' + e);
   } 
}

if (typeof $ === undefined)) {
   alert('not jquery');
}

$(document).ready(function(){   

    if (typeof calcme === undefined) {
       alert('calcme not exist');
    }
    else {
       calcme();
       $("input").bind("keyup", calcme);
    }
});

answered Oct 3, 2012 at 0:54

andres descalzo

15k14 gold badges66 silver badges119 bronze badges

1 Comment

techfoobar Over a year ago

It is unlikely that calcme() threw an exception since in that case the statement after that (event binding) wouldn't have got executed.

Collectives™ on Stack Overflow

js function not running on page load?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related