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

0
votes

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

4
jqueryasp.net-mvcasp.net-mvc-4bundling-and-minification
When you view source of the webpage, can you see reference to your file? - christiandev
use web developer tools and check if your custom js is loading or not ... - Venkata K. C. Tata
I've updated my question. please take a look. - Ren
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

4 Answers

5
votes

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

.

1
votes

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.

1
votes

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.

0
votes

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"