I'm experiencing a very peculiar issue with ASP.NET.
I have a small website. I've written a simple MasterPage that is used across most of the site's pages.
I want to include Bootstrap and jQuery's CSS and Javascript files. When I link then in my master page with URI pointing at remote location (see below), everything works fine:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
For couple of reasons I want these JS and CSS files to be available locally, so I downloaded the relevant files to the server. But when I try to include these local files in the master page, they fail to load.
I tried:
Using absolute paths (i.e. ~/res/css/...)
Using <%= ResolveUrl("...") %>
Using <ScriptManager> - identical effect
When trying to include these files in the same way in the head contentPlaceHolder in the content pages, the effect is the same.
Example of non-working code:
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="~/App_LocalResources/css/bootstrap.min.css"/>
<script src="~/App_LocalResources/js/jquery.min.js"></script>
<script src="~/App_LocalResources/js/bootstrap.min.js"></script>
</asp:ContentPlaceHolder>
The result is the same whether I use the ContentPlaceHolder or not.
If you could assist me in resolving this issue, I'd be genuinely awesome - thanks in advance.
I was able to detect and resolve the cause of this issue failry quickly after reading through some very helpful comments - so kudos for the users who posted them.
The issue was being caused by 404s (when trying to acces the js and css files). The 404s happened due to:
The URLs were not correct - although I used the ~ (home) character it somehow was converted to a path relative to the page.
Example of such 404 as seen in Firefox/Firebug Console (make sure that "Logging" is on:
I was able to resolve this issue by using ResolveUrl.
Example:
<script src="<%= ResolveUrl("~/App_LocalResources/js/bootstrap.min.js") %>"></script>
After resolving this first issue, the 404s persisted.
I tried to access the files directly through the browser, and I got a IIS 404.8 error - meaning that the server was blocking access to the App_LocalResources folder. This is the default behaviour of IIS server on some predefined folder names (including App_LocalResources, bin, App_Data, etc.).
So, I moved the css and js files to a folder named res and that did the trick.
Eventually, the <head> section in the master page looks like this:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="<%= ResolveUrl("~/res/css/bootstrap.min.css") %>" />
<script src="<%= ResolveUrl("~/res/js/jquery.min.js") %>"></script>
<script src="<%= ResolveUrl("~/res/js/bootstrap.min.js") %>"></script>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Related
I am trying to include 5 javascript files which I have written to an HTML file.
However, there is an error message that the files are fail to load.
Source code:
<html class="gr__2k8dc"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Toilet partition tool</title>
<link rel="stylesheet" href="C:\Users\Downloads\3dmodelproject\files\style.css">
<script src="C:\Users\Downloads\3dmodelproject\files\three.js"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\STLLoader.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\OrbitControls.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\resources.js.download"></script>
<script src="C:\Users\Downloads\3dmodelproject\files\toiletpartition.js.download"></script>
</head>
The error message:
Any clue what's wrong with the path format? Thanks!
As mentioned elsewhere, your paths are absolute paths, rather than relative paths. Essentially what this means, is you've hard-coded the locations of your assets (scripts/css/images/etc), making it very difficult to deploy the site, or move the location of your site on your local drive.
In addition, it causes problems with cross origin requests (the actual error you're seeing). Using a relative path resolves that issue, as you're guaranteed to be referencing the same origin.
You mentioned in your comment, the html file is: C:/Users/Downloads/3dmodelproject/files/Toiletpartitiontool.html
Thus, the relative location here is
C:/Users/Downloads/3dmodelproject/files
In order to then reference
C:\Users\Downloads\3dmodelproject\files\three.js, you simply need to use three.js.
Thus, your page should be:
<html class="gr__2k8dc">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Toilet partition tool</title>
<link rel="stylesheet" href="style.css">
<script src="three.js"></script>
<script src="STLLoader.js.download"></script>
<script src="OrbitControls.js.download"></script>
<script src="resources.js.download"></script>
<script src="toiletpartition.js.download"></script>
</head>
<body>
<!-- Content here -->
</body>
</html>
The reason is that only IE/Windows is happy with C:/
Try changing the drive to a series of ../
Each one of those will raise the folder level one. Eventually it will get to the root of the drive/domain and then go down the folders to your file. Depending on where you are running the html file will decide how many ../ to add. Linux and Mac don't use windows drive letters so this is also cross OS compatible.
The link would become:
../../../../Users/Downloads/3dmodelproject/files/STLLoader.js.download
I'm 90% sure this is the problem you are having
The reason may be your \, which the html requires /
But bonus:
Can you make the scripts to be the relative path to the index.html?
Make the path to be like <script src="/3dmodelproject/files/three.js"></script>
I uploaded a file (.htm) to my sharepoint library. When I click the file, it brings me to a page and runs the script, however the sharepoint javascript does not work. When i type _spPageContextInfo.userId; into the console, it errors not defined.
When i try typing _spPageContextInfo.userId; into the console of the previous window, the sharepoint library, it returns my user id.
Any thoughts on how to get the sharepoint javascript to still run in the uploaded file? I am running sharepoint 2010
When I open up chromes dev tools, I do not see the _layout folder with .js files in it (I see them when I am at the main sharepoint library page). Perhaps there is a way to link to those? I do not know a lot about webpages, sorry.
EDIT:
I've included
<meta name="WebPartPageExpansion" content="full" />
<script src="/_layouts/1033/init.js"></script>
<script src="/_layouts/MicrosoftAjax.js"></script>
<script src="/_layouts/sp.core.js"></script>
<script src="/_layouts/cui.js"></script>
<script src="/_layouts/sp.ui.mylinksribbon.js"></script>
<script src="/_layouts/sp.ui.dialog.js"></script>
<script src="/_layouts/sp.ui.policy.ribbon.js"></script>
<script src="/_layouts/sp.ui.rte.js"></script>
<script src="/_layouts/sp.ribbon.js"></script>
<script src="/_layouts/sp.runtime.js"></script>
<script src="/_layouts/sp.js"></script>
Now when I go to the console I can successfully type _spPageLoaded, but _spPagecontextInfo is not an option...
Following is what I have found to be the minimum qualifications for a stand alone page to work with the JavaScript Class libraries and other features.
You can edit the page with Notepad, or any text editor, and upload to a document library.
Just be sure to save as .ASPX
You still won't be able to use a form element. But that can be overcome by using the SP.ClientContext or REST API.
<%# Page language="C#" %>
<%# Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Import Namespace="Microsoft.SharePoint" %>
<!DOCTYPE html>
<html lang="en">
<!-- document information -->
<head>
<!-- meta information -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- css: sharepoint -->
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=3TRomkG1g2gMGz4rekMIQg%3D%3D"/>
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/search.css?rev=T%2Bhraxktc1A8EnaG5gGMHQ%3D%3D"/>
</head>
<!-- document content -->
<body>
<!-- required: SharePoint FormDigest -->
<form runat="server">
<SharePoint:FormDigest runat="server"></SharePoint:FormDigest>
</form>
<!-- required: script sources -->
<!-- script: SharePoint -->
<script src="/_layouts/1033/init.js"></script>
<script src="/_layouts/1033/core.js"></script>
<script src="/_layouts/MicrosoftAjax.js"></script>
<script src="/_layouts/SP.Core.js"></script>
<script src="/_layouts/SP.Runtime.js"></script>
<script src="/_layouts/SP.js"></script>
<script src="/_layouts/SP.UI.Dialog.js"></script>
<script src="/_layouts/ScriptResx.ashx?culture=en%2Dus&name=SP%2ERes"></script>
<!-- script: local -->
<script>
console.log(_spPageContextInfo.userId);
</script>
</body>
</html>
If you want to keep the functionality provided by SharePoint, you'll need to embed your content onto a SharePoint page.
Edit a page in SharePoint
Add a Content Editor web part to a page
Edit the Content Editor web part
In the web part properties pane that appears on the right side, find the "Content Link" text field
Paste in the URL path to your uploaded .htm file (note that it doesn't have to be a .htm or .html file... any valid text file will do)
Save the web part properties and stop editing the page
The Content Editor web part will then display your content within the page. Your file should contain a valid HTML fragment, and can contain script tags.
I have create a external script call script.js save in js folder. However i don't know why it is not working. Therefore, I have tried put the into the html file and it work fine. So I think it is the problem of missing something in or i don't know.
It is my html code
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button class="button">show</button>
<p>yo</p>
</body>
JQuery
$(".button").click(function(){
$("p").toggle();
});
Ensure jquery is loaded first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
I'd also move this to just before the closing </body> tag in your HTML.
And then check where the JS folder is relative to the HTML file you've written. Currently, the folder would need to be at the same level in the directory structure as the HTML file.
Inside your script, use window.onload. The script might be firing before the DOM has actually finished loading.
You might also want to put jQuery on top so that it finishes loading before any possible jQuery code in your script fires.
Try loading JS in the footer.
You need the elements to be present in DOM before you can select them.
Moreover including external js files at the bottom of your page, gives priority of your HTTP requests to the visual display that will be presented to the client instead of to the logic of interaction or dynamics;
this is the usual behavior you'd want.
If you are using jquery in your JavaScript code please put them in this order
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
If that is not the case can you post the error in the console (using chrome press f12 to see the errors in the console)
Other thing you can check, the js folder is in same directory where your html page is?
let us know
I've turned Stack Overflow up and down, but, unfortunately, none of the answers helped me.
I have a web app that works perfectly on my local PC using IIS provided by the Visual Studio, but when I deploy this app to the server only the CSS is displayed properly.
Folder structure for files is as follows:
Root (this folder is named Knowledge Management on the server)
CSS
JS
Media
Uploads
Documents
Images
Users
My code, at least for Master page head section looks like this:
<head runat="server">
<link href="CSS/Style.css" rel="stylesheet" />
<script src="/JS/jQuery203Min.js"></script>
<script src="/JS/jQueryUI1103Min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
However, browser generates it like this:
<head>
<link href="../../CSS/Style.css" rel="stylesheet" />
<script src="JS/jQuery203Min.js"></script>
<script src="JS/jQueryUI1103Min.js"></script>
<script src="/JS/HomeArticles.js"></script>
</head>
The problem is that besides CSS neither none of the files in JS folder and none of the files in Media or Uploads folders and subfolder doesn't generate properly.
The thing is if I add "slash" in front of the image src attribute the image gets location http://localhost/Media/Discussion.png and if I don't add "slash" then the image location is http://localhost/Uploads/Users/HrvojeFadiga.jpg when it should be http://localhost/Knowledge%20Management/Uploads/Users/HrvojeFadiga.jpg
Here is a sample of code with images:
<div class="profileInfoWrapper">
<img src="/Uploads/Users/<%=article.User.PhotoLocation %>" />
<span class="postInfo">
<img src="/Media/Rating.png" /><%= GetArticleRating(article.idArticle) %>
</span>
<span class="postInfo">
<img src="/Media/Visitors.png" /><%= GetArticleViews(article.idArticle) %>
</span>
<span class="postInfo">
<img src="/Media/Comments.png" /><%= GetArticleComments(article.idArticle) %>
</span>
</div>
FYI, Global.asax doesn't contain any rules for ignoring file routes except for .axd files which is added by default.
I was able to sort this by adding runat=server attribute and using the tilt(~) before defining the source of the file. For example:
<link href="~/CSS/Style.css" rel="stylesheet" runat="server" />
Same applies to javascript files.
For any URLs for scripts and styles you need to call ResolveUrl like this:
<link href="<%= ResolveUrl("~/CSS/Style.css") %>" rel="stylesheet" />
Try this. without "~" it can also work but you can add it just to refer the root directory which is always your project solution. So by using Tilde "~" you can properly specify where your css and js files are located.
<link href="~/CSS/styles.css" type="text/css" rel="stylesheet"/>
<script src="~/JS/jScript.js" type="text/javascript"/>
Similarly for your images that you have stored in upload folders. You can access it by using
<img src="~/Uploads/Images/youImage.gif" />
Just try like below and its worked for me...
<script src="JS/jQuery203Min.js" type="text/javascript"></script>
<script src="JS/jQueryUI1103Min.js" type="text/javascript"></script>
<link href="CSS/Style.css" rel="stylesheet" type="text/css"/>
First of all, thank you all for your replies. After couple of days of playing I've finally figured out what to do to make everything work.
JS problems
I've solved JS problems by adding ScriptManager control to the .aspx page and by adding JS files inside it.
<asp:ScriptManager ID="smScripts" runat="server">
<Scripts>
<asp:ScriptReference Path="JS/jQuery203Min.js"/>
</Scripts>
</asp:ScriptManager>
For some reason CSS files were working "out of the box" so I left them unchanged.
Image problems
I've managed to sort images problems out by avoiding hardcoded links to the images and by adding <%: Page.ResolveUrl("~/Media/Image.png") %> to the src attribute of the <img> tag. I guess I should've done this for everything that I don't want to route. This can be done for CSS files, JS files, everything. However, (even though this should work perfectly) I've experienced some strange problems with JS files and that's the reason for using ScriptManager.
Page links problem
At first I didn't realize that none of my links was working so I figured that the problem were semi-hardcoded links that, for some reason, don't route properly even though I hardcoded route the same way as defined in Global.asax file. I'm still not sure why this isn't working.
The solution for this is to generate links by using <%: Page.GetRouteUrl("RouteName", new { routeParameter1 = routeParameter1Value, routeParameter2 = routeParameter2Value}) %> and everyhting will work fine.
The directories/virtual-directory setup is the likely culprit.
View your page in Google Chrome then "Inspect Element". Scroll to the top and you include your .JS files. You can click on them to see what URL they are trying to link to. More than likely the path is slightly different on the server than your local copy.
I have an error trying to use $(document).ready() as in the above image.
What should i try to solve this problem ?
Edit 23/05/2011 10:54
I have got a clue.
The page i am working inherit from masterpage
In master page this code isn't work, maybe problem of different path
<head id="Head1" runat="server">
<title>Back Office</title>
<link href="~/Styles/MasterPage.css" rel="stylesheet" type="text/css" />
<link href="Styles/custom-theme/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.5.1.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
This code don't seems to work
On the body of master page, there is a script manager and jquery is there,
This make the jQuery works, is because we use scriptmanager in the body so that the document.ready is not work ?
<asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.5.1.min.js" />
</Scripts>
</asp:ScriptManager>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
I have found the problems.
The problem is the jquery code is on the masterpage, in the script manager, and script manager is in inside the body tag.
the document.ready is on the header tag on page that inherit on master page, so before the code to excuting to the body, the jquery is not included yet and that wat it is error.
The easiest way to solve this is, i have to move javascript code in the bottom of body tag.
The proper way to solve, which i still can't find is to put the javascript include code in the header. but i don't find a way that work yet. My master page and inherit page is on the differnt path. I have find a lot of technique such as but none of them work.
Take out all of the other javascript includes except for jquery-1.5.1.min.js. Try it with just that one include. If that works, add the other includes back in one at a time until you get the error. If it doesn't work with just the jQuery script included, chances are it's not pointing at the correct path.
Short answer though, yes, you can use jQuery and document.ready in an ASP.NET page.
Surely you can. Seems, however that jQuery object is not available at the moment of script execution. Verify that jquery library file is indeed loaded via script directive. Or maybe there are some other nuances behind this.