MVC4 Reference and render jquery file

Question

I have a jquery file that I want to reference and render in in timelime.cshtml. I am attaching the file view below. review attachment. I want reference the jquery file in the attachment below.

The name of the jquery file timeline.js.

Sunny Sharma · Answer

Hi Davd The easiest way is to use the bundling feature that comes with MVC 4. Open BundleConfig.cs file under App_Start find this pattern and modify: ------------------------------------------------------------------------ bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery-1.10.2.min.js ~/Scripts/timeline.js  )); ------------------------------------------------------------------------ That's it. Now it will be rendered automatically wherever you've this snippet in view: @Scripts.Render(~/bundles/jquery) basically above line lies in _Layout.cshtml so that jquery file is rendered in each derived page. Alternatively if you want to refer this file to any specific page only then create a script bundle and refer in those pages like: Your new script bundle: ----------------------------------------------------------------------- bundles.Add(new ScriptBundle(~/bundles/timeline).Include( ~/Scripts/timeline.js )); ----------------------------------------------------------------------- Now put this snippet to render this bundle in any view like: @Scripts.Render(~/bundles/timeline) Hope you got the point. Happy Coding :)

Sunny Sharma · Answer

Hi David I'm in GMT +5. It's 11:01 now.

David Smith · Answer

Ok. What time is it where you located?

Sunny Sharma · Answer

ok. Here's my skype id: sunny.programmer

David Smith · Answer

Dont work just yet. Do i need this below on the _layout.cshtml page at the bottom of the footer. Skype will be easier this problem is getting on my nerves. lol @Scripts.Render(~/bundles/jquery) @Scripts.Render(~/bundles/Timeline)

Sunny Sharma · Answer

Modified Code: public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle(~/bundles/jqueryui).Include( ~/Scripts/jquery-ui*)); bundles.Add(new ScriptBundle(~/bundles/jqueryval).Include( ~/Scripts/jquery.unobtrusive* ~/Scripts/jquery.validate*)); bundles.Add(new ScriptBundle(~/bundles/modernizr).Include( ~/Scripts/modernizr-*)); bundles.Add(new StyleBundle(~/Content/css).Include(~/Content/site.css)); //TODO: Added new bundles bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery-1.9.1.min.js ~/Scripts/jquery.scrollTo-1.4.1.js ~/Scripts/Timeline.js )); bundles.Add(new StyleBundle(~/Content/themes/base/css).Include( ~/Content/themes/base/jquery.ui.core.css ~/Content/themes/base/jquery.ui.resizable.css ~/Content/themes/base/jquery.ui.selectable.css ~/Content/themes/base/jquery.ui.accordion.css ~/Content/themes/base/jquery.ui.autocomplete.css ~/Content/themes/base/jquery.ui.button.css ~/Content/themes/base/jquery.ui.dialog.css ~/Content/themes/base/jquery.ui.slider.css ~/Content/themes/base/jquery.ui.tabs.css ~/Content/themes/base/jquery.ui.datepicker.css ~/Content/themes/base/jquery.ui.progressbar.css ~/Content/themes/base/jquery.ui.theme.css)); } } ------------------------------------------------------- Give it a try and let me know if it works or not. I've skype but not able to connect to you right this moment. Thanks

David Smith · Answer

Here is my bundles below. Review public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery-1.*)); bundles.Add(new ScriptBundle(~/bundles/jqueryui).Include( ~/Scripts/jquery-ui*)); bundles.Add(new ScriptBundle(~/bundles/jqueryval).Include( ~/Scripts/jquery.unobtrusive* ~/Scripts/jquery.validate*)); bundles.Add(new ScriptBundle(~/bundles/modernizr).Include( ~/Scripts/modernizr-*)); bundles.Add(new StyleBundle(~/Content/css).Include(~/Content/site.css)); //TODO: Added new bundles bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery-1.9.1.min.js ~/Scripts/Timeline.js )); bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery-1.9.1.min.js ~/Scripts/jquery.scrollTo-1.4.1.js )); bundles.Add(new StyleBundle(~/Content/themes/base/css).Include( ~/Content/themes/base/jquery.ui.core.css ~/Content/themes/base/jquery.ui.resizable.css ~/Content/themes/base/jquery.ui.selectable.css ~/Content/themes/base/jquery.ui.accordion.css ~/Content/themes/base/jquery.ui.autocomplete.css ~/Content/themes/base/jquery.ui.button.css ~/Content/themes/base/jquery.ui.dialog.css ~/Content/themes/base/jquery.ui.slider.css ~/Content/themes/base/jquery.ui.tabs.css ~/Content/themes/base/jquery.ui.datepicker.css ~/Content/themes/base/jquery.ui.progressbar.css ~/Content/themes/base/jquery.ui.theme.css)); } }

