Execute javascript from bundles in Document.ready

Question

I use the MVC4 default template.

I add a script : MyScript.js in /Scripts/MyApp/ with a function :

function Testing()
{
    alert('test');
}

In the global.asax :

 bundles.Add(new ScriptBundle("~/bundles/myapp").Include(
    "~/Scripts/MyApp/MyScript.js"));

I'd like call this method in /Views/Home/Index.cshml

I tried the code below but without success:

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

@Scripts.Render("~/bundles/myapp")

When I look the source code the link to MyScript.js is there and I can navigate to it (go to the source)

But the Testing() method in the $(document).ready is not executed.

Update1

<script type="text/javascript" lang="javascript">

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

Darin Dimitrov · Accepted Answer · 2012-08-21T19:54:47.077

2

Try putting you inline script after the bundle inclusion. Also the lang attribute on the script tag is deprecated:

@Scripts.Render("~/bundles/myapp")

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

UPDATE:

OK, I think you forgot to include jquery, so the $ function not defined :-)

So if you want to do it with bundles:

bundles.Add(new ScriptBundle("~/bundles/myapp").Include(
    "~/Scripts/jquery-{version}.js", "~/Scripts/MyApp/MyScript.js")
);

or if you don't want to use bundles:

<script type="text/javascript" src="~/scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="~/scripts/MyScript.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        Testing();
    });
</script>

edited Aug 21 '12 at 19:54

answered Aug 21 '12 at 19:38

Darin Dimitrov

1,023,142
271
3,287
2,928

Can you see some javascript errors in the console? Do you have javascript enabled in your browser? – Darin Dimitrov Aug 21 '12 at 19:50
I think you simply forgot to include jquery. – Darin Dimitrov Aug 21 '12 at 19:55
you are right, it's the error in the console but ... when I look he source code, there is a link to jqeury (working link). In the layout page, I have this : @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) – TheBoubou Aug 21 '12 at 19:57
But where is it? It must be included **before** your script. The custom section must be before your inline script in which you are using the `$` function. – Darin Dimitrov Aug 21 '12 at 19:58
About your update, I have to include the jQuery in each bundle ? – TheBoubou Aug 21 '12 at 20:01
@Kris-I, it depends. If your other scripts depend on jquery it is obvious that you must include it. – Darin Dimitrov Aug 21 '12 at 20:02
If I need jquery in the _layout page and in some other view, need to include twice, not a problem that ? jQuery was include in _layout – TheBoubou Aug 21 '12 at 20:06
No, that's a problem. You should include jquery only once. Otherwise it seems like a waste to me. – Darin Dimitrov Aug 21 '12 at 20:08
By default the @Scripts.Render("~/bundles/myapp") is in the bottom of the _layout page. I moved it, first line after
and it's ok
– TheBoubou Aug 21 '12 at 20:16

Execute javascript from bundles in Document.ready

1 Answers1