So I have a master page in MVC that has the following code in its Master Page's head section:
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/jquery-ui-1.8.9.custom.css" rel="stylesheet" type="text/css" />
<link href="../../Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.4.4.js" type="text/javascript" />
<script src="../../Scripts/grid.locale-en.js" type="text/javascript" />
<script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript" />
</head>
You can see that the last three files are the JavaScript files.
Now if I run this code, my jquery-1.4.4.js is included, but grid.locale-en.js and jquery.jqGrid.min.js which are in the same folder as jquery-1.4.4.js are not! What's up with this?? Is MVC being dumb and can't reference my last two javascript files as it did with the first one? The interesting thing is that, if I comment out the include with jquery-1.4.4.js, MVC will reference grid.locale-en.js which is the second line. So it seems that MVC is able to only reference the first include line of the javascript which ever one it is, but not any line after that. Can someone please explain this scenario?
You need to close the script tag off like this
<script src="..." type="text/javascript"></script>
Related
I cant understand the error where $ is unidentified when using onload on my page. This is just as sample page I created where I need to call a function after loading the page.
Jquery Code
$(document).ready(function(){
alert("loaded");
});
<html>
<head>
</head>
<body>
</body>
<script src="../Jquery/contact.js"></script>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</html>
Two issues here:
It's invalid to put script or link tags as direct children of html, so it doesn't surprise me that it doesn't work correctly on at least some browsers. You need to put them in the body or head. The only valid content of the html element is a single head element followed by a single body element.
Standard guidance, for instance in the YUI Best Practices for Speeding Up your Website is:
Put the link tags in head
Put the script tags at the bottom of body, just prior to the closing </body> tag
It looks like your contact.js file calls $() immediately (not in response to an event). If so, then contact.js must be after jQuery in the list of scripts, so that jQuery has been loaded when your code runs.
So:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</head>
<body>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<script src="../Jquery/contact.js"></script>
</body>
</html>
Side notes:
You might look at script and CSS combining and minifying, to avoid having a lot of HTTP requests.
Consider adding <!doctype html> at the very top to ensure the browser is in standards mode (not quirks mode).
Consider adding <meta charset="UTF-8"> at the top of head (ensuring that the file is indeed in UTF-8, or changing the "UTF-8" in that to whatever encoding you're actually using in the file).
thanks for the input. so basically I had 2 problems on this. I solved the first one by moving the contact.js to the bottom and removing the migrate plugin.
I have a Vb.net MVC application that utilises Kendo UI (in the Bootstrap theme). I was told I had too many/conflicting css and js files declared but I'm struggling to figure out what my minimum requirements are. I'm also aware I may have some in the wrong order. I tried to fix this but have now managed to cause all dropdowns to display object [object] instead of the selected value.
I have the following declared...
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.mobile.common.min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.bootstrap.mobile.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/kendo/2016.1.112/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" />
<script src="#Url.Content("~/Scripts/jquery-2.1.4.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/kendo.mobile.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2016.1.112/kendo.aspnetmvc.min.js")"></script>
Any help appreciated as I have no backup of the file before I started 'messing' and now do not know what was there originally and in which order. :(
All the help you need is here : http://www.telerik.com/blogs/which-css-files-to-use-in-your-kendo-ui-project
After reading the article, I am still not sure that if you use kendo.mobile, you still need kendo.common for the css and kendo.all.min for the js if your application is also desktop.
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
I have a master page with the following lines inside my <head> tags.
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/navmenu.js" type="text/javascript"></script>
When I navigate to a page that uses URL routing, the lines above generate the following HTML.
<link href="../../Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/navmenu.js" type="text/javascript"></script>
Based on the mapped URL, the stylesheet link is correct. How can I get the script link to also be correct?
P.S. I tried setting runat="server" in the script link but that just seems to confuse ASP.NET. The entire project fails to compile based on bogus errors reported in my JavaScript file. (The javascript file runs fine otherwise.)
It looks like the best answer is this:
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src='<%= ResolveClientUrl("~/Scripts/navmenu.js") %>' type="text/javascript"></script>
Note that if I use the ResolveClientUrl() for the stylesheet <link> tag, it doesn't work. Apparently, there is special handing for this tag.
I created a default ASP.net MVC project. In the Master page I have the following at the top
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
</head>
I then need to add a javascript file and added the line as follows by dragging the file from the solution explorer to the page:
<head runat="server">
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
When I access a the site and look at the html from the browser I see this:
<head><title>
Index
</title><link href="Content/Site.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
The CSS file relative path was fixed but the JS file not. The site will be deployed to a different folder on the server than the root which I get on my development box.
Is there a proper way to do this?
Use the Url Helper:
<script type="text/javascript" src="<%=Url.Content("~/Content/script/MyFile.js")%>"></script>
Hope that helps
You can create a helper method that does something like this:
<%= Helper.IncludeJavascriptFile("Menu.js") %>
and then in that helper you do something like:
public string IncludeJavascriptFile(string fileName){
return Url.Content("<root>/Javascript/Files/" + fileName);
}
Then you can call that helper method from your view. If you decide to change the location of the files, it's only in one location you have to worry about it. If you change the name of the files, that's a different problem in and of itself.