David Smith · Answer

ok. I am getting ready to try. I tried loading the project. Its to big to load. do you have skype?

Sunny Sharma · Answer

Do I add it like this below. bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery-1.9.1.min.js ~/Scripts/jquery.scrollTo-1.4.1.js )); OR bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery.scrollTo-1.4.1.js ));  My Answer: Bundling the Script in one bundle gives you freedom to use them wherever you need it and not where you don't. Please note that if you create a bundle with the name that is already created the bundle information would get over-written. What I mean is If I have added a Script Bundle with name ~/bundles/jquery which contains jquery-1.9.1.min.js and jquery.scrollTo-1.4.1.js  two files: bundles.Add(new ScriptBundle( ~/bundles/jquery ).Include( ~/Scripts/jquery-1.9.1.min.js ~/Scripts/jquery.scrollTo-1.4.1.js )); AND I'm trying to create another one with same name it gets over-written : bundles.Add(new ScriptBundle( ~/bundles/jquery ).Include( ~/Scripts/jquery.scrollTo-1.4.1.js )); // here it contains only one file - jquery.scrollTo-1.4.1.js. So now if I try to render this bundle: ~/bundles/jquery using this statement: @Scripts.Render(~/bundles/jquery) it will render only a single file jquery.scrollTo-1.4.1.js because this is what we have declared in the last bundle for said name. Please check if you're adding two bundles with same name. Bundles provide you the flexibility of rendering only required files hence decreasing the bandwidth and increasing the speed like if I need jquery UI on any View I'll render a bundle that contains jquery-ui... .js otherwise I won't. Thanks.

David Smith · Answer

Do I add it like this below. bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery-1.9.1.min.js ~/Scripts/jquery.scrollTo-1.4.1.js )); or bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery.scrollTo-1.4.1.js ));

Sunny Sharma · Answer

Well I don't think jquery.scrollTo-1.4.1.min.js comes bundled with ASP.NET MVC4 template. What I meant If timeline.js file has any dependency to this jquery.scrollTo-1.4.1.min.js then do add this to the bundle otherwise you don't need to. You can share your project if still have any issues and I'll sort it out. Thanks.

David Smith · Answer

Can you give me the exact code to adding the jquery.scrollTo-1.4.1.min.js to the bundle object

Sunny Sharma · Answer

Yes all the dependent files should be added to the bundle. Apart of that modify this line of code: ---------------------------------------------------  @Model.LoadMoreUrl  ') href=javascript:void(0)> More as More (Remove the double quotes around @Model.LoadMoreUrl ) HTH :)

David Smith · Answer

I am missing the jquery.scrollTo-1.4.1.js file. I forgot to add. Do i add this to the bundle like this below to make the scroll to feature work of the timeline. bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery-1.9.1.min.js ~/Scripts/jquery.scrollTo-1.4.1.js ));

David Smith · Answer

So I hit view page source and I saw the timeline.js for some reason the anchor is not working when I try to click the link. can you let me know if I am doing something wrong with code below. @if (Model.PageSize == Model.Updates.Count) { More } else if (Model.CurrentPageIndex > 0) { Thats all folks! }

David Smith · Answer

The name of the js file is timeline.js not timescript.js. -The timeline.js is located in the script folder. -By default for the ASP MVC4 template the _layout.cshtml has the @Scripts.Render(~bundles/jquery) at the bottom of the page after the footer. -I did not add @Scripts.Render(~bundles/timeline) to the _layout.cshtml because you said if i wanted the timeline.js file to be render on every page just add it to the bundle. I did just that. Review below. bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery-1.9.1.min.js ~/Scripts/Timeline.js )); Review attachments below and look at every file.

Sunny Sharma · Answer

Hi David Not to worry about I'll help you with that. I assume in my previous post that timescript.js file is present inside Scripts folder. If not then please move it and try again. If yes please try to check in the View Source of rendered html if timeline.js is being rendered. Just try to find timeline.js. If it's in there then it is being rendered otherwise not. If it is being rendered and it's not working as expected then there must me some problem within your timeline.js file codes suggest you to check that. If it's not being rendered check your master layout _Layout.cshtml if it has the snippet at the bottom or top to render the defined script bundle: @Scripts.Render(~/bundles/timeline) HTH :)

David Smith · Answer

I changed the second input parameter. From: bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery-1.10.2.min.js ~/Scripts/timeline.js  )); To: bundles.Add(new ScriptBundle(~/bundles/jquery).Include( ~/Scripts/jquery-1.9.1.min.js ~/Scripts/timeline.js  )); However I am still troubleshooting why my timeline feature is not working yet. I wonder if the .js file is being rendered.