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>
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 have a site where I am trying to implement a jQuery UI based MessageBox in my master page. Content pages are arranged accoring to business area folders, i.e. '~/Branding/Contracts.aspx'. I find that when I load such a content page, jQuery, which is referenced in the master page as below, does not load. I assume that this is because the browser is requesting 'Branding/Scripts/jQuery '. What can I do about this? I don't have the 'root' operator in a plain 'script' tag.
<script src="/Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
Use this in your MasterPage
<script src="<%= ResolveUrl("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>
Please let me know if you are facing any trouble further.
One option is to "Outsource" your call to jQuery to something like Googles AJAX libraries. This will give you the added advantage of your clients possibly alreading having a cached version of jQuery.
I use http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js
This wont help you if you have other custom scripts of course. For that I use the following on the page load event of the master page to load up my common sciprts.
HtmlGenericControl myJs = new HtmlGenericControl();
myJs.TagName = "script"; myJs.Attributes.Add("type", "text/javascript");
myJs.Attributes.Add("language", "javascript"); //don't need it usually but for cross browser.
myJs.Attributes.Add("src", ResolveUrl("~/scripts/jquery-ui-1.7.2.custom.min.js"));
this.Page.Header.Controls.Add(myJs);
Normally set up as a function with a paremter for the script path to make loading up multible js files easier.
Ode To Code has a fantatic article on Master Pages and this sort of thing:
http://odetocode.com/Articles/450.aspx
I know this is old, but someone may come across it like I have. Anyways, you can register these scripts using the ASP ScriptManager object.
<asp:ScriptManager ID="ScriptManager" runat="server">
<Scripts>
<asp:ScriptReference Path="Scripts/jquery-1.8.3.js" />
<asp:ScriptReference Path="Scripts/bootstrap.js" />
<asp:ScriptReference Path="Scripts/general.js" />
</Scripts>
</asp:ScriptManager>
This will keep let your scripts loading without using a Page.ResolveUrl. Just a preference I guess.
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 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.