I am trying to bundle a jquery file on a view which doesn't have layout as below
<html>
<head>
#section Scripts{
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/jquery")">
</script>
}
<script type="text/javascript">
$(document).ready(function () {
The bundle config for the above is already written and is as below
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
Whenever I call the document.ready function I see a $ not defined exception which means that the scripts haven't loaded.
The same bundling is working perfectly when placed in a layout.cshtml under the same shared folder. Am I missing something?
This is the problem line:
#section Scripts{
If you are not using a layout page, this section is not rendering (I'm surprised it wouldn't be throwing an error). Sections are only used for layout pages. If you want a page to work, get rid of the section and then put the jquery bundle script directly in the page.
You may also want to consider: Why scripts at the end of body tag
Use like this:
#Scripts.Render("~/bundles/jquery")
Related
I have a minimal ASP.NET MVC 5 app that was generated via Scaffolding. When I look at the generated _Layout.cshtml file I see a <script> tag toward the bottom of the page that loads jQuery but nowhere in _Layout.cshtm do I see a reference to a jQuery Validation module in a <script> tag.
If I go into Chrome Developer Tools, under the "Sources" tab, I can see that indeed jQuery.validate and jquery.validate.unobtrisuve are loaded! But how can they be loaded if they were not referenced by a <script> tag?
If you look in App_Start BundleConfig.cs you should see reference to:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
which defines the jQuery validation script bundle. Certain scaffold pages (for example Login) have:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
referenced at the bottom of the View.
This is picked up by #RenderSection("scripts", required: false) at the bottom of _Layout (which renders the script if it is defined).
What is the difference of both statements concerning the section Scripts and script-tag? NOT the content inside the scripts that does not interest me.
#section Scripts {
#Scripts.Render(Bundles.Scripts.Validation)
}
vs
<script src="#Url.Content("~/Scripts/Validation.js")"></script>
The first one renders the <script> tag where you have #RenderSection("Scripts") in your layout.
This is preferred when you don't have to include a script for all pages.
Also #Scripts.Render will minify and bundle your scripts. Usually this is used at the end of body tag so that Views can get the scripts after the DOM is rendered.
The second one remains where you use the <script> tag.
If you use it in Layout, the script is included in all pages (e.g. jQuery).
Let's take an example
<!-- HTML in Layout, before Scrip -->
#RenderBody()
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
#RenderSection("Scripts")
<!-- HTML after Script -->
Here, if the script make use of jQuery you want to included with section because jQuery is included before section.
If you include with <script> in your view you will give an error, that jQuery is missing, because is included before jQuery.
You might want to define sections in you _layout.cshtml file for specific content. It is generally believed that styles belong to <head> and scripts belong before </body>. Your mileage may vary.
If you just output <script> it will go with all the content and not where you might want it to be.
And if script inside view depends on something (jquery) and in your layout you have
#renderBody()
<script src=jquery.js></script>
#renderSection("scripts",required:false)
then you are screwed (-:
I wonder why bundling doesn't work. Here is my scenario. I use foundation framework for my front-end. Now, I include foundation.js, foundation.magellan.js. It works fine if I declare it like this.
<script src="~/Scripts/foundation.js"></script>
<script src="~/Scripts/foundation.magellan.js"></script>
<script>
$(document).foundation();
</script>
And this is what it renders:
But then I tried something like, (this doesn't work)
bundles.Add(new ScriptBundle("~/bundles/foundationjs").Include("~/Scripts/foundation.js"));
bundles.Add(new ScriptBundle("~/bundles/foundationsupport").Include("~/Scripts/foundation.magellan.js"));
And then render then like this:
#Scripts.Render("~/bundles/foundationjs")
#Scripts.Render("~/bundles/foundationsupport")
<script>
$(document).foundation();
</script>
And this is what it renders:
I tried to look if it returns a 404 error but it didn't. I tried clicking the button which clearly didn't work. How can I resolve this using bundling?
Any help would be much appreciated!
I have a very simple MVC project, and in my _Layout.cshtml I have some js includes like so:
<script src="~/scripts/jquery-2.0.3.min.js"></script>
<script src="~/scripts/easing.js"></script>
<script src="~/scripts/bootstrap.js"></script>
However, when it renders, it renders on the page like (note the tilde on the first one):
<script src="~/scripts/jquery-2.0.3.min.js"></script>
<script src="/scripts/easing.js"></script>
<script src="/scripts/bootstrap.js"></script>
I can't seem to get it to render properly, and it doesn't matter which script tag is first, that's the one it adds/keeps the tilde on. I've resorted to including the jquery script twice, the first one will have a tilde but the second one will get included, but I don't like that solution at all.
I'm working with VS 2012, it's a .NET 4.5 MVC application. From my searches it seems this was a known issue for Razor v1, but the solutions they provide don't seem to apply here.
You should be using #Url.Content() helper (We're not in ASP.NET any more, toto).
<script src="#Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<!-- etc. -->
Another option is to use the Microsoft.AspNet.Web.Optimization package and create bundles:
**BundleConfig.cs
public void RegisterBundles(BundleCollection bundles)
{
// ...
bundles.Add(new ScriptBundle("~/js/site").Include(
"~/Scripts/jquery-2.0.3.min.js",
"~/Scripts/easing.js",
"~/Scripts/bootstrap.js"
));
// ...
}
Then in your page use:
#Scripts.Render("~/js/site")
Either stick the references in a bundle and use #Scripts.Render("~/bundlename") or use
<script src="#Url.Content("~/scripts/jquery-2.0.3.min.js")"></script>
I have this index.html and login.html and I use a href to link from index to login. and in each index.html and login.html I import the javascript. However, it seems that only the ones come from index.html that is being loaded. so if I place the js in index.html for the login.html, it works fine. but then, we I place it separately ( another js for login.html that is not in index.html) , it doesnt work
TIA
When JQM(jQuery mobile) loads a page it uses ajax to accomplish this. When this happens all code in the <head> section is ignored. JQM looks for the data-role="page" part and inserts it into the same dom as index.html. So basically you are doing it the correct way when you add your js in the index.html page.
If you would like to compartmentalize your js code to work for certain pages use this example:
$(document).on('pageinit', '#page1', function(){
// code for #page1
});
$(document).on('pageinit', '#page2', function(){
// code for #page2
});
$(document).on('pageinit', '[data-role=page]', function(){
// this code will execute for every page that is data-role="page"
});
So go ahead and put all your code in one file. Split your code into appropriate pages like above and include that in your index.html file.
Also if you are using JQM version 1.0.1 with jQuery version 1.6.4(recommended with 1.0.1) use .delegate() instead of .on(). i.e.
$(document).delegate('#page1', 'pageinit', function(){ // notice that pageinit and #page1 are switched around for delegate
// code for #page1
}); // interesting to note that if you use delegate in jQuery 1.7.x it actually just calls the .on() method.
Note If you were making a web application instead of a phonegap app you would be smart to put your javascript in that one file and include that in every page. This way if someone is following a link or bookmarked your page they will still get the correct javascript file they need.
Anyways I hope that helps you out. Good luck!
If you are doing a window.location.href then it will load the new HTML(In you case it is login.html) If you are using this approach then you have to reload all you scripts again and hence add these scripts in all your .html pages.
<script src="cordova-1.6.0.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="jquerymobile/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="jquerymobile/jquery.mobile-1.1.0.min.js"></script>
However if you use the approach recommended by #deadlock then you will just need to load the script once. The later approach is the best one.
Please post your code, specifically how the pages link to each other, and the global config settings you set for app, if any. Like much with jQM, there are multiple practices and strategies supported for page arch.
You can also learn by using desktop browser tools and view the "Resources" to see what and when your resources are being loaded.