In Site.Master page, I have references to a few CSS and JS files.
When a page in a subfolder uses this master page, I can see that the css file's path gets correctly translated, by adding necessary ../ in front of it, but not for JS files which results in 404 errors when viewed in Chrome's debug window.
I tired using ~ with runat=server to force translation; didn't work; tried using Page.ResolveURL that gives no error message but seems to break the script and not sure how I can this to work.
In Site.Master:
<!-- Bootstrap Core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
This gets correctly displayed as the following for a .aspx page that is in a sub-folder:
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
for JS files, none of the following works.
This one shows just as is for the same file in sub-folder:
<!-- Bootstrap Core JavaScript -->
<script src="assets/scripts/bootstrap.min.js"></script>
This one shows no 404 erro; a "/<sitename>/" gets prepended to path but script does not work (e.g. drop down menu does not drop)
<!-- Bootstrap Core JavaScript -->
<script src='<%= Page.ResolveUrl("~/assets/scripts/bootstrap.min.js") %>'></script>
And this one, I don't think I can do this!
<!-- Bootstrap Core JavaScript -->
<script runat="server" src="~/assets/scripts/bootstrap.min.js"></script>
I found the answer here. The post offers a few options but what was listed as Edit2 of the answer was what worked for me:
<!-- jQuery -->
<script type="text/javascript" src='<%= Page.ResolveClientUrl("~/assets/scripts/jquery.js") %>' ></script>
<!-- Bootstrap Core JavaScript -->
<script type="text/javascript" src='<%= Page.ResolveClientUrl("~/assets/scripts/bootstrap.min.js") %>' ></script>
Related
This might be something simple for many but for me it's still a huge confusion web. I'm tired of placing references everywhre on master page and normal pages so I'm just going to ask here. I have a project which uses plugins and I want to set references on Master Page so the normal pages can see those references so I don't need to place them on each page one by one. Question is, I'm doing this but why does it not work?
Example
This is My Master Page
<html>
<head>
<link rel="stylesheet" href="AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="AdminLTE/bower_components/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="AdminLTE/bower_components/Ionicons/css/ionicons.min.css" />
<link rel="stylesheet" href="AdminLTE/dist/css/AdminLTE.min.css" />
<link rel="stylesheet" href="AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="AdminLTE/dist/css/skins/skin-blue.min.css" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="PageBody" runat="server">
</asp:ContentPlaceHolder>
<script src="AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="AdminLTE/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="AdminLTE/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="AdminLTE/dist/js/adminlte.min.js"></script>
<script type="text/javascript" src="Scripts/MasterPage/main.js"></script>
</body>
</html>
And in another page i'm using jquery table where I set the DataTable to Table ID with
<script>
$(function () {
$.noConflict();
$("#tblRegistos").DataTable();
});
</script>
And still it says it doesn't recognize DataTable as a function. Script references are in order by the way because it works on the page but not if on master page
EDIT
I just tried to put scripts in the Head of master page and it worked but i tried to avoid this because I read that it's a bad practice to do...
It's because your script tags in the child pages will be rendered before your files. Add the js content of your script tags to .js files and reference them on the master page after main.js.
<script type="text/javascript" src="Scripts/MasterPage/main.js"></script>
<script type="text/javascript" src="Scripts/OtherPage/otherPage.js"></script>
I am having a weird problem. My pages were working (too much data centric) before I needed to implement some javascript UI. Since these UI are required on many pages I referenced them on my masterpage like the following :-
<link href="<%# Page.ResolveUrl("~")%>StenliStyle.css" rel="stylesheet" type="text/css" />
<script src="<%# Page.ResolveUrl("~")%>js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="<%# Page.ResolveUrl("~")%>js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
the moment I added Page.DataBind(); in load event of master page all gridview also started getting binded.
Since I am binding my grid view dynamically and binding them again during post back slow my pages.
How can I stop this behaviour ? I need to use Page.ResolveUrl due to folder structure.
You don't need to call Page.DataBind() to resolve client url on master page. Try to resolve
links with the following way:
<link href="<%= ResolveClientUrl("~/StenliStyle.css") %>" rel="stylesheet" type="text/css" />
<script src="<%= ResolveClientUrl("~/js/jquery-1.10.2.min.js") %>" type="text/javascript"></script>
The error i get seems to be centered around jquery finding what it's in (window,document, etc.). Right now i'm just trying to implement the jQuery datepicker. the project has a master page, where i placed my script references.
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="Styles/jquery-ui-1.8.5.custom.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.datePicker.js"></script>
<script type="text/javascript" src="Scripts/date.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
in my aspx file for the page i am trying to implement the date picker, the code looks like this.
i placed this in the header place holder
<script type="text/javascript" charset="utf-8">
$(window).ready(function () {
$("#<%=this.tbTestPass.ClientID %>").datePicker();
});
</script>
This is the asp control i am trying to apply the datepicker to.
<asp:TextBox ID="tbTestPass" runat="server" Width="120px"></asp:TextBox>
I have tried document and window for jquery context, but they both throw the same error. What noob mistake am i making?
Verify Jquery(.js) file folder path is resolved properly from the application as well as in the IIS.
i had the same situation, i had Jquery.js file under Scripts folder(Scripts/Jquery.js).
but when i went to iis, i am not able to see the Scripts folder.
later i came to know there there is an Script virtual directory in IIS when is taking precedence over the local Script folder.
found that linking to http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js fixed the object missing. pointing to a local file was not working. not sure why, but this will do and suit my needs i think.
I've been trying to find out what's going on with my page for more than an hour.. What I'm trying to do here is to call a javascript function when the page loads, but for some reason it says "object required" then its pointing to my onload event in the body tag. This is what I have..
<head id="Head1" runat="server">
<!-- JAVASCRIPT -->
<script src="JScript/jquery-1.2.6.pack.js" language="javascript" type="text/javascript"></script>
<script src="JScript/stepcarousel.js" language="javascript" type="text/javascript"></script>
<script src="JScript/Carousel.js" language="javascript" type="text/javascript"></script>
<script src="JScript/TopNav.js" language="javascript" type="text/javascript"></script>
<!-- CSS -->
<link href="Style/audiorage.css" rel="stylesheet" type="text/css" />
<link href="Style/carousel.css" rel="stylesheet" type="text/css" />
<link href="Style/tabs.css" rel="stylesheet" type="text/css" />
<title>Audio Rage - Home</title>
</head>
<body onload="javascript:TopNavPageInitialize();">
<form id="form1" runat="server">
<!-- HIDDENFIELDS & SCRIPTS -->
<input type="hidden" value="Main Navigation" id="hdnTabActiveOnLoad" />
and I have this files in this structure
localhost/mytest/JScript/jquery-1.2.6.pack.js
localhost/mytest/JScript/stepcarousel.js
localhost/mytest/JScript/Carousel.js
localhost/mytest/JScript/TopNav.js
localhost/mytest/mypage.aspx
My TopNav.JS has this function
function TopNavPageInitialize()
I also get "Unexpected call to method or property access." in my carousel but I'm not really worried about it I think if I can fix this maybe that 2nd error that I'm getting can be fixed. Thanks!
I'm confused. What am I missing. Thanks.
Since you're using jQuery:
$(document).ready(function(){
// Your code here
});
use that or
$(window).load(function () {
// run code
});
that--depending on what you're going for.
Ready just means the dom is ready but images aren't loaded. Load means everything is done loading.
Of course, it sounds like you've got other issues. But this is a much better option than using inline onload events.
like?
$(window).load(function() {
alert('x');
});
$(window).load(function funcName() {
alert('x');
});
both says object expected
It looks to me like your scripts aren't loading properly.
To really see what's going on use either Firebug in Firefox, or the developer tools (press F12) in IE8. (If you're still using IE7/6 google IE Developer Toolbar - it will be a start).
Once you're using one of those, you can then see what scripts are being loaded, or whether you're getting 404's or similar for them.
Also, as an aside, you don't need the
language="javascript"
attributes any more.
I am using ASP.NET 3.5 with MasterPages. My master page has the script references to jquery and jquery UI. My web page that uses the master page has a script reference for a custom javascript file for that page. This javascript file has jquery calls in it (i.e. document.ready --> set up input boxes as calendars).
When I run the website in debug from Visual Studio, the input boxes are not set as calendars. However, if I copy the script from the external file and include it in a script block in the web page, the input box becomes a calendar.
I also have an element in the child page (not sure if that makes a difference). I have referenced the external javascript file in the ScriptManager and outside of the ScriptManager and neither work.
Why does jQuery not work in an external javascript file when the jQuery script reference resides in the master page?
Any help would be appreciated.
Thanks
MASTER PAGE CODE
<head id="Head1" runat="server">
<title>Customer Agreement Lifecycle Management System </title>
<link rel="stylesheet" type="text/css" href="~/calms.css" />
<link href="css/ui-lightness/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery-1.3.2.min.js") %>"></script>
<script type="text/javascript" src="<%=ResolveUrl("~/js/jquery-ui-1.7.1.custom.min.js") %>"></script>
</head>
CHILD PAGE CODE
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script src="<%=ResolveUrl("~/js/rule.js") %>" type="text/javascript"></script>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
I want to thank everyone for their suggestions but I made a "bone-headed" mistake. The tags were mistakenly still in the external js file. Once removed, everything works as expected. I apologize for taking up everyone's time (and somewhat embarrassed).
Thanks.
Is the external script include below the jquery script? Maybe it's the order in which the scripts are being loaded and run...
Are you sure the reference to the jQuery file in the child object appears in the head of the HTML document?
If not, put a ContentPlaceHolder in the tag and put the references you need in each child page.