I have a very strange problem in an ASP.NET page, the following reference of JavaScript file works well in IE6
<script src='~/Scripts/xxx.js' type="text/javascript"></script>
But not working in IE7/8, I got object required error when load the page
change to the following works:
<script src='<%# ResolveUrl ("~/Scripts/xxx.js") %>' type="text/javascript"></script>
Can anyone explain? Thanks.
~/ is not going to be anything the browser knows about, it needs to be a relative path or an absolute one. The ResolveUrl method take an asp.net path and creates one the browser can understand.
Use this:
<script src="<%= Response.ApplyAppPathModifier("~/Scripts/xxx.js") %>" type="text/javascript"></script>
Basically, the "~" is a way to refer to the application's home directory, but it is only understood by ASP.NET. You can call the function I listed above to translate that into a real HTTP path.
Related
In my asp.net website using MasterPage and Routing I use a tilde in the href attribute of the link tag for the stylesheet in the head section of the MasterPage. Like this:
<link href="~/Styles/Main.css" rel="stylesheet" type="text/css" />
Which works like a charm. Since the website uses routing the url will contain more and more /, yet the stylesheet's href remains valid because the tilde points to the root of the web application and the styles are used.
I tried using the same technique for the src attribute of the script tags, but this doesn't seem to produce the expected result. I tried:
<script src="~/Scripts/jquery-1.8.2.min.js" type="text/javascript" ></script>
But this just outputs the tilde character to the HTML of the page instead of replacing it with the root of the web application as it does for the href attribute. My experience is that asp.net replaces tilde in href attributes but not in src attributes.
How can I make the tilde work in the src atrribute of script tags?
I'm not sure there is a way to get it to work correctly without a bit of assistance. This should work, not as nice as the link though:
<script src="<%=ResolveUrl("~/Scripts/jquery-1.8.2.min.js")%>"></script>
Unfortunately, what you want just doesn't work (although I agree it should).
If you are using a script manager, then you can do something that is reasonably close:
<asp:ScriptManager>
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.8.2.min.js" />
</Scripts>
</asp:ScriptManager>
This was working on Friday, and now isn't. I've got this at the beginning of a UserControl:
<link type="text/css" href="/App_Themes/css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#MainContent_ucSearchControl_dpPickupStart").datepicker();
$("#MainContent_ucSearchControl_dpPickupEnd").datepicker();
});
</script>
And further down, this:
<td><asp:TextBox id="dpPickupStart" runat="server" style="width: 65px"/></td>
<td><asp:TextBox id="dpPickupEnd" runat="server" style="width: 65px"/></td>
Which results in (in the rendered page) input controls with:
name="ctl00$ctl00$MainContent$ucSearchControl$dpPickupStart" id="MainContent_ucSearchControl_dpPickupStart"
name="ctl00$ctl00$MainContent$ucSearchControl$dpPickupEnd" id="MainContent_ucSearchControl_dpPickupEnd"
And yet, every time the page loads, I get an Object Expected javascript error which points to the $(document).ready location.
What am I missing?
EDIT: Firebug is reporting that:
$ is not defined
[Break On This Error] $(document).ready(function () {
Being a user control you cannot guarantee that the relative path to your JS files will always be correct depending on the location of the parent page in the file system hierarchy.
Therefore change you JS script tags as follows to use the Control.ResolveUrl method which converts a URL into one that is usable on the requesting client.
<script src='<%=ResolveUrl("~/Scripts/jquery-1.5.1.min.js")%>' type="text/javascript"></script>
<script src='<%=ResolveUrl("~/Scripts/jquery-ui-1.8.11.custom.min.js")%>' type="text/javascript"></script>
Or reference from a CDN for added performace bonus of caching.
jQuery hosted on google
jQuery UI hosted on google
That error is caused due to Jquery not available. I think Swaff's solution should work(+1). Check if you have the Jquery-1.5.1.min.js file is available in Scripts folder of your solution. Or it could also be that your Scripts folder is renamed.
HTH.
Is there any reason why registering a javascript file from the head tags of an ASP.NET master page wouldn't work? For example, I have the following (plus many other) file referece:
<script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
but jquery (and every other JS reference) doesn't work when the page loads.
Any thoughts? Thanks.
The src attribute is relative, try
<script type="text/javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
and see if that fixes your problem
If that doesn't work, you can try this:
<script type="text/javascript" src="<%# ResolveUrl("~/js/jquery/jquery-1.4.2.min.js") %>"></script>
and in your Page Load handler in the master page add this code:
Page.Header.DataBind();
The masterpage can have script resources just like a normal HTML page; you'll probably want to check the problem with an HTTP debugger like FireBug or Fiddler2, if phsr is correct you'll see the requests failing with an ErrorCode.
Using master pages will not affect the loading of JavaScript files. Your problem is either the location of the file or the script tag is formatted incorrectly.
I'm trying to add a script reference to jQuery in my master page so that it will work for any page. It currently looks like this
<script type="text/javascript" src="jquery.js"></script>
The problem is that the path is always relative to the executing aspx page so this will only work if the "jquery.js" file is located in the same folder. To make it work I have to change the line to:
<script type="text/javascript" src="../../jquery.js"></script>
This is obviously less than ideal because it will only work for pages that are two levels deep from the root folder. If I try the following, IIS throws an error about an unexpected character.
<script runat="server" type="text/javascript" src="~/jquery.js"></script>
Any ideas?
EDIT: I forgot to mention as well that the script MUST be in the head tag
The current top answer throws a "ASP.NET Ajax client-side framework failed to load." error when I add it to my master page. Its thrown from javascript and not the .Net compiler. If I move the ScriptManager to the head section where it should be I get a compile error about the ScriptManager needing to be inside a form tag.
The third answer throws a "Illegal characters in path." exception from the compiler
EDIT 2: When I add that line to my head tag I get this error from IIS.
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
SOLVED: I took the edited response from the answer below and put it inside an asp:ContentPlaceHolder element
You could use a ScriptManager:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/jquery.js" />
</Scripts>
</asp:ScriptManager>
EDIT: If you absolutely need this in your <head> section, you could do something like:
<head>
<script type="text/javascript"
src="<%= Page.ResolveClientUrl("~/jquery.js") %>"></script>
</head>
EDIT 2: According to the comments, if you are observing that
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)
you may need to change the above to use the data-binding syntax:
<head>
<script type="text/javascript"
src="<%# Page.ResolveClientUrl("~/jquery.js") %>"></script>
</head>
Try <%# instead of <%= in Master page under head section
<script type="text/javascript"
src="<%# ResolveUrl("~/YourScriptFolder/YourJQueryOrJavascript.js") %>">
</script>
Then in Code Behind of Master page under Page_Load Event
Page.Header.DataBind();
Now you are good to go with either jQuery and JavaScript as well as CSS just you need to change your path in ResolveUrl which file you want to handle CSS, JavaScript, jQuery.
If you're not going to us asp:ScriptManager or absolute paths then you can do it like this:
<script runat="server" type="text/javascript"
src='<%= Page.ResolveUrl("~/jquery.js") %>'></script>
I do not know whether you guys found the solution to your problem or not. I was facing the same problem and going nuts to figure out why do I get "jQuery is undefined" error on the plugins i use. I tried all the solutions i get from the internet but no luck at all.
But, suddenly something splash on my mind that may be the script files should be in order. So, I moved the jquery referece to first position and everything start working like charm.
Remember guys, if you're using any plugins with jquery, make sure you use the folloing order of setting reference to those fiels.
reference to the jquery library
reference to the other subsequent plug-in libraries and so on...
e.g.:
"script src="js/jquery-1.3.2.min.js" type="text/javascript"...
"script src="js/jqDnR.min.js" type="text/javascript"...
"script src="js/jquery.jqpopup.min.js" type="text/javascript"...
"script src="js/jquery.bgiframe.min.js" type="text/javascript"...
Always make sure you must put the jquery reference to first and then the subsequent libraries.
Hope, this solves your problem especially when you use with MasterPages. Its very strange that it works no matter what order you use when you don't use MasterPages but when you do, then it somehow requres the proper order.
Good luck and happy coding,
Vincent D'Souza
Look at How to Run a Root “/”. This should fix all your issues regarding unresolved .js file paths. You basically reconfigure the VS Dev server to run your application as localhost:port/ as opposed to the regular localhost:port/application name/ making name resolution work the same way as it does on IIS.
For absolute path of the file for any page use it following:
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/jquery.js") %>"></script>
<script type="text/javascript" src="/full/path/to/jquery.js"></script>
If this script tag goes directly to the browser, then you unlikely can substitute your site's root there. At least not on the server. So you can:
Deploy site to the root of domain
name and use absolute paths
(simplest solution).
Insert this
link with server control.
Preprocess resulting HTML before
sending it to the client (with
HttpResponse.Filter).
You can also use <base> HTML tag:
<base href="http://www.domain.com"></base>
and then all the links in header section are relative to base address:
<script type="text/javascript" src="scripts/jquery.js"></script>
It's often useful when you have multiple publishing destinations, like local dev web server, demo server, etc. You just replace that base URL.
<body>
<script language="javascript" src='<%= this.ResolveClientUrl("~/full/path/to/jquery.js") %>' type="text/javascript"></script>
</body>
This may be a painfully simply question for which I will be mocked but I am having difficulty in using filepaths in master pages. I believe this is because if a page in a sub-directory to using the master page then the filepath is incorrect.
To fix this I need to get the filepath from the root but I can't seem to get it working.
I tried:
<script type="text/javascript" src="~/jQueryScripts/jquery.js"></script>
and
<script type="text/javascript" src="../jQueryScripts/jquery.js"></script>
No luck on either!
Any ideas on how I can tell it to get the filepath from the root?
I'm just assuming by filepath, you actually mean url (or uri, I forget which one is partial).
Without the ~, the first example should work. <script type="text/javascript" src="/jQueryScripts/jquery.js"></script> would cause the browser to request http://www.example.com/jQueryScripts/jquery.js (where www.example.com is your domain).
I believe you need to have runat=server in the <head> tag of the MasterPage for this URL rebasing to work.
<head runat="server">
First off the tilde in front is a asp.net thing for use in server controls and won't work in basic HTML.
Without getting into detailed explanations you could just use a slash (/) in front, and include the web app name if its not the root site.
Or you could put code in your master page for dynamically including scripts, and let it handle the pathing. Like:
public void AddJavascript(string javascriptUrl)
{
HtmlGenericControl script = new HtmlGenericControl("script");
script.Attributes.Add("type", "text/javascript");
javascriptUrl += "?v" + Assembly.GetExecutingAssembly().GetName().Version;
script.Attributes.Add("src", ResolveUrl(javascriptUrl));
Page.Header.Controls.Add(script);
}
The above code also appends the assembly version. I use this mostly for development so my javascript files get updated whenever I build.
You could use the Page.ResolveUrl method to get around this
for example:
<script type="text/javascript" src="<%=Page.ResolveUrl("~/jQueryScripts/jquery.js")%>"></script>