I am building an ASP.NET Webform application with C# in VS 2012, .NET framework 4.5
I have a MasterPage in root of application, JavaScript files are in folder named js.
Here is the problem: If page are in root folder then everything is working fine (css+js), if I put any pages in subfolder then css is worked but those JavaScripts are not working at all, obviously the reference path is wrong.
So the Css reference path is fine, but for the script no matter what I used they all are not worked (js/script.js or ~/js/script.js or /js/script.js or ../ ResolveUrl, ResolClientveUrl ... or all of method in this http://yobriefca.se/blog/2010/10/19/%3C-head-%3Eache-including-javascript-in-asp-dot-net-master-pages/ ) they all refer to root/SUB-FOLDER/js/script.js instead of root/js/script.js
in root: a single MasterPage, Default.aspx, test.aspx, js folder, css folder and Pages folder. Default and test pages are working file, but all pages in Pages folder is not display .js SO OBLIVIOUSLY the path is wrong whenever pages is not in root
In my master page:
<head runat="server">
<title></title>
<link rel="stylesheet" href="~/css/style.css" />
<%-- tried these and lot more but NOT workkkkkkkkkkk --%>
<%--<script src="~/js/jquery-1.7.1.min.js" ></script>
<script src="~/js/script.js" ></script>--%>
<%--<script src='<%=ResolveUrl("~/js/jquery-1.7.1.min.js") %>' ></script>
<script src='<%=ResolveUrl("~/js/script.js") %>' type="text/javascript"></script>--%>
<%--<script src='<%=ResolveClientUrl("~/js/jquery-1.7.1.min.js") %>' type="text/javascript"></script>
<script src='<%=ResolveClientUrl("~/js/script.js") %>' type="text/javascript"></script>--%>
<asp:ContentPlaceHolder ID="Head" runat="server">
</asp:ContentPlaceHolder>
the script.js is somthing like:
....
$.include('js/superfish.js')
$.include('js/FF-cash.js')
$.include('js/tms-0.4.x.js')
$.include('js/uCarausel.js')
$.include('js/jquery.easing.1.3.js')
$.include('js/jquery.tools.min.js')
$.include('js/jquery.jqtransform.js')
$.include('js/jquery.quicksand.js')
$.include('js/jquery.snippet.min.js')
$.include('js/jquery-ui-1.8.17.custom.min.js')
$.include('js/jquery.cycle.all.min.js')
$.include('js/jquery.cookie.js')
$(function(){
if($('.tweet').length)$.include('js/jquery.tweet.js');
if($('.lightbox-image').length)$.include('js/jquery.prettyPhoto.js');
if($('#contact-form').length||$('#contact-form2').length)$.include('js/forms.js');
if($('.kwicks').length)$.include('js/kwicks-1.5.1.pack.js');
if($('#counter').length)$.include('js/jquery.countdown.js');
if($('.fixedtip').length||$('.clicktip').length||$('.normaltip').length)$.include('js/jquery.atooltip.pack.js')
// Slider
$('.main-slider')._TMS({
.....
ERROR in developer tool (Console) of web browser:
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/tms-0.4.x.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/uCarausel.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.jqtransform.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.quicksand.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.snippet.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/FF-cash.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/superfish.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.tools.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery-ui-1.8.17.custom.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cycle.all.min.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.easing.1.3.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://ApplicationRoot/Pages/js/jquery.cookie.js
Uncaught TypeError: Object [object Object] has no method '_TMS' script.js:22
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
HTML
You typically don't want any scripts in the <head /> apart from scripts like Modernizr that have feature detection. It's more of a best practice to move all scripts to the bottom of the page like so:
<html>
<head runat="server">
<title></title>
<link rel="stylesheet" href='<%= ResolveUrl("~/css/style.css") %>' />
<asp:ContentPlaceHolder ID="Head" runat="server" />
</head>
<body>
<!-- Scripts at bottom of page for faster loading. -->
<script src='<%= ResolveUrl("~/js/jquery-1.7.1.min.js") %>'></script>
<script src='<%= ResolveUrl("~/js/script.js") %>'></script>
</body>
</html>
SCRIPT.JS
Referencing the other script files in script.js will require the / to be appened to 'js/` like so:
$.include('/js/superfish.js');
$.include('/js/FF-cash.js');
$.include('/js/tms-0.4.x.js');
$.include('/js/uCarausel.js');
$.include('/js/jquery.easing.1.3.js');
$.include('/js/jquery.tools.min.js');
$.include('/js/jquery.jqtransform.js');
$.include('/js/jquery.quicksand.js');
$.include('/js/jquery.snippet.min.js');
$.include('/js/jquery-ui-1.8.17.custom.min.js');
$.include('/js/jquery.cycle.all.min.js');
$.include('/js/jquery.cookie.js');
if($('.tweet').length)
$.include('/js/jquery.tweet.js');
if($('.lightbox-image').length)
$.include('/js/jquery.prettyPhoto.js');
if($('#contact-form').length || $('#contact-form2').length)
$.include('/js/forms.js');
if($('.kwicks').length)
$.include('/js/kwicks-1.5.1.pack.js');
if($('#counter').length)
$.include('/js/jquery.countdown.js');
if($('.fixedtip').length || $('.clicktip').length || $('.normaltip').length)
$.include('/js/jquery.atooltip.pack.js');
// Slider
$('.main-slider')._TMS({
MISC
Don't forget to clear your cache or work in private browsing while testing all of this!
You can include a .js file either between the head tags , contentplaceholder tags or inside the body tags. This will in all cases be reflected in your other pages that include this masterpage. All you need to focus on is the way that the path is created.
The code below adds a jquery file to a masterpage in the head section of the masterpage.
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<title></title>
<script src="jquery-2.1.1.min.js"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
<script>
</script>
Relative vs Absolute URL's
By using ../ and ~/ before the url path , you are creating a relative URL. The paths of relative URL's is affected when you change the folder level of either the file that you are referring to or the file which contains the link.
../ symbol make one step out of the folder containing the link. make sure you have enough '../' to refer to the correct file.
~/ symbol creates a path that starts at the root of your project.
To create an absolute URL ,Just drag the file you intend to include in the page from solution explorer in Visual Studio to the page.
For more about the difference between absolute and relative URL's check
Difference between Relative path and absolute path in javascript
Try replacing ~/ with ../. One of my projects was doing the same thing and that fixed it.
Also, make absolutely certain that even on the server (and not just in the project), the JS folder is directly below the root.
You should use ~ prefix, before file location. (like this: ~/projects/files/web/admin )
If you want the js to load on every page, including relative paths, then add it just under the modernizr entry:
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
<%: Scripts.Render("~/Scripts/jquery.min.js") %>
<%: Scripts.Render("~/Scripts/my.js") %>
</asp:PlaceHolder>
Related
I'm working on a Web Project and I need to share one master page so that when I create a new page, it has the basic layout.
What i've thought is to create a project with that master page and, in each web project, add it as a reference.
But the problem is that i don't know how to embed the master page in the .aspx file that I want to apply the MP, or if it's the best way of sharing master pages between projects.
I'll apreciate any help or comment!
Here I give you my code (this doesn't work):
Index.aspx:
<%# Page Language="C#" AutoEventWireup="true" MasterPageFile="" CodeBehind="Index.aspx.cs" Inherits="MiWeb.Index" %>
<HeaderMp:Header ID="ctntHead" ContentPlaceHolderID="head" runat="server">
<title>SITPer</title>
</HeaderMp:Header>
Header.Master:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Header.Master.cs" Inherits="MasterPages.Header" %>
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.min.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-layers.min.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/skel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<div>
<!-- Header -->
<div id="header-wrapper" >
<div id="header">
<!-- Logo -->
<div id="logo">
<h1>SITPer</h1>
<p>Prueba</p>
</div>
</div>
</div>
<asp:ContentPlaceHolder ID="body" runat="server">
</asp:ContentPlaceHolder>
</div>
</body>
</html>
Thanks!!
NOTE: In addition to the linked files feature described here, there is a new shared project feature in Visual Studio 2015+ that allows you to create a project exclusively for sharing code that will be compiled into the project it is added to.
Master pages can only belong to a single web project. However, there is a feature of Visual Studio/MSBuild that allows you to share the code between projects to effectively get the desired result. If you put the master page files (all of them including .master, .master.cs and .master.designer.cs) into a folder at the same level as your solution you can use the linked file feature of Visual Studio to add the file as a linked file (one that is not copied into the project folder).
In Windows Explorer, open up the directory that has your solution (.sln) file. Right click in the whitespace and click New -> Folder. Name the folder SharedFiles. Copy the Header.master, Header.master.cs and Header.master.designer.cs files into the folder.
In Visual Studio, delete the Header.master file(s) from all of the projects. Then follow these steps for each project you want to share the Header.master page in.
Right-click on the project you wish to share the file in Solution Explorer, and click Add -> Existing Item.
In the Add Existing Item dialog, navigate to the SharedFiles folder.
Highlight the Header.master, Header.master.cs and Header.master.designer.cs files.
In the bottom right corner of the Add Existing Item dialog, click the down arrow next to the Add button (not the Add button itself!), and click the Add As Link item in the dropdown.
If you did it correctly, the icon of the file will have an arrow on it to indicate that it is a linked file. Now when you make changes to the master page, the changes will be reflected in all of the projects.
You also have an issue that you must fix in your Index.aspx page. You must set the master page file to the virtual location of the file. If you follow the instructions above, the path will be...
MasterPageFile="~/Header.master"
But note that the virtual path will change if you put the file (or the linked file) in a subdirectory of your web project.
i think you are not adding the address of your masterpage in your page (MasterPageFile="").
are you using visual studio?
if you are then you just need to use
ctrl+shift+a and select web form using masterpage.
Master Page:
<%# Master Language="VB" AutoEventWireup="false" CodeBehind="Site1.master.vb" Inherits="WebApplication2.Site1" %>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
Page.aspx which uses masterpage:
<%# Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site1.Master" CodeBehind="Registration Form.aspx.vb" Inherits="WebApplication2.Registration_Form" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
I am attempting to implement this simple example. However, the Javascript isn't working (all the content is showing at all times, no tab 'switching' is occurring). All the JS files are hosted locally.
In my head content placeholder:
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script type="text/javascript">
// not working
$(document).ready(function () {
$("#tabs").tabs();
});
</script>
In my main body content placeholder:
<div id="tabs">
<ul>
<li>One</li>
<li>Dos</li>
<li>Drei</li>
</ul>
<div id="tabs-1">
<p>Blah blah blah.</p>
</div>
<div id="tabs-2">
<p>Blah some more.</p>
</div>
<div id="tabs-3">
<p>Blah again.</p>
</div>
</div>
So far from searching SO and wherever else Google has taken me, this is what I've found and tried (with results for each listed):
Wrap the jQuery code in $(document).ready(function () { // code here }); rather than a simple function ($(function() { $( "#tabs" ).tabs(); });). It doesn't work either way.
Instead of $("#tabs").tabs();, use $("#<%= tabs.ClientID %>").tabs(); so that .NET can get the ID of the html element. In addition to not working, this also produces the error: tabs does not exist in the current context.
Place the JavaScript in the same content placeholder as the #tabs div tags. Still doesn't work.
Add runat="server" to the #tabs div tag. Still doesn't work.
Delete the designer file, then right click on the aspx file and select "Convert to Web Application". This doesn't work because this is already a web application and there is no designer file.
I can't figure out what else to do to make it work.
UPDATE: I was asked to view my browser console logs and found the following:
One of the JS files is giving a HTTP/1.1 401 Unauthorized error. I noticed it was blocked and I unblocked it from the file system, but it still isn't working.
I think problem could be in path to the jquery scripts.
Try to check loading of resources in browser console, or you can try to include jquery from jquery server...
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
I'm looking for validation here.
Some initial definitions I use:
"gator tags" are the <% %> tags for executing 'at render' code
Given the following:
<%# Page Language="C#" %>
<html>
<head runat="server">
<!-- meta description --><meta runat="server" id="meta_description" name="description" content="" visible="false" />
<link rel="canonical" href="<%=Context.Request.Url.AbsoluteUri %>" />
</head>
<body>
<h1>ASPNet Head runat=server parser bug.</h1>
<p>Inspect the source and look for <link rel="canonical" and see that you have the Render code enclosed with <% %> being sent to the browser.</p>
</body>
</html>
First, take notice of the render code in the <link rel="canonical" href="<%= Context.Request.AbsoluteUri %>" />. This is intended to output the AbsoluteUri for the current page (please refrain from the distraction about link rel=canonical semantics... I acknowledge this may not be the ideal way to do this)
When you run this code, the HTML sent to the browser is as follows:
<html>
<head>
<!-- meta description --><link rel="canonical" href="<%=Context.Request.Url.AbsoluteUri %>" /><title>
</title></head>
<body>
<h1>ASPNet Head runat=server parser bug.</h1>
<p>Inspect the source and look for <link rel="canonical" and see that you have the Render code enclosed with <% %> being sent to the browser.</p>
</body>
</html>
Notice how the render code within <% %> is output into the HTML stream, and not executed?
The major bug I see is that the ASP.Net parser doesn't adequately kick into Code Parsing state for the link tag, but instead grabs the whole string "<%= Context.Request.Url.AbsoluteUri %>" and shoves that into the (string)Href property for HtmlLink. (You can verify this by adding <%asdf%> somewhere on the page to see the ASP.Net parser's generated source and search for 'AbsoluteUri').
The odd thing is that Head runat=Server seems to kick the ASP.Net parser into a state where every tag, with or without 'runat=server', gets built as a server control. This has several side effects that I've noticed over the years, like whitespace slamming and others.
When you remove runat="server" from the HEAD tag, it works properly. The expected behavior is the Context.Request.Url.AbsoluteUri is properly emitted as: http://localhost:5678/HeadParserBug.aspx
I don't want this to be a discussion, but a validation by stackoverflow community of the problem. Can the ASP.Net community at large validate this find? Thanks.
I just tried changing my jquery ui references to the master page . I get the error above only on Internet explorer.
I dont get the error on Firefox and Chrome .
This is the jquery code where the error is thrown :
return a.browser.msie?(b=Math.max(document.documentElement.scrollWidth,document.body.scrollWidth),c=Math.max(document.documentElement.offsetWidth,document.body.offsetWidth),b<c?a(window).width()+"px":b+"px"):a(document).width()+"px"},resize:function(){var b=a([]);a.each(a.ui.dialog.overlay.instances,function()
I have the master page below :
<head id="Head1" runat="server">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css"
type="text/css" />
<asp:ContentPlaceHolder ID="ExtraHeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<form id="form2" runat="server">
<asp:ScriptManager ID="ScriptManagerService" runat="server">
<Scripts>
<asp:ScriptReference Path="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ScriptMode="Auto" />
<asp:ScriptReference Path="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" ScriptMode="Auto" />
</Scripts>
</asp:ScriptManager>
</form>
</body>
Please let me know what I need to be doing ?
I tried putting the jquery references in the head section , but the jquery code within my aspx file seems to give an error saying 'dialog' object not defined or 'tooltip' object not defined. I think the jquery library is not getting loaded when I try to put the references in the head section.
jQuery.browser has been removed in jQuery 1.9 (and you use 1.10), so any attempt to process it as an object (i.e., access its msie property) is destined to fail. If you still want to use it, include jQuery migrate plugin along with jQuery
I updated jquery-ui to 1.11.3 and the problem went away.
Add library from given link in your project.
http://code.jquery.com/jquery-migrate-1.2.1.js
or
Register below link in your page
<script type="text/javascript" src="code.jquery.com/jquery-migrate-1.2.1.js"></script>
The jquery-browser-plugin now provides the $.browser object. Including $.browser.msie
I'm trying to use CKEditor in my Webforms application and I have tried many other methods without success. Can someone help? The site uses a Site.Master file which all the aspx files provide content for using content place-holders. So I place the JavaScript call in the ASPX rather than in the master file.
I'm also trying to get it to edit in a content editable div element. It works fine in a small test site but not in my application. Any ideas?
My Site.master has two content placeholders I want to use:
<asp:ContentPlaceHolder ID="Scripts" runat="server" />
and
<asp:ContentPlaceHolder ID="MainContent" runat="server">
An then my aspx files have:
<asp:Content ID="Content3" ContentPlaceHolderID="Scripts" runat="server">
<script src="ckeditor/ckeditor.js"></script>
</asp:Content>`
and
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<div id="renderTarget" renderwidth="1100">
</asp:Content>
</asp:Content>
Somewhere in my JavaScript, I set the content editable of my renderTarget div to true.
$(".contentbox[dynamic='true']").attr("contenteditable", "true");
And at this point, I expect CKedtor to add its controls to the div. But It doesn't. i use the same process with TinyMCE and it works fine.
If you have CKEditor in your project correctly, it is as simple as:
<textarea cols="80" class="ckeditor" id="editor1" name="editor1" rows="10"></textarea>
or even
<div contenteditable="true">...</div>
Also, you may want to read up on jQuery Selectors.
An example more like what you posted:
<div id="ckMe">...</div>
<script>
$(document).ready(function () {
$("#ckMe").attr("contenteditable", "true");
});
</script>
all you need is to install the version for asp.net in your project and then just use it as simple as adding a usercontrol:
<ckeditor:ckeditorcontrol ID="CkEditor1" runat="server"></ckeditor:ckeditorcontrol>
Documentation from ckEditor