I have an error trying to use $(document).ready() as in the above image.
What should i try to solve this problem ?
Edit 23/05/2011 10:54
I have got a clue.
The page i am working inherit from masterpage
In master page this code isn't work, maybe problem of different path
<head id="Head1" runat="server">
<title>Back Office</title>
<link href="~/Styles/MasterPage.css" rel="stylesheet" type="text/css" />
<link href="Styles/custom-theme/jquery-ui-1.8.12.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.5.1.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
This code don't seems to work
On the body of master page, there is a script manager and jquery is there,
This make the jQuery works, is because we use scriptmanager in the body so that the document.ready is not work ?
<asp:ScriptManager ID="ScriptManager1" runat="server" OnAsyncPostBackError="ScriptManager1_AsyncPostBackError">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.5.1.min.js" />
</Scripts>
</asp:ScriptManager>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
I have found the problems.
The problem is the jquery code is on the masterpage, in the script manager, and script manager is in inside the body tag.
the document.ready is on the header tag on page that inherit on master page, so before the code to excuting to the body, the jquery is not included yet and that wat it is error.
The easiest way to solve this is, i have to move javascript code in the bottom of body tag.
The proper way to solve, which i still can't find is to put the javascript include code in the header. but i don't find a way that work yet. My master page and inherit page is on the differnt path. I have find a lot of technique such as but none of them work.
Take out all of the other javascript includes except for jquery-1.5.1.min.js. Try it with just that one include. If that works, add the other includes back in one at a time until you get the error. If it doesn't work with just the jQuery script included, chances are it's not pointing at the correct path.
Short answer though, yes, you can use jQuery and document.ready in an ASP.NET page.
Surely you can. Seems, however that jQuery object is not available at the moment of script execution. Verify that jquery library file is indeed loaded via script directive. Or maybe there are some other nuances behind this.
Related
I'm working on updating an aspx project to asp net MVC. As the work is in progress, half of the pages are still in apsx. For my aspx pages, I need to have jquery-1-x-x loaded, and for my asp net pages, jquery-3-x-x (I use some jquery-3 functionalities on my mvc pages, but using this version on my aspx pages provokes error I didn't manage to deal with).
To do so, I have jquery-1 loaded in my Portail_MasterPage
<asp:ScriptReference Path="~/Scripts/jquery-1.10.2.js" />
To add jquery-3 in my asp net pages, I used bundles. I have this in my BundleConfig.cs :
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-3.5.1.js"));
And then I use a layout file which has this line :
#Scripts.Render("~/bundles/jquery")
and which is called in each html file (asp net pages) :
#{
ViewBag.Title = "SaisieConges";
Layout = "~/Areas/MVC/Views/Shared/_Layout.cshtml";}
With this, I have jquery-1-x-x loaded in my aspx pages, and jquery-1-x-x + jquery-3-x-x loaded in my asp net pages. But I recently found out that having both jquery versions loaded in the same page provokes issues.
So, what I want to know is if there is a way to load only one specific jquery version depending on if I am on aspx page or not.
Thank you for your time, and sorry for my english !
I found a way to do what I wanted, keeping a global master page for he whole project (aspx + aspnet), but I had to modify every of my aspx files (it doesn't matter as I plan to delete them once updated).
I have put my Script reference inside a ContentPlaceHolder like this :
<asp:ContentPlaceHolder id="ScriptManager" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager0" runat="server" EnableScriptGlobalization="true" EnablePartialRendering="true" CombineScripts="false" ScriptMode="Release">
<Scripts>
...
<asp:ScriptReference Path="~/Scripts/jquery-3.5.1.js" />
...
</Scripts>
</asp:ToolkitScriptManager>
</asp:ContentPlaceHolder>
Thanks to this, every files has jquery-3-5-1 by default. To override this version (instead of adding a second version), you can modify the original ContentPlaceHolder in the aspx pages you want like this :
<asp:Content ID="Content3" ContentPlaceHolderID="ScriptManager" Runat="Server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager0" runat="server" EnableScriptGlobalization="true" EnablePartialRendering="true" CombineScripts="false" ScriptMode="Release">
<Scripts>
...
<asp:ScriptReference Path="~/Scripts/jquery-1.10.2.js" />
...
</Scripts>
</asp:ToolkitScriptManager>
</asp:Content>
With this, I'm able to load only the desired jquery version.
Let me re-explain the whole question.
I want to add this in my website http://www.w3schools.com/howto/howto_js_slideshow.asp
So for this, i have to make a external java file (internal may work, but i want external).
So when i paste the java code in my html file in body tag, the script works fine. So that means, nothing wrong with the script. But when i put the same thing in a different external file, the script is not working.
So the problem must be in the head tag, where i write the external file location. This is my head tag
<head>
<title>FFH</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="images/ffh.ico" />`
<script type="text/javascript" src="myscript.js"></script>
Yes, the "myscript.js" is in the same folder and i am 100% sure about it.
put your html file and javascript file under the same folder.
Following can be a reason for your issue
Invalid src path in the script tag
Javascript might be disabled in your browser.
You have a script error/exception that stopped entire page's script execution.
Maybe you have an Ajax request that won't work if your open it as a local file protocol. e.g., file://
What can you do?
It is right time for you to know about and use your developer tools available in your favorite browser.
See if it shows 404 or some other error. Then update your SO question with the exact error message that you see. We would be happy to help.
Revised answer based on provided w3c link:
Now we know the exact problem.
You can not add that script tag to the head of the HTML. Because the elements that you refer in the script are not available at that time of execution. Move the script tag just before the end of body tag (all your carousal tags/elements should be present before the script tag) . Then It would work as expected.
If you still want that script tag to be in the head section, then you have to initialize your carousal/slider in DOM ready event or window.Onload event.
Still my earlier comment is relevant, because you can use developer tools in your browser to find out the exact error statement.
As stated in other answers, script-tag may not work if it is located in <head> tag. Try adding it right before </body>.
+don't call it java, they have nothing else in common except name :)
I'm experiencing a very peculiar issue with ASP.NET.
I have a small website. I've written a simple MasterPage that is used across most of the site's pages.
I want to include Bootstrap and jQuery's CSS and Javascript files. When I link then in my master page with URI pointing at remote location (see below), everything works fine:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
For couple of reasons I want these JS and CSS files to be available locally, so I downloaded the relevant files to the server. But when I try to include these local files in the master page, they fail to load.
I tried:
Using absolute paths (i.e. ~/res/css/...)
Using <%= ResolveUrl("...") %>
Using <ScriptManager> - identical effect
When trying to include these files in the same way in the head contentPlaceHolder in the content pages, the effect is the same.
Example of non-working code:
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="~/App_LocalResources/css/bootstrap.min.css"/>
<script src="~/App_LocalResources/js/jquery.min.js"></script>
<script src="~/App_LocalResources/js/bootstrap.min.js"></script>
</asp:ContentPlaceHolder>
The result is the same whether I use the ContentPlaceHolder or not.
If you could assist me in resolving this issue, I'd be genuinely awesome - thanks in advance.
I was able to detect and resolve the cause of this issue failry quickly after reading through some very helpful comments - so kudos for the users who posted them.
The issue was being caused by 404s (when trying to acces the js and css files). The 404s happened due to:
The URLs were not correct - although I used the ~ (home) character it somehow was converted to a path relative to the page.
Example of such 404 as seen in Firefox/Firebug Console (make sure that "Logging" is on:
I was able to resolve this issue by using ResolveUrl.
Example:
<script src="<%= ResolveUrl("~/App_LocalResources/js/bootstrap.min.js") %>"></script>
After resolving this first issue, the 404s persisted.
I tried to access the files directly through the browser, and I got a IIS 404.8 error - meaning that the server was blocking access to the App_LocalResources folder. This is the default behaviour of IIS server on some predefined folder names (including App_LocalResources, bin, App_Data, etc.).
So, I moved the css and js files to a folder named res and that did the trick.
Eventually, the <head> section in the master page looks like this:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="Stylesheets" runat="server">
<link rel="stylesheet" href="<%= ResolveUrl("~/res/css/bootstrap.min.css") %>" />
<script src="<%= ResolveUrl("~/res/js/jquery.min.js") %>"></script>
<script src="<%= ResolveUrl("~/res/js/bootstrap.min.js") %>"></script>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
I've turned Stack Overflow up and down, but, unfortunately, none of the answers helped me.
I have a web app that works perfectly on my local PC using IIS provided by the Visual Studio, but when I deploy this app to the server only the CSS is displayed properly.
Folder structure for files is as follows:
Root (this folder is named Knowledge Management on the server)
CSS
JS
Media
Uploads
Documents
Images
Users
My code, at least for Master page head section looks like this:
<head runat="server">
<link href="CSS/Style.css" rel="stylesheet" />
<script src="/JS/jQuery203Min.js"></script>
<script src="/JS/jQueryUI1103Min.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
However, browser generates it like this:
<head>
<link href="../../CSS/Style.css" rel="stylesheet" />
<script src="JS/jQuery203Min.js"></script>
<script src="JS/jQueryUI1103Min.js"></script>
<script src="/JS/HomeArticles.js"></script>
</head>
The problem is that besides CSS neither none of the files in JS folder and none of the files in Media or Uploads folders and subfolder doesn't generate properly.
The thing is if I add "slash" in front of the image src attribute the image gets location http://localhost/Media/Discussion.png and if I don't add "slash" then the image location is http://localhost/Uploads/Users/HrvojeFadiga.jpg when it should be http://localhost/Knowledge%20Management/Uploads/Users/HrvojeFadiga.jpg
Here is a sample of code with images:
<div class="profileInfoWrapper">
<img src="/Uploads/Users/<%=article.User.PhotoLocation %>" />
<span class="postInfo">
<img src="/Media/Rating.png" /><%= GetArticleRating(article.idArticle) %>
</span>
<span class="postInfo">
<img src="/Media/Visitors.png" /><%= GetArticleViews(article.idArticle) %>
</span>
<span class="postInfo">
<img src="/Media/Comments.png" /><%= GetArticleComments(article.idArticle) %>
</span>
</div>
FYI, Global.asax doesn't contain any rules for ignoring file routes except for .axd files which is added by default.
I was able to sort this by adding runat=server attribute and using the tilt(~) before defining the source of the file. For example:
<link href="~/CSS/Style.css" rel="stylesheet" runat="server" />
Same applies to javascript files.
For any URLs for scripts and styles you need to call ResolveUrl like this:
<link href="<%= ResolveUrl("~/CSS/Style.css") %>" rel="stylesheet" />
Try this. without "~" it can also work but you can add it just to refer the root directory which is always your project solution. So by using Tilde "~" you can properly specify where your css and js files are located.
<link href="~/CSS/styles.css" type="text/css" rel="stylesheet"/>
<script src="~/JS/jScript.js" type="text/javascript"/>
Similarly for your images that you have stored in upload folders. You can access it by using
<img src="~/Uploads/Images/youImage.gif" />
Just try like below and its worked for me...
<script src="JS/jQuery203Min.js" type="text/javascript"></script>
<script src="JS/jQueryUI1103Min.js" type="text/javascript"></script>
<link href="CSS/Style.css" rel="stylesheet" type="text/css"/>
First of all, thank you all for your replies. After couple of days of playing I've finally figured out what to do to make everything work.
JS problems
I've solved JS problems by adding ScriptManager control to the .aspx page and by adding JS files inside it.
<asp:ScriptManager ID="smScripts" runat="server">
<Scripts>
<asp:ScriptReference Path="JS/jQuery203Min.js"/>
</Scripts>
</asp:ScriptManager>
For some reason CSS files were working "out of the box" so I left them unchanged.
Image problems
I've managed to sort images problems out by avoiding hardcoded links to the images and by adding <%: Page.ResolveUrl("~/Media/Image.png") %> to the src attribute of the <img> tag. I guess I should've done this for everything that I don't want to route. This can be done for CSS files, JS files, everything. However, (even though this should work perfectly) I've experienced some strange problems with JS files and that's the reason for using ScriptManager.
Page links problem
At first I didn't realize that none of my links was working so I figured that the problem were semi-hardcoded links that, for some reason, don't route properly even though I hardcoded route the same way as defined in Global.asax file. I'm still not sure why this isn't working.
The solution for this is to generate links by using <%: Page.GetRouteUrl("RouteName", new { routeParameter1 = routeParameter1Value, routeParameter2 = routeParameter2Value}) %> and everyhting will work fine.
The directories/virtual-directory setup is the likely culprit.
View your page in Google Chrome then "Inspect Element". Scroll to the top and you include your .JS files. You can click on them to see what URL they are trying to link to. More than likely the path is slightly different on the server than your local copy.
I have the following jquery in my ASP.NET regular pages
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Color Items</title>
<script src="http://code.jquery.com/jquery-latest.js"
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("select option:even").addClass('evenColor');
});
</script>
<style type="text/css">
.evenColor
{
background-color:Gray;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Text="Gori"></asp:ListItem>
<asp:ListItem Text="Muf"></asp:ListItem>
<asp:ListItem Text="Lizo"></asp:ListItem>
</asp:DropDownList>
</div>
</form>
</body>
</html>
Now i want to convert this into a Master Pages. I am unable to figure out what will be added to the master page and what to the content page. Will the scripts go to MasterPage?
Please Note: I have many such regular asp.net pages with individual jquery files. Will I have to add all these jquery files into one master page.
What is the correct way?
Definitely add the reference to the common jquery files in your master page.
I would leave page specific javascript to that page, though others (especially if performance is of great importance) would argue to compile this as much as possible into one file, with just the specific commands on the page.
Put a reference to the jQuery script file in your Master Page (you may decide to do this using a ScriptManager control if using any of MS AJAX library too).
Put a reference to any page specific JavaScript file in that page only
Refactor any page specific JavaScript code that repeats over multiple pages into one file that is referenced by the pages.
In addition to the suggestion to add the jQuery links in a master page, I'd suggest using nested master pages so that the base master page has markup, and the derived master includes the jQuery. That way you can choose to use the jQuery enabled master, or the non-jQuery (base) master page on a page-by-page basis for optimal performance.