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
– Christian Phillips, Commented Apr 4, 2013 at 10:04
use web developer tools and check if your custom js is loading or not ... — Venkata K. C. Tata
– Venkata K. C. Tata, Commented Apr 4, 2013 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
– Mark, Commented Apr 4, 2013 at 12:28

Muhammad Omair · Accepted Answer · 2013-04-04 12:29:15Z

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 4, 2013 at 12:29

answered Apr 4, 2013 at 9:55

Muhammad Omair

7974 silver badges14 bronze badges

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

4 Comments

Muhammad Omair Over a year ago

Bundles is basically combine or bundle your multiple files into a single file see link

Muhammad Omair Over a year ago

Who says that bundles automatically add jquery library??

Muhammad Omair Over a year ago

Please remove -1 in rating and click in up arrow if you agree this will solve your issue. Thanks

mridula Over a year ago

Could you please edit your answer? It allows me to change my vote only if you edit the answer.

Mark · Accepted Answer · 2013-04-04 12:34:57Z

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 · Accepted Answer · 2013-04-06 09:26:57Z

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 6, 2013 at 9:26

answered Apr 4, 2013 at 11:17

Christian Phillips

18.8k8 gold badges55 silver badges85 bronze badges

3 Comments

Ren Over a year ago

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

Christian Phillips Over a year ago

This is shorthand for $(document).ready...Also, you still have reference to JQuery, right?

Ren Over a year ago

Yes, I do. I have referenced all my other scripts in Layout.cshtml, and can seem them between the head tags in my markup.

user2245146 · Accepted Answer · 2013-04-04 13:37:12Z

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 4, 2013 at 13:37

user2245146

1 Comment

Bjarte Aune Olsen Over a year ago

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.

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related