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.
Related
I am trying to add a panel as a child control of another panel in the codebehind of a master page, it's a simple as:
Panel1.Controls.Add(Panel2)
However when I try to do that, I get this error:
The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
There are a number of questions that talk about having <%= %> elements in the head section, which I do not have. I have been so far as to remove all <% %> elements from this page, to no avail, the error still occurs. Can anyone suggest a way to get this to work?
* Example for Answer B *
=== code with error ===
<script type="text/javascript">
jQuery(document).ready(
function() {
alert('Hello!');
jQuery("#<%=TxtSampleId.ClientID %>").focus();
}
);
</script>
=== code without error ===
<asp:PlaceHolder id="dontCare" runat="server">
<script type="text/javascript">
jQuery(document).ready(
function() {
alert('Hello!');
jQuery("#<%=TxtSampleId.ClientID %>").focus();
}
);
</script>
</asp:PlaceHolder>
The "The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)." error can be very annoying to say the least. It's a bug that Microsoft refuses to fix because there are workarounds. It happens when you try to dynamically load controls from the code behind, but your page source conflicts. Could be a few things going on...
Note: Stack Overflow doesn't handle syntax of code examples well, so I'll reference each answer with a letter, and in a later post, I'll attempt to type out an example. But I don't want to clutter this post because I want to get my points across.
A.) you have a <% Response.Write("something") %> in your page source. Or a <% CodeBehindMethod() %>. Remove it and be creative to populate it a different way!! One way is to place an ASP.NET Panel control (like a Panel ==> turns into a div tag when it renders to HTML) onto your page and dynamically populate the inner HTML attribute of that control. There are other ways of dealing with this.
B.) you are trying to use jQuery inside of an inline script block within your control, you will also get this. Surround the inline javascript code block with an ASP.NET PlaceHolder tag. It's that simple. If you don't, some jQuery functionality will work, but not all of it!
C.) If you are using Script Manager without a Masterpage, I'd suggest you start using a Masterpage to avoid issues later. Then use an ASP.NET ContentPlaceHolder for your head and your body tags to make customizing pages easier. When you reference your javascript files within your masterpage, and you're using Script Manager, make sure to put a Scripts tag inside your ScriptManager tag. Then inside the Scripts tag, place a ScriptReference tag with a Path of the full path of your Javascript files in there. Make sure to put a tilda and forward slash "~/" in the beginning of your path from the root of your web app. Many will put their ScriptManager tag in their control. Don't do this. Put it in your masterpage! It makes life easier.
D.) If A, B or C didn't answer your question, then I'd suggest stripping away every piece of your page and all controls in it, and add each one at a time. If you have a huge hierarchy of page and control inheritance (if your application doesn't have a Masterpage), good luck! You'll eventually figure out what caused it.
* Example for Answer C *
=== code without error ===
Masterpage code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><meta http-equiv="X-UA-Compatible" content="IE=7" />
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Stack Overflow Example</title>
<link rel="stylesheet" type="text/css" href="/style/jquery-ui-1.8.10.custom.css">
<asp:ContentPlaceHolder id="head" runat="server">
<asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" method="post" runat="server">
<asp:ScriptManager ID="anything" runat="server">
<Scripts>
<asp:ScriptReference Path="~/scripts/md5.js" />
<asp:ScriptReference Path="~/scripts/jquery-1.4.4.min.js" />
<asp:ScriptReference Path="~/scripts/jquery-ui-1.8.10.custom.min.js" />
<asp:ScriptReference Path="~/custom_crap.js" />
</Scripts>
</asp:ScriptManager>
<asp:ContentPlaceHolder id="body" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
====================================================
Page source:
<asp:Content runat="server" ID="headcontent" ContentPlaceHolderID="head">
.. place your page specific header files here (js, css, etc..)
</asp:Content>
<asp:Content runat="server" ID="bodycontent" ContentPlaceHolderID="body">
.. place your page specific body HTML or ASP.NET code here
</asp:Content>
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 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.
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.
I have a page which has a masterpage. Do I put script and link tags inside the asp:content place holders or outside or does it matter.
When I put it outside, I get the following warning:
Only Content controls are allowed directly in a content page that contains Content controls.
I can see five (or 8) ways of doing it:
In the codebehind (.cs or .vb) using:
Scriptmanager.RegisterClientScriptinclude - using an absolute/relative path
Scriptmanager.RegisterClientScriptInclude - using an embedded resource
Scriptmanager.RegisterSlientScriptBlock - with your source inside
Adding it inline to your ASPX page in the designer
Sticking it inside the asp:content where the content lives inside the body tag.
Sticking it inside the asp:content where the content lives inside the head (You've said this isn't an option, so ignore this).
Adding it programmatically using the ScriptManager inside a control you use on the page as above.
"Only Content controls are allowed directly in a content page that contains Content controls" - did you forget the runat="server"?
If it's scripts and links for all pages, it should go outside any ContentPlaceHolders. If it's scripts and links for this page, it should go inside a Content inside the head. If it's default scripts, put it inside a head ContentPlaceHolder, and it can be replaced by the child page if needed. (VS usually complains about a ContentPlaceHolder in the head, but it works fine for me).
// master Page
<head runat="server">
<asp:ContentPlaceHolder id="head" runat="server">
<!-- Default scripts and CSS -->
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="jquery.js"></script>
</asp:ContentPlaceHolder>
<!-- Mandatory scripts and css -->
<link rel="stylesheet" type="text/css" href="all.css" />
<script type="text/javascript" src="all.js"></script>
</head>
<body>
Master Page!
<asp:ContentPlaceHolder id="body" runat="server" />
</body>
// Child (no JQuery)
<asp:Content ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" type="text/css" href="default.css" />
<!-- Don't need JQuery -->
<script type="text/javascript" src="prototype.js"></script>
</asp:Content>
<asp:Content ContentPlaceHolderID="body" runat="server">
Child Page!
</asp:Content>
// Child 2 (with JQuery)
<asp:Content ContentPlaceHolderID="body" runat="server">
Child Page!
</asp:Content>
If you are referring to <asp:Content /> tags, you can't put anything outside of them in an .aspx page. So you're limited to putting them inside the <asp:Content /> tag. If you want <script /> and <link /> tags you need to either put a <asp:ContentPlaceHolder /> in the <head> of your master page, or add them dynamically via the Page's Controls collection.
Outside. Tthe inside of the ContentPlaceholders is going to be replaced with content from your pages anyhow so it doesn't make much sense to put anything in there.
outside. in the master page
The place holders are the wrapping controls for pages which descend from master pages.
Use asp.net scriptreference tag in master page to add reference to javascript file and you will be able to access all you need in the javascript file as if you would have added to the local page.