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.
Related
In a company website, I have a page embedding JavaScript in such fashion:
<html>
<head>
<link rel="stylesheet" href="...">
<link rel="stylesheet" href="...">
<script src="..."></script>
<script src="..."></script>
<script>
...
</script>
<script>
/*
* My block
*/
</script>
<script>
...
</script>
<script src="..."></script>
</head>
<body>...</body>
</html>
The page is semi-managed by other teams in the company. The <script>'s before My block are hardcoded to load some of the prerequisite company-wide scripts. One of those scripts is jQuery. I can't change any of them because they are managed by another team. Due to some reasons, those scripts fail to load randomly sometimes. (Response codes can be 400, 404, 500, etc)
The scripts below My block have dependencies on the scripts above My block. So if the scripts on the top fail to load, the scripts at the bottom will throw out a lot of errors.
Inside My block, I am hoping to add a check to see if those scripts are loaded and running. (May be to check against jQuery?) If they are not loaded, I want to terminate all the loading/running of the scripts after My block, so the page will display a user-friendly message and doesn't throw a bunch of errors.
I wonder if this is possible?
I have some script in javascript file call myjavascript.js and I want to get the content of asp:Label on my page. inside the head of my page i have linked the javascript file to the page. but am not able to reference the asp:Label om my page in myjavascript.js file. please help
below is my code
//on my HTML page
<head>
<script type="text/javascript" src="myjavascript.js"></script>
</head>
//in the myjavascript.js file
var totalamounttopay = document.getElementById('<%=Me.lblfinalgrosstotal.ClientID%>').innerText;
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 create a external script call script.js save in js folder. However i don't know why it is not working. Therefore, I have tried put the into the html file and it work fine. So I think it is the problem of missing something in or i don't know.
It is my html code
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button class="button">show</button>
<p>yo</p>
</body>
JQuery
$(".button").click(function(){
$("p").toggle();
});
Ensure jquery is loaded first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
I'd also move this to just before the closing </body> tag in your HTML.
And then check where the JS folder is relative to the HTML file you've written. Currently, the folder would need to be at the same level in the directory structure as the HTML file.
Inside your script, use window.onload. The script might be firing before the DOM has actually finished loading.
You might also want to put jQuery on top so that it finishes loading before any possible jQuery code in your script fires.
Try loading JS in the footer.
You need the elements to be present in DOM before you can select them.
Moreover including external js files at the bottom of your page, gives priority of your HTTP requests to the visual display that will be presented to the client instead of to the logic of interaction or dynamics;
this is the usual behavior you'd want.
If you are using jquery in your JavaScript code please put them in this order
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
If that is not the case can you post the error in the console (using chrome press f12 to see the errors in the console)
Other thing you can check, the js folder is in same directory where your html page is?
let us know