Hey all i am trying to use javascript with my jsp file as under:
JSP File:
<?xml version="1.0" encoding="UTF-8" ?>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>title goes here</title>
<link rel="icon" href="scripts/assets/favicon.ico" type="image/x-icon"/>
<%--
Ajax code to refresh the main page's contents.
This ajax code is specific to the home page not
for all so it is kept outside the main script file.
--%>
<script type="text/javascript" src="scripts/AjaxRefresh.js"></script>
<script type="text/javascript" src="scripts/MainScript.js"></script>
<link rel="stylesheet" type="text/css" href="scripts/MainStyle.css" />
</head>
<body>
<div class="mainContainer">
<div class="header">
header
</div>
<div class="leftNavigation">
Home
<br/>
Home
<br/>
Home
<br/>
Home
<br/>
Home
<br/>
Home
<br/>
Home
<br/>
Home
</div>
<div class="mainContentArea">
Main Content Area
</div>
<div class="rightTabBar">
Right Tab Bar
</div>
<div class="footer">
Footer
</div>
</div>
</body>
</html>
and the MainScript.js file is as under:
window.onload = initAll();
function initAll(){
var navigationButton = document.getElementsByTagName("a");
for ( var int = 0; int < navigationButton.length; int++) {
if(navigationButton[int].className == "navigationButton")
navigationButton[int].onclick = animateLink;
}
}
function animateLink(){
this.className = "navigationButtonActive";
return false;
}
but when i tried to execute this code i found that javascript code is not working properly and with firebug i found the variable navigationBUtton is an empty array.
Actually i am from PHP background so don't know precisely the concepts of jsp so what sort of problem here is??
PS: I am using eclipse 3.5 with apache tomcat6 as web server in ubuntu 10.10 platform.
thanks :)
You're assigning the outcome of the function to the window.onload instead of letting it point to a function name.
Replace
window.onload = initAll();
by
window.onload = initAll;
or just do
window.onload = function() {
var navigationButton = document.getElementsByTagName("a");
for ( var int = 0; int < navigationButton.length; int++) {
if(navigationButton[int].className == "navigationButton")
navigationButton[int].onclick = animateLink;
}
}
See also:
window.onload documentation in MDC
Note that this problem is unrelated to JSP.
Related
I am trying to change my html title depending on the partial that I load for the body.
Parent html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
{{title}}
</title>
</head>
<body>
{{>body}}
</body>
</html>
Partial body.hbs file:
<h1 id="brick-mason">Brick Mason</h1>
<h3 id="what-is-a-brick-mason-">What is a brick mason?</h3>
<p>Brick masons use various stones, concrete and bricks to build walls, walkways, fences, and other structures.</p>
What can I change so that my partial can determine what the title on my main html page displays?
you can do it easily with JavaScript,
just add in the body.hbs :
<script> document.title = 'the title here ' </script>
What I ended up doing was including a second partial in the handlebars file and then splitting them out in the grunt file config.
gruntfile.js
file_context: function(src) {
var fileName = path.basename(src).split(".")[0];
var obj = glob.route[fileName];
var fileString = fs.readFileSync("./" + src, "utf8").split("<split />");
return {
partials: {
header: fileString[0] || "",
body: fileString[1] || "",
},
src: 'src/base.hbs',
dest: path.join('static', obj, 'index.html')
};
}
base.hbs
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/index.min.css" />
{{>header}}
</head>
<body>
<div id="nav_background"></div>
<div id="main">
<div id="nav_bar">
<div class="nav left_nav">
BlueCollarJobs101
</div>
<div class="nav right_nav">
States
Jobs
Contact Us
</div>
</div>
<div class="markdown-body">
{{>body}}
</div>
</div>
</body>
</html>
In your Partial.hbs body add the script to manipulate the tags
<h1 id="brick-mason">Brick Mason</h1>
<h3 id="what-is-a-brick-mason-">What is a brick mason?</h3>
<p>Brick masons use various stones, concrete and bricks to build walls, walkways, fences, and other structures.</p>
<script>
const title = document.querySelector('title');
title.innerHTML = 'Partial';
</script>
I am using scribd to display pdf. By clicking on the Page 3,Middle,End links the corresponding pages should load. But the pages are not loading properly. And in FF i am not getting any errors. But in chrome console i am getting this error. Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://www.scribd.com') does not match the recipient window's origin ('https://www.scribd.com'). Can anyone help me out in this?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Scribd Javascript API Demo</title>
<script type="text/javascript" src='https://www.scribd.com/javascripts/scribd_api.js'></script>
</head>
<body>
<div id="container">
<div id='col1'>
<div id='embedded_doc'><a href='https://www.scribd.com'>Scribd</a></div>
</div>
<div id='col2'>
<h2 id="header"> Loading Document... </h2><br/>
<span id="author"></span>
<div id="bookmarks">
<h4>Bookmarks</h4>
<ul>
<li>Page 3</li>
<li>Middle</li>
<li>End</li>
</ul>
</div>
<div id="comment"></div>
</div>
<div class="clearfix"> </div>
</div>
<script type="text/javascript">
// Data
// Instantiate iPaper
var scribd_doc = scribd.Document.getDoc(2520449, 'key-1127428tb3rbejns9bhr');
// Parameters
scribd_doc.addParam('height', 420);
scribd_doc.addParam('width', 530);
scribd_doc.addParam('auto_size', true);
scribd_doc.addParam('mode', 'slideshow');
scribd_doc.addParam('jsapi_version', 2);
// Write the instance
scribd_doc.write('embedded_doc');
// Bookmark Helpers
var goToPage = function(page) { alert(scribd_doc.api.getPageCount());
if (scribd_doc.api){
scribd_doc.api.setPage(3);
}
}
var goToMiddle = function() {
if (scribd_doc.api){
goToPage( Math.floor(scribd_doc.api.getPageCount()/2) );
}
}
var goToEnd = function() {
if (scribd_doc.api) {
goToPage(scribd_doc.api.getPageCount());
}
}
</script>
View Source and you'll see that this is all dynamically generated using the Scribd Javascript API.
</body>
</html>
I fixed this issue by downloaded the scribd_api.js file and modified the path to https in js. And now the set page is working without any errors.
How do I get a variable in an iframe from the parent if I do not know how many iframes are on the parent page and the order of the one in question. For instance, I know the iframe in question is the second one, so I can select windows.frames[1]. But if I didn't know know it was the second one, how would I select it by ID.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#getValues').click(function(){
//This works, but I don't want to select the iframe by the number since I don't know it.
console.log(
window.frames[1],
window.frames[1].window,
window.frames[1].window.getMe
);
console.log(
window.frames['myIFrame'],
window.frames['myIFrame'].document,
window.frames['myIFrame'].window,
document.getElementById('myIFrame'),
document.getElementById('myIFrame').window
);
});
});
</script>
</head>
<body>
<button id="getValues">getValues</button>
<div><iframe src="otherIframe.html"></iframe></div>
<!-- iframe3_get.html only sets global variable getMe to something. -->
<div><iframe id="myIFrame" src="iframe3_get.html"></iframe></div>
</body>
</html>
In the bellow example, getM1 and getMe2 will be equal. This doesn't seem to be a very good answer, but it is the only one I have. If it is a bad answer and you elect to vote it down, please provide a better answer.
$('#getValues').click(function(){
var getMe1=window.frames[1].window.getMe;
for (var i = window.frames.length - 1; i >= 0; i--) {
if(window.frames[i].frameElement.id=='myIFrame'){
var getMe2=window.frames[i].frameElement.getMe;
break;
}
}
});
Why does my code not work? Shouldn't it print 222 to the element with ID p2?
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%#page import="java.io.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function compareData()
{
document.getElementById('p1').innerHTML = "111";
var inputs = document.getElemementsByTagName("input");
// why can't I display the "222" here??
document.getElementById('p2').innerHTML = "222";
}
</script>
</head>
<body>
<p id="p1"> a </p>
<p id="p2"> b </p>
<input type="button" onclick="compareData()" value="hello"/>
</body>
</html>
You have mis-spelled getElemementsByTagName. This results in a js error, thereby your code stops execution at that line.
Correct it as getElementsByTagName. Then your code would work fine.
Why you are using this? var inputs = document.getElemementsByTagName("input");
My fiddle
And you can use the way you are using like this : My fiddle but it was not working because Elements spelling is wrong document.getElemementsByTagName
It should be document.getElementsByTagName
You have a typo on this line:
var inputs = document.getElemementsByTagName("input");
What you want is probably this:
var inputs = document.getElementsByTagName("input");
It could be that the typo stops the execution of the script, and therefor the line after is never run.
Remove following line and it will work...
var inputs = document.getElemementsByTagName("input");
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Goodies</title>
<link rel="stylesheet" href="core.css" type="text/css"/>
<meta name="generator" content="DocBook XSL Stylesheets V1.74.0"/>
<script type="text/javascript"> function changestyledisplayblock(id){ var ps = document.getElementsByTagName('p'); for (var i=0; i < ps.length; i++) { if (ps[i].id == id) { if ( ps[i].style.display == 'none' ) {ps[i].style.display = 'block';} else {ps[i].style.display = 'none';} } } } </script>
</head>
<body>
<div class="sect1" title="The Goodies">
<div class="sect2" title="Multimedia">
<div class="titlepage">
<div>
<div>
<h2 class="title">
<a id="multimedia">Multimedia</a>
</h2>
</div>
</div>
</div>
<p class="bubble speech" id="bubble-speech-0 " style="display:none;">*0 : My first one !</p>
<p class="bubble speech" id="bubble-speech-0 " style="display:none;">*0 : My second one !</p>
<p>text <a class="marker" href="javascript:changestyledisplayblock('bubble-speech-0 ')">*0 </a>next</p>
</div>
</div>
</body>
</html>
here my html, i have the error ReferenceError: Can't find variable changestyledisplayblock, i'm not seeing any error, please help ! if i change my html extension to xhtml i dont see the problem any more ??? any explanation ?
That '<' should be a less than sign. Or was that an error in pasting the code?
Also, I'd advise against calling javascript code in anchor tags.