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.
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.
I have a master page with a reference to javascript file that is js folder.
Both File and masterpage are in the root directory.
Many of my forms are in different folders Like
Root>first>abc.aspx
Root>second>def.aspx
Root>second>anotherFolder>def.aspx
I kept the reference like this
<script type="text/javascript" src="js/Check.js"></script>
I also tried src="<%= Page.ResolveUrl("~/js/Check.js") %>" and src="~/js/Check.js". While using Page.ResolveUrl and Server.ResolveUrl page shows error.
What i need to do so that any form in any directory get the reference of the file.
I dont want to do ../ and ../../ in every form.
<script type="text/javascript" src="/js/Check.js"></script>
you can use "/" --> web site root
If you're running your Visual Studio's internal server for debugging then firstly remove the virtual folder it insists on using.
Do this by selecting the root of your site in VS Solution explorer, then right-click and choose "Properties Window" - in the properties change "Virtual Path" from your "AppName" to /
This virtual path plays havoc with all sorts of paths..I find that if i don't make this change in VS then when I DO get all my paths working they won't work when I put the site on a live server that isn't using a virtual site.
Then set your JS reference to <script type="text/javascript" src="/js/Check.js"></script> - using the root / in your src.
UPDATE
If you really want to keep the virtual folder then you can try this - using ResolveClientUrl():
First, add Runat="Server" to your <head>
<head runat="server" id="myhead">
<script type="text/javascript" src='<%=ResolveClientUrl("~/js/check.js") %>' />
I need to load an external webpage into a div. I don't want to use an iFrame. And I want this done with plain Javascript. I'm not sure how to go about it.
With difficulty…
Use Ajax (e.g. via XMLHttpRequest) to get the page. Since it is external, you will need to bypass the same origin policy.
Once you have the page, extract the relevant parts of it (probably the children of the body element) and add that to your existing DOM.
You'll need to account for differing stylesheets between your site and the external one, for relative URIs (to resources on the external site that aren't on yours), and for any scripts in the remote content.
Whichever method you have, in js, try this instead : $('#myid').load('mylink.com')
I know only this in js.
You don't even need javascript-
but the same restrictions apply as for iframe inclusion of different domains.
<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>test page</title>
</head>
<body>
<div>
<object type="text/html" data="http://validator.w3.org/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
</object></div>
</div>
</body>
</html>
You should be able to load html pages within a page using the jQuery.get() method. I'm using this method for two websites for my clients, where the individual pages are different sections of the site.
I'm unsure of the behavior you may encounter if you attempt to use this method loading full HTML pages that include header information and the body tag. I recommend using it to load HTML snippets.
jQuery.get()
I have javascript code in a web page that needs to get loaded after js code in the master page, but .NET seems to want things the other way around. I have tried using ClientScript.RegisterStartupScript, but the web page code still appears in the output stream before the master page script.
Try content placeholders for this.
In the master page:
<head>
...
<script type="text/javascript">
//master's javascript
</script>
<asp:ContentPlaceHolder ID="JsContent" runat="server" />
...
</head>
in the content web page:
<asp:Content ContentPlaceHolderID="JsContent" runat="server">
<script type="text/javascript">
//page's javascript
//this js block will appear after the master's one
</script>
</asp:Content>
RegisterClientScriptBlock , which inserts a script block at the top of the rendered page.
RegisterStartupScript , which inserts a script block at the end of the rendered page.
http://msdn.microsoft.com/en-us/library/3hc29e2a.aspx#IncludingCustomClientScriptinASP.NETPages
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.