Couldn't bundle custom jquery scripts in ASP.NET MVC4

Question

I've created some basic scripts using jquery and when placed below the markup in one of my MVC views, it works fine. I wanted to move those scripts to a separate file in Scripts folder, so I have created a file called 'CustomJquery.js' and have placed it in the Scripts folder. I have created a bundle for it in 'BundleConfig.cs', but my scripts don't work anymore when called from my view using @Scripts.Render("~/bundles/CustomJquery"). I've even tried placing them in '_Layout.cshtml' but still no luck. Please see my code below. any help would be greatly appreciated. thanks

CustomJquery.js in Scripts folder

$("#Button").click(function () {
alert("hello");
});

Index.cshtml

<input id="Button" type="submit" value="Test" />

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

BundleConfig.cs

 bundles.Add(new ScriptBundle("~/bundles/CustomJquery").Include(
                "~/Scripts/CustomJquery.js"));

Updated

Yes, I could see my 'CustomJquery.js' in the 'sources' tab of Google chrome tools.

I could see the script src in the markup as well, as per 'Elements' tab

<script src="/Scripts/CustomJquery.js"></script>
</section>
</div>

Please help

When you view source of the webpage, can you see reference to your file? — Christian Phillips, Apr 04 '13 at 10:04
use web developer tools and check if your custom js is loading or not ... — Venkata K. C. Tata, Apr 04 '13 at 10:16
Are you running on IIS Express or full IIS, if on full IIS is your application a web site or an application ie do you access on something like localhost:12345/ localhost/ or localhost/myapp/ - also are you seeing any javascript errors in the console? — Mark, Apr 04 '13 at 12:28

Muhammad Omair · Answer 1 · 2013-04-04T12:29:15.757

5

Have you included jquery library in your index.cshtml page. ie: <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

.

edited Apr 04 '13 at 12:29

answered Apr 04 '13 at 09:55

Muhammad Omair

797
4
14

Bundles is basically combine or bundle your multiple files into a single file see [link](http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification) – Muhammad Omair Apr 04 '13 at 10:16
Who says that bundles automatically add jquery library?? – Muhammad Omair Apr 04 '13 at 10:38
Please remove -1 in rating and click in up arrow if you agree this will solve your issue. Thanks – Muhammad Omair Apr 04 '13 at 12:21
Could you please edit your answer? It allows me to change my vote only if you edit the answer. – mridula Apr 04 '13 at 12:27

Mark · Answer 2 · 2013-04-04T12:34:57.157

First thing to do would be to take a look at the page in something like Chrome with the web developer tools. Check the source and make sure you're seeing the script in the code and check the network tab and make sure you're not getting any 404 errors. You should also be able to click to view the contents of the js to make sure it is what you're expecting. Also check if you get any script errors in the console.

Assuming you're already using bundles elsewhere in the most likely problem is typos, path errors, or stray characters added/missing from copying and pasting.

If you can follow the above steps and if it doesn't help you solve the problem provide more details of what you see including any errors so I can help you further.

Updated

Also I would suggest using

console.log("click fired!");

rather than an alert and checking for the message to appear in the console log. Using alerts can cause problems.

Christian Phillips · Answer 3 · 2013-04-06T09:26:57.613

1

After confirming your file is being picked up by viewing the source or using IE dev tools, Firebug or Chrome dev tools, can you also check that you have the 'ready handler', as in:

$(function() {
     // Handler for .ready() called.
    });

in your CustomJquery.js file, you also need to make sure you have jquery referenced.

Use Firefox, and a tool called firebug enter image description here

switch to Scripts enter image description here and click on edit, you should see your script there, add a breackpoint to the left and see if it's being hit of if you are seeing an error in the console.

edited Apr 06 '13 at 09:26

answered Apr 04 '13 at 11:17

Christian Phillips

18,399
8
53
82

Yes, I can confirm that I could see the script in sources. Should I use something like document.ready ? I've updated my question, please have a look at it..thanks – Ren Apr 04 '13 at 12:22
This is shorthand for $(document).ready...Also, you still have reference to JQuery, right? – Christian Phillips Apr 04 '13 at 13:01
Yes, I do. I have referenced all my other scripts in Layout.cshtml, and can seem them between the head tags in my markup. – Ren Apr 04 '13 at 13:55

score 0 · Answer 4 · answered Apr 04 '13 at 13:37

0

Your bundle name could be the same problem I had a few days ago.

As the scripts you want to include are in the Scripts folder your bundle name needs to be "~/Scripts/WHATEVERYOUWANTHERE"

answered Apr 04 '13 at 13:37

This is simply wrong. Your bundle name can be whatever you want (the usual name is "~/bundles/scripts"). It should specifically NOT be "~/Scripts/", because that makes it very easy to confuse bundled scripts with not bundled scripts. – Bjarte Aune Olsen Jan 28 '15 at 12:16

Couldn't bundle custom jquery scripts in ASP.NET MVC4

4 Answers4