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
Related
Hi I have included an html page into an adf jsff page using the tag <jsp:include>
<f:facet name="parenContent">
<jsp:include page="www/included.html"></jsp:include>
</f:facet>
The page is rendered successfully, but the javascripts inside the included page is executed only on the refresh of the whole page (by manually refreshing).
included.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="grapheditor.css">
</head>
<body class="geEditor">
<script>console.log('loading page');</script>
<h1>Hello</h1>
<script>console.log("check");</script>
</body>
</html>
When refreshed the page the script tag is executed. The same is the case with javascript included using
<script type="text/javascript" src="javascript.js"></script>
I have tried placing the script tag in both <head> and <body>
I need to execute the js when the first time the page is loaded without a refresh. How is it possible?
Update
I tried giving a non existing path to the src in <script>
<script type="text/javascript" src="thisFileDoesNotExists.js"></script>
On the first load it is not even trying to load this file. On page refresh it is giving 404 error for this file.
You can call a javascript method on startup.
<af:document>
<af:clientListener method=ânameOfTheJavascriptMethod" type="load"/>
<af:resource type="javascript" source="/customJsCode.js"/> ...
</af:document>
But I am not sure how can you prevent that from re-executing when user refreshes the browser.
I uploaded a file (.htm) to my sharepoint library. When I click the file, it brings me to a page and runs the script, however the sharepoint javascript does not work. When i type _spPageContextInfo.userId; into the console, it errors not defined.
When i try typing _spPageContextInfo.userId; into the console of the previous window, the sharepoint library, it returns my user id.
Any thoughts on how to get the sharepoint javascript to still run in the uploaded file? I am running sharepoint 2010
When I open up chromes dev tools, I do not see the _layout folder with .js files in it (I see them when I am at the main sharepoint library page). Perhaps there is a way to link to those? I do not know a lot about webpages, sorry.
EDIT:
I've included
<meta name="WebPartPageExpansion" content="full" />
<script src="/_layouts/1033/init.js"></script>
<script src="/_layouts/MicrosoftAjax.js"></script>
<script src="/_layouts/sp.core.js"></script>
<script src="/_layouts/cui.js"></script>
<script src="/_layouts/sp.ui.mylinksribbon.js"></script>
<script src="/_layouts/sp.ui.dialog.js"></script>
<script src="/_layouts/sp.ui.policy.ribbon.js"></script>
<script src="/_layouts/sp.ui.rte.js"></script>
<script src="/_layouts/sp.ribbon.js"></script>
<script src="/_layouts/sp.runtime.js"></script>
<script src="/_layouts/sp.js"></script>
Now when I go to the console I can successfully type _spPageLoaded, but _spPagecontextInfo is not an option...
Following is what I have found to be the minimum qualifications for a stand alone page to work with the JavaScript Class libraries and other features.
You can edit the page with Notepad, or any text editor, and upload to a document library.
Just be sure to save as .ASPX
You still won't be able to use a form element. But that can be overcome by using the SP.ClientContext or REST API.
<%# Page language="C#" %>
<%# Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%# Import Namespace="Microsoft.SharePoint" %>
<!DOCTYPE html>
<html lang="en">
<!-- document information -->
<head>
<!-- meta information -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- css: sharepoint -->
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css?rev=3TRomkG1g2gMGz4rekMIQg%3D%3D"/>
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/search.css?rev=T%2Bhraxktc1A8EnaG5gGMHQ%3D%3D"/>
</head>
<!-- document content -->
<body>
<!-- required: SharePoint FormDigest -->
<form runat="server">
<SharePoint:FormDigest runat="server"></SharePoint:FormDigest>
</form>
<!-- required: script sources -->
<!-- script: SharePoint -->
<script src="/_layouts/1033/init.js"></script>
<script src="/_layouts/1033/core.js"></script>
<script src="/_layouts/MicrosoftAjax.js"></script>
<script src="/_layouts/SP.Core.js"></script>
<script src="/_layouts/SP.Runtime.js"></script>
<script src="/_layouts/SP.js"></script>
<script src="/_layouts/SP.UI.Dialog.js"></script>
<script src="/_layouts/ScriptResx.ashx?culture=en%2Dus&name=SP%2ERes"></script>
<!-- script: local -->
<script>
console.log(_spPageContextInfo.userId);
</script>
</body>
</html>
If you want to keep the functionality provided by SharePoint, you'll need to embed your content onto a SharePoint page.
Edit a page in SharePoint
Add a Content Editor web part to a page
Edit the Content Editor web part
In the web part properties pane that appears on the right side, find the "Content Link" text field
Paste in the URL path to your uploaded .htm file (note that it doesn't have to be a .htm or .html file... any valid text file will do)
Save the web part properties and stop editing the page
The Content Editor web part will then display your content within the page. Your file should contain a valid HTML fragment, and can contain script tags.
This is probably super simple answer, but I just can't figure this out.
Basically, I've got a php page only starting with opening <?php tag.
I've got a jquery script that I need to call on this page.
<script type="text/javascript">
$('input[name="_manage_item"]').click(function() {
$('input[name="_item"]')[this.checked ? "show" : "hide"]();
});
</script>
From what I researched, I need to load the script by placing
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
into the <head> tags of the page.
But my page doesn't have the html <head> or <body> tags. Where do I call the script then ?
I tried to place it in front of the opening <?php tag, but that broke the page.
What is the correct way of doing this ?
You can place your javascript outside the php tags at the bottom of you page. But when you use the php in a web page, you should add the html and head and body tags. A simple php page could look like this:
<html>
<head>
<!-- stylesheets and javascript -->
</head>
<body>
<?php
//You php-code
?>
<!-- scripts at the end of the page to let the side load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('input[name="_manage_item"]').click(function() {
$('input[name="_item"]')[this.checked ? "show" : "hide"]();
});
</script>
</body>
</html>
Relying on your wordpress tag, I suggest you to read this article. There are described all details concerning javascript usage within wordpress. Probably the most common way is to use wp_register_script() function.
The safe and recommended method of adding JavaScript to a WordPress generated page, and WordPress Theme or Plugin, is by using wp_enqueue_script().
I would also advise you to merge your code to a distinct file, and load it straight after jquery library. It is a good practice, because in such a way browser can cache your script and would not download it on every page request. You should also wrap it into a $( document ).ready() function, to be sure that it will be executed only only when document is in ready state.
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.
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.