I want to do some client side validation using javascript in ASP.NET page.
I tried using
<script src="../../../JS/Registration.js" language="javascript" type="text/javascript" />
but its not working.
Please help.
If your page is deeply pathed or might move around and your JS script is at "~/JS/Registration.js" of your web folder, you can try the following:
<script src='<%=ResolveClientUrl("~/JS/Registration.js") %>'
type="text/javascript"></script>
add like
<head runat="server">
<script src="Registration.js" type="text/javascript"></script>
</head>
OR can add in code behind.
Page.ClientScript.RegisterClientScriptInclude("Registration", ResolveUrl("~/js/Registration.js"));
Probably the file is not in the path specified. '../../../' will move 3 step up to the directory in which the page is located and look for the js file in a folder named JS.
Also the language attribute is Deprecated.
See Scripts:
18.2.1 The SCRIPT element
language = cdata [CI]
Deprecated. This attribute specifies
the scripting language of the contents
of this element. Its value is an
identifier for the language, but since
these identifiers are not standard,
this attribute has been deprecated in
favor of type.
Edit
Try changing
<script src="../../../JS/Registration.js" language="javascript" type="text/javascript" />
to
<script src="../../../JS/Registration.js" language="javascript" type="text/javascript"></script>
I assume that you are using MasterPage so within your master page you should have
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
And within any of your pages based on that MasterPage add this
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script src="js/yourscript.js" type="text/javascript"></script>
</asp:Content>
ScriptManager control can also be used to reference javascript files. One catch is that the ScriptManager control needs to be place inside the form tag. I myself prefer ScriptManager control and generally place it just above the closing form tag.
<asp:ScriptManager ID="sm" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/yourscript.min.js" />
</Scripts>
</asp:ScriptManager>
Use Fiddler to see what is happening. Then change the path accordingly. You will probably find you get a 404 error and the path is wrong.
Related
I don't necessarily need to run it at server, however, I would like to use the ~/js/somefile.js syntax.
Previously, I had just set everything with Absolute paths and set my project to be at the root level. SO, I'd just declare all my stylesheets, background images and javascript files something like /css/somefile.css
However, for this project, it doesn't run as root.
I can't put runat="server" on a script tag.
I can put it on a link tag, though.
This must be a common problem with a few simple answers.
What I've always done is use a normal script tag and put the src in <% %> tags, as illustrated here:
<script language="javascript" src='<%=ResolveUrl("~/App_Themes/MainTheme/jquery.js")%>' type='text/javascript'></script>
You can use the ScriptManager for this:
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/js/somefile.js" />
</Scripts>
</asp:ScriptManager>
You can get fully what you want by wrapping script tag with asp:ContentPlaceHolder
and the you can access it from code behind, for example set will it be executed or not by setting visible property to true or false.
Here is the example:
<asp:ContentPlaceHolder runat="server" ID="PrintPreviewBlock" Visible="false">
<script id="PrintPageCall" type="text/javascript" >
$(function() {
window.print();
});
</script>
</asp:ContentPlaceHolder>
and from code behind:
PrintPreviewBlock.Visible = true;
You can use functions inside the path string, though, e.g.
<script type="text/javascript"
src="<%=Url.Content("~/Scripts/jquery-1.4.2.min.js") %>"></script>
However that's the ASP.NET MVC syntax for local paths - I can't remember the forms version off the top of my head.
Taken from dailycoding.com:
<script language="javascript" src="<%=ResolveUrl("~/[PATH]")%>" type="text/javascript"></script>
I am trying to use ajaxtool kit downloaded from here for colorpicker.
When i tries to use this on any of my page, it shows me an error
This page is missing a HtmlHead control which is required for the CSS
stylesheetlink that is being added. Please add <head runat="server" />.
What can be the reason.
I am using ToolScriptManager rather than Script Manager as said in the documentation.
I am using Asp.net 3.5 and using colorPicker control under a content page and adding ToolScript Manager in the same place.
As said by rafel
<head>
<title>l</title>
<link href="<%= ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="<%= ResolveUrl("~/css/chromestyle.css") %>"/>
<script src="<%= ResolveUrl("~/js/JScript.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="<%= ResolveUrl("~/js/chrome.js") %>"></script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
If I adds runat in head i starts getting this error
The Controls collection cannot be modified because the control
contains code blocks (i.e. <% ... %>).
I am getting the same sequence of events that Shantanu was getting. It tells me to add the runat=server to the HEAD when I add the AJAX Control Toolkit ComboBox. So I did that and then it started saying
"The Controls collection cannot be modified because the control
contains code blocks (i.e. <% ... %>)." again just like in Shantanu's case.
If I am reading this correctly, is it saying I cannot use the AJAX Control Toolkit's ComboBox if I have lots of inline code in this aspx file (both in java/inline vb as well as HTML/inline vb)? I mean hey I know our aspx pages are ugly and barely hanging on, but seriously?
You can't use <%= ResolveUrl %> when defining your javascript includes when using the Toolkit. Add the references to the header in your code behind instead.
Ajax control is trying to add its styles to the head section of your page, but cannot do that because it cannot find it. Here's how to fix this:
<head runat="server">
Correct format is : <link rel="Stylesheet" href="~/style.css" type="text/css" />
When using Ajax toolkit, don't use <%...%> in the link to external style sheet. Use above link format.
I have content page , i am putting this inside it
<asp:Content ID="Content2" ContentPlaceHolderID="contentPanel1" runat="server">
<script type ="text/javascript" src ="JScripts/jquery-1.2.6.js">
</script>
</asp:Content>
The jquery is not loaded , none of the functions of jquery work.
i have also tried by putting it in masterpage ScriptManager like below
, but still does not work.
<asp:ScriptManager ID="masterScriptManager" runat="server"
EnablePageMethods="True">
<Scripts>
<asp:ScriptReference Path ="~/JScripts/jquery-1.2.6.js" />
</Scripts>
</asp:ScriptManager>
Is there any way to assert whether jquery is loaded or not.
Any ideas ?
Use Firebug to monitor what files are being requested by the browser. Look to see if jquery-1.2.6.js is actually being served or not. Check the file actually exists in the path the browser is requesting it from.
To assert jquery is loaded at all you can paste javascript:alert($); into your location and hit enter. If you get undefined, jquery was not loaded. Also you may want to consider allowing google to serve jquery for you:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
That way it is likely faster and you won't have to worry about folder paths on your server. Google also serves up other versions of jquery, and may have bug fixed versions for you.
You need to include jquery.js in the head section of your html page. So you could just add a placeholder in your master:
<head>
<title>test</title>
<asp:ContentPlaceHolder ID="Scripts" runat="server" />
</head>
...
and in your content page:
<asp:Content ID="indexScripts" ContentPlaceHolderID="Scripts" runat="server">
<script type="text/javascript" src="JScripts/jquery-1.2.6.js"></script>
</asp:Content>
I try to make Folder for things in my ASP.Net Application (e.g. all with Finance in /Finance).
No I bind an JavaScript in the MainPage:
<script type="text/javascript" src="Helper/jquery-1.3.2.min.js"></script>
But when I now open ~/Finance/Payment.aspx I get an JavaScript Error with "Path ~/Finance/Helper/jquery..." not found.
What to do?
Your path Helper/jquery-1.3.2.min.js is a relative path. So when you go into /Finance the browser is looking for jQuery in /Finance/Helper/jquery-1.3.2.min.js.
A simple way around this is to use absolute paths
<script type="text/javascript" src="/Helper/jquery-1.3.2.min.js"></script>
Or you can use a ScriptManager which allows you to use the tilde
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Helper/jquery-1.3.2.min.js" />
</Scripts>
</asp:ScriptManager>
As a last resort if you have issues with the ScriptManager you can also do this
<script type="text/javascript"
src="<%= Page.ResolveClientUrl("~/Helper/jquery-1.3.2.min.js") %>">
</script>
You could always use ResolveClientUrl in the script src attribute (you'll need to make the path to your JavaScript file an app root relative path with the "~/"):
<script type="text/javascript" src="<%= ResolveClientUrl("~/Helper/jquery-1.3.2.min.js") %>"></script>
I have no issues when doing using JQuery in a aspx page without a masterpage, but when I try to use it in pages that have a masterpage, it doesn't work, so I end up putting the jquery files and other script files in the page instead of the master. Now if I have 10 pages, I am doing this for all 10, which I know is incorrect. In the sample masterpage below, where would I put my script files.
<html>
<head runat="server">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="ContentPanel" runat="server">
</asp:ContentPlaceHolder>
</body>
</html>
I recently used the fancybox plugin and what I did was instead of putting the jquery script and fancybox scripts in the masterpage because I got frustrated on getting it to work, I just put it in the page where I wanted the script to run, specifically at the bottom, right before the closing asp:Content. Of course, now I have the issue of, if I wanted to use the fancybox plugin in other pages, I would put the jquery script and fancybox script on all 5 pages instead of just the masterpage. When dealing with masterpages, where does everything go using my example above?
You would declare your main jQuery scripts within the master page, as you would normally:
<head runat="server">
<link href="/Content/Interlude.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
And then any page specific JS files could be loaded within the Content controls that reference the Head ContentPlaceholder.
However, a better option would be to look into the ScriptManager and ScriptManagerProxy controls - these can provide you with a lot more control over the way your JS files are served to the client.
So you would place a ScriptManager control in you master page, and add a reference to the jQuery core code in that:
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Path="/Scripts/jquery-1.3.2.min.js" />
</Scripts>
</asp:ScriptManager>
Then, in your page that requires some custom JS files, or a jQuery plugin, you can have:
<asp:Content ID="bodyContent" ContentPlaceholderID="body">
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
<Scripts>
<asp:ScriptReference Path="/Scripts/jquery.fancybox-1.2.1.pack.js" />
</Scripts>
</asp:ScriptManagerProxy>
The ScriptManager allows you to do things like control where on the page scripts are rendered with LoadScriptsBeforeUI (or better yet, after by setting it to False).
I use this method.
<script type="text/javascript" language="javascript" src='<%=ResolveUrl("~/scripts/jquery.js") %>' ></script>
Just place it above your tag...
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
Alright use a different contentplaceholder for your script. It should look like this
<script type="text/javascript" src="myscript.js" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server">
</asp:ContentPlaceHolder>
Place this tag at the bottom of your masterpage, close to the </body> tag. This will allow you add scripts on the masterpage and also on your pages as well. Make sure that your scripts are loading in the right order by viewing the page source and ensuring the HTML rendered in the right way. Good luck.
Oh one more thing, make sure jQuery and then FancyBox load up before any other js you may have out there or else it won't work. Javascript loads in the order it was called, jQuery must load first!
This is what will work inside a Master page:
For Script file:
<script type="text/javascript" src="<%= ResolveUrl("~/script/scriptFile.min.js") %>"></script>
For CSS file:
<link rel="stylesheet" href="~/styles/CssFile.min.css" runat="server" />
Additional Notes:
Use the minified versions as could as possible (FileName.min.js) and
(FileName.min.css) to reduce loading time and improve SEO.
Put the CSS before the </head> and the script before the </body> to
enhance performance and improve SEO.
The tile character (~) in the path will resolve automatically to the root of your website.
Do not forget to use runat="server" for the stylesheet only. The script must not have runat="server" because it already uses server operators <%= %>.
You can use the online http://jscompress.com/ to compress your javascript and https://csscompressor.net/ to compress your CSS files.