Get content from the parent page - javascript

When you click on print note, I am expecting another window to pop-up with the notes you took. In my case, it keeps showing up blank.
Please let me know if I should provide more details:
Page(1) with the text area
<textarea id="sermon_notes" cols="5" rows="5"></textarea>
<span>Print Notes</span>
Page(2) with javascript trying to pull the information you wrote on page(1) so it can show up on page(2)
<html>
<head>
<title>Media | New Foundation Christian Ministries </title>
<link rel="stylesheet" href="../css/popout.css" media="screen" type="text/css" />
<link rel="stylesheet" href="../css/print.css" media="print" type="text/css" />
</head>
<body class="about">
<div class="wrap">
<div class="header">
<span>Print</span>
<h1><img src="../images/logo.png" alt="New Foundation Christian Ministries" /> </h1>
</div>
<div class="content">
<div class="page_header">
<h2>Notes</h2>
</div>
<h1></h1>
<h1>some text</h1>
<small>ate</small>
<br/><br/><br/>
<h3>My Notes:</h3>
<p>
<script type="text/javascript">
// Get the notes from the parent page
var message_notes = window.opener.document.getElementById('sermon_notes').value;
// Replace out the new line character with a <br>
message_notes = message_notes.replace(new RegExp( "\\n", "g" ),"<br />");
document.write(message_notes);
</script>
</p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>

I got it, my above code work just fine, is the fact my link did not contain the http but rather files. it would not work unless you have http, so it wont work on your local server.
Thank you all for helping.

Related

why can't I execute code from an embedded file in jsp?

Good day to all time of day, there was such a problem:
in index.jsp passing the answer.jsp, here's the code:
index.jsp
<head>
<meta charset="UTF-8">
<title>Lab 2</title>
<link rel="stylesheet" href="css/graphic.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/table.css">
</head>
<body>
<div class="hero">
<jsp:include page="jsps/hero.jsp"/>
</div>
<div class="graphic">
<jsp:include page="jsps/graphic.jsp"/>
</div>
<div class="form-container">
<jsp:include page="jsps/forms.jsp"/>
<button id="checkButton">Проверить</button>
<div id="outputContainer">
<span class="outputStub notification">Результаты отсутствуют</span>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/checkboxHandler.js"></script>
<script src="js/formValidator.js"></script>
<script src="js/graphicValidator.js"></script>
<script src="js/session.js"></script>
<script src="js/table.js"></script>
</body>
answer.jsp
<%# page contentType="text/html;charset=UTF-8"%>
<div class="table">
<div class="table-header">
<div>X</div>
<div>Y</div>
<div>R</div>
<div>Входит ли в ОДЗ?</div>
</div>
<div class="table-content">
<script>
console.log("1111111111")
AddInSession(${x}, ${y}, ${r}, ${result ? "<div style=\"color: green\">Да</div>" :
"<div style=\"color: red\">Нет</div>"})
</script>
<div class="table-row" id="table-row">
</div>
<script>Table()</script>
</div>
</div>
I need to pass values through the context and I did it, and I also need to return an answer.jsp, here is the code for one of the servlets
ServletContext context = getServletContext();
context.setAttribute("x", object.getX());
context.setAttribute("y", object.getY());
context.setAttribute("r", object.getR());
context.setAttribute("result", object.getResult());
getServletContext().getRequestDispatcher("/jsps/answer.jsp").forward(request, response);
The browser sees the js code, but does not execute it. My concern is not so much that my methods are not being executed, but that console.log is also not producing results.
Can someone explain what I'm doing wrong?
P.S in index.jsp code is being executed

Image not working when clicked

