I have a Site.Master in my ASP.NET project which defines a HEAD section as follows
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id="MasterTitle">MyApp</title>
<link rel="icon" href="Content/icon.ico" type="image/x-icon" />
<link href="Content/mycss.css" rel="stylesheet" type="text/css" />
<script src="Content/mycode.js" type="text/javascript"></script>
</head>
In the mycode.js file, I have a function called GetSels();
function GetSels()
{
//do stuff
}
If the GetSels function is defined in Site.Master, GetSels is callable. If it's in mycode.js, it's not.
Every code example I've seen seems to say this should work.
What am I doing wrong?
This should really work perfectly as I have done this multiple times myself.
Check that the code in your external javascript file runs correctly on page load, this is just to make sure that it is indeed being loaded correctly into your document. For example set an alert("It's loaded"); in your external .js file.
have you checked that your reference to mycode.js is correct? if your using a relative path try "~/Content/mycode.js" in your reference.
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>
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 have following code structure, where i am trying to change the css file href during runtime. I also have the Update Panel, Script Manager in the page.
It looks like that CSS file is not getting changed/loaded by the browser. I am not able to understand why?
<head>
<link runat="server" id="link1" type="text/css" href="TOBE SET ON RUNTIME.CSS"/>
</head>
//Code to change the stylesheet on page load
link1.Attributes["href"] = GetCSSFileName(this.UserId);
Thanks
Change your head section to have ID and RUNAT="server" attribues
<head id="Head1" runat="server">
<link runat="server" id="link1" type="text/css" href="TOBE SET ON RUNTIME.CSS"/>
</head>
You can set CSS stylesheet from codebehind like this
link1.Attributes.Add("href", "mycustomstyle.css");
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.
This question already has answers here:
ASP.Net Master Page and File path issues
(10 answers)
Closed 9 years ago.
We're having some trouble with including javascript in masterpages. The "~/" root shortcut doesn't seem to work, and so we're having to manually enter in the path to the javascript from where it will be used, for example: "../../tooltip.js"
However, the problem is that if the nested page is in a different path, this approach does not work as the path stays the same despite the nested page being in a different location - any solutions on how to get the path automatically working like it does for the css files?
Thanks!
The ~/ is a special entity in ASP.NET which represents the "application root". The translation only happens when you pass that URL through an ASP.NET server control, such as <asp:Image runat="server" ImageUrl="~/path..." />. Trying to use it in something that is passed as literal text directly to the client, such as ` will be rendered exactly that in the browser.
There are a few solutions to this:
Put your scripts in a predictable place relative to the domain root, such as domain.com/scripts/script.js, and you can refer to it as /scripts/script.js. The preceding / tells the client (browser) it is an absolute path from the domain root.
Use Page.ResolveClientUrl to render the correct path (<%=Page.ResolveClientUrl("~/script./js")%>)
Create your own server control which handles the ~/ resolution.
Embed the script as an assembly resource.
Cory Larson recommends:
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/tooltip.js") %>"></script>
Try
<script type="text/javascript" src=<%=Request.ApplicationPath+"/Scripts/Script_Name"%>></script>
I've been using url rewriting and "~" occasionally chokes on special characters in the url even when they are encoded.
If the script tag is in the HEAD element just use a path that is relative to the master page and asp.net will automatically fix the reference for you. Just make sure that the HEAD element has the runat=”server” attribute.
This also works really well for CSS files. It's the only way I've been able to get them to resolve in the VS.NET designer.
Here is a sample from my project:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../styles/reset.css" />
<link rel="stylesheet" type="text/css" href="../styles/960.css" />
<link rel="stylesheet" type="text/css" href="../styles/default.css" />
<link rel="stylesheet" type="text/css" href="../styles/buttons.css" />
<script type="text/javascript" src="../jQuery/jquery-1.3.2.js"></script>
</head>
Linked style sheets can be put within the header (with runat="server") and use a ~ to resolve to the root. However, Javascript files cannot be referenced this way. One additional way to add scripts is with a script manager in the body.
<html>
<head runat="server">
<title>title</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePageMethods="true">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.2.js" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.8.custom.min.js" />
</Scripts>
</asp:ScriptManager>
</body>
</html>
As answered # [Include Javascript adn CSS][1]
http://www.codeproject.com/Articles/404942/Include-JavaScript-and-CSS-on-your-MasterPage
For CSS files:
<link href="<%# ResolveUrl("~/") %>css/custom-theme/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
For JavaScripts:
<script src="<%# ResolveUrl("~/") %>Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
Can you explain what you mean by the "~/" isn't working? It should be exactly what you're looking for. You might check that your head tag has the runat="server" attribute, since that might prevent the "~/" from working.