Why is $(document).ready not firing for me?

Question

In a php file i have used include to include the following js.php file and prior to that i have included the jquery file.

<script type="text/javascript">

$(document).ready(function(){
     alert("hello");
});
</script>

But it doesn't work. Why? when I skip the $(document).ready function it works.

But i need jquery code inside. what is wrong?

Answer 1

The most likely answer, based on what you have said, is that the core jQuery file is not actually included correctly in the page. You need something like:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Chances are, this is missing or typed incorrectly.

Answer 2

Another cause that will silently fail, and all remaining callbacks never called:

$(document).ready(null);

So check if you have variables or syntax errors that return null. Like this one:

$(document).ready(function($){}(jQuery));

Notice that the function above is called instantly and undefined is returned.

Answer 3

1. Check whether jQuery is loaded correctly.
2. Look at the browser's progress bar: it may be loading some counters and the document is not ready until they're loaded: this often happens when external resources are slow.
3. Try $(function(){ alert(...); }); just in case...
4. Check whether you have JS errors prior to this onload binding. Use Firefox's FireBug plugin to check it out.

Answer 4

Also look out how you define the jquery include tag. It seems for some reason you need to open and close the tag with two seperate tags. Using one tag with closing it seems not to work:

Works:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>

Doesn't work:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"/>

Answer 5

I faced a similar problem too and this is what I did.

Ensure that document.ready is placed after the callback function is defined in your javascript file.

Here, init is not defined yet when document.ready is being parsed.

//won't work
$(document).ready(init);
var init = function() {
   console.log('init not called');
}

Correct method:

//Works
var init = function() {
   console.log('document is ready');
}
$(document).ready(init);

Notice that $(document).ready(init) is placed at the end.

Answer 6

Yes, i noticed that sometimes is problem with that, i wrote safe solution for that, which fix this problem.

// jquery plugin 'jquery.ready.fix.js'
// @author Szymon Działowski
;(function ($) {
    $.fn.ready.old || $(function (r) {
        r = $.fn.ready;
        $.fn.ready = function (fn) {    $.isReady ? fn() : r(fn);    };
        $.fn.ready.old = r;
    });
})(jQuery);

after that you can run code:

$(function () {alert('go')})

and it always fire alert.

PS: it is a technique called "duck punching" more about: http://www.paulirish.com/2010/duck-punching-with-jquery/

Answer 7

Following Zakas' The art of throwing JavaScript errors, I began to throw my own errors in JavaScript as an approach to finding JS issues.

But this approach unfortunately started causing the jQuery ready() functions to silently fail, for unrelated parts of the site. :(

I learned that the following are different:

throw new Error()

is different from

console.error()

So, I started to use console.error(), and I still got the red highlighting in the console.

Answer 8

Another point to check: Maybe you have a PHP error in your program. A PHP Fatal error exits the script and $(document).ready will never be executed.

Depending on your server settings or on your CSS you might not see the Fatal error message.

Answer 9

In my case document.ready was not called because a html form was sent to server by Ajax request and only part of document was recived - and document ready is not called after ajax request.

In consequence some buttons which were on that part that was reloaded was not binded to events .click() atc.. anymore because these buttons were new and binding of these events was called during document ready only first time - not for AJAX.

Answer 10

Just had this crop up and it turned out to be a spelling mistake in the script tag:

<script type="text/javscript">

Note the missing 'a' in javascript. Changing to simply:

<script>

Fixed the problem.

Answer 11

If nothing above works another dirty trick is to wrap your function into to a SetTimeOut function without any time this simply queues the code to run once the current call stack is finished executing

     setTimeout(function(){
        FillOpenTranscriptionTasks();
    });

Answer 12

I've seen this problem caused by an iframe with a self-closing tag.

This is good:

<iframe src="http://..."></iframe>

This is not, and causes all JS on the page to fail silently:

<iframe src="http://..." />

Answer 13

instead of $( document ).ready( function() { ... } );

try

$( document ).ready( abc() );

function abc() { .... }

worked for me.i myself searched lot of places, but couldn't find a solution. Tried this out randomly and worked!!

Answer 14

I had such Problem, Just changed <script type="text/javascript"> to <script type="javascript"> and all problems gone!