When you click a navigation item at the top of the screen, a blank div pops up with a huge "x" image that when clicked, the x image is suppose to close the blank div and everything else. For "jobs, contact, press, and legal" it doesn't work when clicked but for "support" it works perfectly. I put the code side by side to see errors, copy the support code and paste for others... basically everything imaginable for 1-2hours. I found a glitch that when you open the "support" first then close it out and open another one, the x image works but I don't know why. Here is my html and the rest of the code will be uploaded to codeine
demo:
http://codepen.io/anon/pen/dvzgrY
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="magicstyle.css">
<body>
<!-- Section for Jobs Popup -->
<div id="job-popup">
<div class="x-div1"><img class="x-icon1" id="fadeX1" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="job-content">
<h1 id="jobWords"></h1>
</div>
</div>
<!-- Section for Contact Popup -->
<div id="contact-popup">
<div class="x-div2"><img class="x-icon2" id="fadeX2" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="contact-content">
<h1 id="contactWords"></h1>
</div>
</div>
<!-- Section for Press Popu -->
<div id="press-popup">
<div class="x-div3"><img class="x-icon3" id="fadeX3" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="press-content">
<h1 id="pressWords"></h1>
</div>
</div>
<div id="legal-popup">
<div class="x-div4"><img class="x-icon4" id="fadeX4" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="legal-content">
<h1 id="legalWords"></h1>
</div>
</div>
<div id="support-popup">
<div class="x-div5"><img class="x-icon5" id="fadeX5" src="Pictures/web%20x%20icon%20white.png"></div>
<div id="support-content">
<h1 id="supportWords"></h1>
</div>
</div>
<div id="top-bar">
<a class="burger-nav"></a>
<div id="nav-menu">
<span id="job">Jobs</span>
<span id="contact">Contact</span>
<span id="press">Press</span>
<span id="legal">Legal</span>
<span id="support">Support</span>
</div>
</div>
<div id="container">
<div id="name-div">
<h1 id="name">Open Touch</h1>
</div>
<ul class="bubbles">
<li id="firstCircle"></li>
<li id="secondCircle"></li>
<li id="thirdCircle"></li>
<li id="fourthCircle"></li>
<li id="fifthCircle"></li>
<li id="sixthCircle"></li>
</ul>
</div>
</body>
</head>
</html>
Any help will be greatly appreciated :D
The problem is that all your popup containers (job-popup, contact-popup, etc) are positioned absolutely at the same location with the same z-index. Since the support-popup is last in your html, it's hiding all the popup containers underneath it. You are never actually clicking on the other x-icons (only on the top support one), and therefore, the click handlers are not getting triggered.
For a quick fix, you could update the z-index, in your nav click handlers. For example:
$("#job").click(function() {
$("#job-popup").fadeIn(300);
$("#job-popup").css({'z-index': 15});
$("#job-content").fadeIn(300);
$("#jobWords").fadeIn(300);
$(".x-icon1").fadeIn(300);
$("#name").fadeOut(300);
$("#container").css("-webkit-filter", "blur(10px)");
}
and then move it back down here
$(".x-icon1").click(function() {
$("#job-popup").fadeOut();
$("#job-popup").css({'z-index': 10});
$("#job-content").fadeOut();
$("#jobWords").fadeOut();
$(".x-icon1").fadeOut();
$("#name").fadeIn();
$("#container").css("-webkit-filter", "blur(0px)");
}
and then replicate this for all your click handlers.
But you should also consider refactoring your html/css, since the structure is incorrect (body within head, for example), and a lot of the css is probably unnecessary.

What is wrong with this nodeValue replacing code?

I am learning basic js operation on DOM, and it works fine with the first part of the code, which completes attributes replacing function.
Then it doesn't work with the second part code, which needs to replace the null value of the childNode.nodeValue of the "p" element.
I checked lots of times in the past 2 hrs, and the whole structure is also the same with the code in the book, but it just won't work.
I also checked the MDN about the node related entries, but also failed to get what is going on here.
gallery.js
function showpics(indexs){
var linky = indexs.getAttribute("href");
var holdy = document.getElementById("holder");
holdy.setAttribute("src",linky);
var texty = indexs.getAttribute("title");
var fun = document.getElementById("funnyWords");
fun.childNodes[0].nodeValue = texty;
}
Below is the HTML file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" http-equiv="IE=Edge,chrome=1">
<title>YTimes</title>
<script type="text/javascript" src="gallery.js"></script>
</head>
<body>
<h1>Our Story</h1>
<section>
<ul>
<li>F</li>
<li>2.0</li>
<li>Riverrun</li>
</ul>
</section>
<section>
<p id="funnyWords"></p>
<span>
<img src="" alt="" id="holder">
</span>
</section>
</body>
</html>
The problem is that #funnyWords has no content:
<p id="funnyWords"></p>
Therefore, fun.childNodes[0] is undefined.
You can create a new text node if necessary:
if(fun.childNodes.length)
fun.childNodes[0].nodeValue = texty;
else
fun.appendChild(document.createTextNode(texty));
Alternatively, new browsers support textContent:
fun.textContent = texty;
<head>
<meta charset="UTF-8" http-equiv="IE=Edge,chrome=1">
<title>YTimes</title>
<script type="text/javascript" src="gallery.js"></script>
</head>
<body>
<h1>Our Story</h1>
<section>
<ul>
<li>F</li>
<li>2.0</li>
<li>Riverrun</li>
</ul>
</section>
<section>
<p id="funnyWords">
<div class="childnode">
</div>
</p>
<span>
<img src="" alt="" id="holder">
</span>
</section>
</body>

How to Create a text file with JavaScript in HTML

I am a real beginner at codding in general. I would like to create a website that people can go onto and choose a character of a play we are doing. I would then like to prompt for their full name so that I can create a file in the folder for that button, that is under their name. In that same prompt I would like to type it "/WINNER/" and have that give me back a random name (file name) from that button's folder. I hope that makes scene, and I know that I might be making this overly complicated bet this is that only way I found of doing this. Also sorry if my code looks a little wonky, like I said I am a complete noob.
My index.html
<head>
<title>Check Please | Enter</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<div id="Welcome">
<div id="WelcomeMessage">
<h5 class="redCenter">Welcome to the voting website of</h5>
<h3 class="Musical">'Check Please the Musical'</h3>
</div>
<div id="Enter-Img">
<a href="choice.html">
<img src="images/site/enter.png" width="438" height="241" class="button">
</a>
</div>
</div>
</body>
Then my choice.html
<head>
<title>Check Please | Voting</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<div id="Top">
<h3 class="Musical">Please click on one of the following characters that you believe to be the murderer, and then enter your full name.</h3>
</div>
<div id="Button 1">
<a href="Button 1/Button1.html">
<img src="images/site/Person 1.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 2">
<a href="Button 2/Button2.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 2.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 3">
<a href="Button 3/Button3.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 3.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 4">
<a href="Button 4/Button4.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 4.png" width="438" height="241" class="enter">
</a>
</div>
</body>
And right now I have only tried to mess around with one button (Button1.html):
<head>
<title>Check Please | Thanks and Enjoy</title>
<link href="../css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<script type="text/javascript">
window.onload(Name = prompt("Enter your first and last name below"))
import java.io.PrintWriter;
if(Name == "/WINNER/") {
window.location.replace("http://stackoverflow.com");
}else{
import java.io.PrintWriter;
PrintWriter writer = new PrintWriter(Name + ".txt", "UTF-8");
writer.close();
};
</script>
<div>
<h3 class="Musical">Button 1</h3>
</div>
<div>
</div>
</body>
Thanks for ANY input!!!!!!!
You appear to be writing Java in a JavaScript context. I'll make one thing very clear: JavaScript is not related to Java. They are completely separate languages, and as such you cannot use Java libraries.
Also, you can't write out to any directories using JavaScript. JavaScript runs in the user's browser, which is separate from the server (you cannot access files within directories on the server)

Countdown script not starting countdown

Can someone please tell me why the countdown function is not working properly (the countdown is not starting in the div with the I.D. "countdown"). Probably something real simple, but Javascript isn't my forte. This is the countdown plugin I am using: http://keith-wood.name/countdown.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/web-style-second.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="chrome://mozbar/skin/css/injected.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="content">
<div class="center">
<center>
<div></div>
</center>
</div>
<script type="text/javascript">
$(function() {
$('#countdown').countdown({
until: '14min+20sec',
format: 'MS',
layout: '{mnn}min ' + '{snn}sec ',
onExpiry: function() {
$(".hidden").css("display", "block");
}
});
});
</script>
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 class="hasCountdown" id="countdown">14min 20sec </h4>
</div>
<form name="signupFrm" id="signupFrm" action="#" method="post" class="hidden">
<div>
<div class="yellow_red">
<h1></h1>
</div>
<div class="center">
<a href="https://www.testing.com" class="btn_buy_now">
Get Started</a>
</div>
<input name="submit" value="submit" type="hidden">
<p class="mb_5"> </p>
</div>
</form>
<div class="fnote justify">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You should put the $(function () ...) script into the <head> tag of your HTML page. This way, the countdown will be initiated once the DOM has fully loaded.
I think that the problem is that you are missing the reference to the "jQuery Countdown CSS". In the usage instructions of the plugin it says:
Download and include the jQuery Countdown CSS and JavaScript in the
head section of your page. #import
"jquery.countdown.css";
But you can still make it work without the "jQuery Countdown CSS" if you remove the class attribute from the <h4> element with the id "countdown", like this:
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 id="countdown">14min 20sec </h4>
</div>
​JSFiddle Example
The countdown plugin uses the class hasCountdown to test whether the countdown has already been instantiated, so you should use a different class name.
From jquery.countdown.js:
/* Class name added to elements to indicate already configured with countdown.*/
markerClassName: 'hasCountdown'

Categories