$(document).ready(function () { ... won't fire

Question

I have the following code at the end of one of my Views:

@section Scripts {
<script type="text/JavaScript">

    $(document).ready(function () {
        alert("!!!");
    });

</script>
}

What ever I do, I can't get it to fire. I have checked and further up in the code JQuery is included. Using the suggestion here I changed my code to the following to confirm that jquery was correctly loaded. This gives the 'Yeah!' alert when loading the page.

@section Scripts {
<script type="text/JavaScript">

    window.onload = function () {
        if (window.jQuery) {
            // jQuery is loaded  
            alert("Yeah!");
        } else {
            // jQuery is not loaded
            alert("Doesn't Work");
        }
    }
</script>
}

The end of the source in my page looks like:

<script src="/Scripts/jquery-1.9.1.js"></script>

<script src="/Scripts/jquery-ui-1.8.24.js"></script>

<script src="/Scripts/bootstrap.js"></script>

<script src="/Scripts/breakpoints.js"></script>

<script src="/Plugins/jquery-unveil/jquery.unveil.js"></script>

<script src="/Plugins/jquery-fademenu/jquery.fademenu.js"></script>

<script src="/Plugins/jquery-block-ui/jqueryblockui.js"></script>

<script src="/Plugins/jquery-slimscroll/jquery.slimscroll.js"></script>

<script src="/Plugins/bootstrap-select2/select2.js"></script>

<script src="/Plugins/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>

<script src="/Plugins/dropzone/dropzone.js"></script>

<script src="/Scripts/core.js"></script>

<script type="text/JavaScript">

    $(document).ready(function () {
        alert("!!!");
    });

</script>    

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"6301d560dc274f4ea5ec24b8e0c2a19f"}
</script>
<script type="text/javascript" src="http://localhost:50280/1cd42285f06243669b1fd5837f1f05c3/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

I can't work out where I am going wrong...

Try `jQuery(document)` instead of `$(document)`. maybe something redefined `$` — Andrei, May 23 '14 at 15:23
press F12 to open developer console in the browser , and check for any errors when using the document.ready version that is not functioning properly — Scott Selby, May 23 '14 at 15:24
Have u tried including the scripts *at the beginning* of the source? E.g. in head — Yuriy Galanter, May 23 '14 at 15:24
@YuriyGalanter - no - I always keep them at the bottom , it's best practice — Scott Selby, May 23 '14 at 15:25
Try to provide any online link where this behaviour can be checked. BTW, try to answer question asked in comments, e.g: `any error in console???` — A. Wolff, May 23 '14 at 15:29
The console pointed me to some errors else where with: $(function($){ // $("#date").mask("99/99/9999") Once, I resolved them it has fixed the issue. Not sure why this is causing a problem though as it's fine in my static HTML page, just not working in MVC. I guess that's a separate issue for me to resolve though. Thanks. — Joseph, May 23 '14 at 15:32
So you have posted a question on SO before opening your console, well... — A. Wolff, May 23 '14 at 15:33
I had opened the console - it's just I have the exact same error in the flat HTML version, so I didn't think it would be that as it's in a totally different part of code. — Joseph, May 23 '14 at 15:34
That's ok then but always, always, fix error before going forward — A. Wolff, May 23 '14 at 15:36

Scott Selby · Accepted Answer · 2014-05-23T15:53:01.140

if this coode works properly

 window.onload = function () {
        if (window.jQuery) {
            // jQuery is loaded  
            alert("Yeah!");
        } else {
            // jQuery is not loaded
            alert("Doesn't Work");
        }
    }

and this code doesn't :

 $(document).ready(function () {
        alert("!!!");
    });

your likely problem is that there is a conflict with the dollar sign $

I would type out jQuery instead of using the dollar sign , or of course you can do something like this:

var j = jQuery.noConflict();

then you can do use the j where you used to use $

OR... there is simply just an error in the console that you still have not responded about , if that is the case I will update answer

EDIT::

The reasons that you code was not executing was because javascript is weird in the sense that if there is an error anywhere in the block of javascript code then nothing below it will be executed. That is why I asked if there were any console error's. Checking the console is the first step to solving any javascript error.

score 0 · Answer 2 · answered May 23 '14 at 15:29

0

remove @section Scripts block put script block only and try... if not then remove all js use only jquery and try it will definatly. now add one by one script and find one which is conflicting. .

answered May 23 '14 at 15:29

chandresh patel

309
1
10

$(document).ready(function () { ... won't fire

2 Answers2