I am using webstorage to save data.When i get the data through form & save it in a variable (in this case 'one') and try to display in the same page , it does that correctly. But when i import the same '.js' file and try to display it in a different page, it doesn't work. How to use webstorage to retrieve the data in a different page ? Also, i don't want to use query string !
First page:
<!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>Untitled Document</title>
<script src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="leftbox">
<section id="leftbox">
<form action="seconddisplayfile.html" method="post">
<p>(key) One: <input type="text" id="one" /></p>
<p>(value)Two:<textarea id="two"></textarea></p>
<p><input type="submit" id="button" value="Save" /></p>
</form>
</section>
<section id="rightbox">
Nothing yet !
</section>
</section>
</body>
</html>
Second page:
<!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>Untitled Document</title>
<script src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="wbox">
Nothing yet!
</section>
</body>
</html>
Javascript code:
// JavaScript Document
function doFirst(){
var button = document.getElementById("button");
button.addEventListener('click',save,false);
}
function save(){
var one = document.getElementById("one").value; //but only contents is to be taken not label n all
var two = document.getElementById('two').value;
localStorage.setItem("one",two); //Store in key-value pair. Anytime you use this you use if by addressing the variable ie key name.
//Retriveing data n displaying stored data
display(one); //now u hav stored two so its time to use one
}
function display(one){
var rightbox = document.getElementById('rightbox'); //refer right box
var two= localStorage.getItem("one"); //Get in key-value pair
rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
/*----Second page display-----*/
var wbox = document.getElementById("wbox");
wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}
window.addEventListener('load',doFirst,false);
#charset "utf-8";
/* CSS Document */
#leftbox{
float:left;
padding:20px;
border:3px solid #F20B84;
}
#rightbox{
float:left;
width:250px;
margin-left:20px;
padding:20px;
border:3px solid #8E1783;
}
Your second page doen't contain any element with id rightbox.so
var rightbox = document.getElementById('rightbox');
will return null.and when try to set innerHTML property of rightbox,js will throw
Uncaught TypeError: Cannot read property 'innerHTML' of null
so change your display to
function display(one){
var rightbox = document.getElementById('rightbox'); //refer right box
var two= localStorage.getItem("one"); //Get in key-value pair
if(rightbox)
rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
/*----Second page display-----*/
var wbox = document.getElementById("wbox");
wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}
You have to call display in second page .
Related
My problem with this code is on the second click it desellects everything and does not select a particular item. I know it's because of the item_'.$x.'Active where even if I have a selectorReset() function it does not necessarily reset the value of each individual active back to 0.
I am aware that this is poor coding, could someone enlighten me with a better solution to having this kind of function? ^_^
example: click item 0 then click item 1 (it works fine as intended)
but if i go back to click to item 0 the activator is set at 1 which means the else in function selector will activate with the reset function so nothing is selected.
Question: How do I keep it selected?
Solution: a janky way of solving it hahha or could someone suggest a an already known concept? thanks ^_^
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="area">
<?php
$x=0;
while($x!=10){
echo'
<div id="item_'.$x.'" class="area__item" onclick="selector'.$x.'()">
'.$x.'
</div>
<script>
var item_'.$x.'Active = 0;
var item_'.$x.' = document.getElementById("item_'.$x.'");
function selector'.$x.'(){
if(item_'.$x.'Active == 0){
selectorReset();
item_'.$x.'.style.backgroundColor = "pink";
item_'.$x.'Active = 1;
}else{
selectorReset();
item_'.$x.'.style.backgroundColor = "";
item_'.$x.'Active = 0;
}
}
</script>
';
$x++;
}
?>
<script>
var item = document.getElementsByClassName("area__item");
function selectorReset(){
for(var i=0;i<item.length;i++){
item[i].style.backgroundColor="";
}
}
</script>
</div>
<style>
.area{
display:flex;
flex-wrap:wrap;
width:100%;
}
.area__item{
display:flex;
justify-content:center;
align-items:center;
height:5em;
width:5em;
border:1px solid black;
margin:1em;
cursor:pointer;
}
.area__item:hover{
background-color:pink;
}
</style>
</body>
</html>
Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.area{
display:flex;
flex-wrap:wrap;
width:100%;
}
.area__item{
display:flex;
justify-content:center;
align-items:center;
height:5em;
width:5em;
border:1px solid black;
margin:1em;
cursor:pointer;
}
.area__item:hover{
background-color:pink;
}
</style>
</head>
<body>
<div class="area">
<?php
$x = 0;
while($x!=10){
echo'
<div id="item_'.$x.'" class="area__item" onclick="selector('.$x.')">
'.$x.'
</div>';
$x++;
}
?>
</div>
<script>
function selector(item) {
// Get the total Class length
var classLength = document.getElementsByClassName("area__item");
// First check any of the classes holds the style attribute, then remove it
for(var i = 0; i < classLength.length;i++){
var element = document.getElementById('item_' + i);
if (element.hasAttribute("style")) {
element.style.backgroundColor = "";
}
}
// Get the selected element by argument
// Then add classes to the selectedElement
var selectedElement = document.getElementById('item_'+item);
selectedElement.style.backgroundColor = "pink";
}
</script>
</body>
</html>
I'm using Wicket and I have followed this guide (and also this one) to build a webpage template.
My goal is to have a fixed header and footer and a dynamic <div> inside <body> that change its content when I change page by clicking on some menu links.
So at the end I have done something like this:
HomePage.html
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title wicket:id="title"> Title </title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div wicket:id="menu"></div>
<div wicket:id="homepageContent"></div>
<div id="content" wicket:id="template" class="">
<wicket:child/>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/myjs.js"></script>
</body>
</html>
HomePage.java
public class HomePage extends WebPage {
// Title of the current page
private String pageTitle;
public HomePage() {
// dynamic page title
add(new Label("title", new PropertyModel<>(this, "pageTitle")));
// ...
}
// ...
public String getPageTitle() {
return pageTitle;
}
public final void setPageTitle(String title) {
pageTitle = title;
}
}
Menu.java
public class Menu extends Panel {
public Menu(String id) {
super(id);
add(new BookmarkablePageLink<>("homepageLink", HomePage.class));
add(new BookmarkablePageLink<>("page1Link", Page1.class));
add(new BookmarkablePageLink<>("page2Link", Page2.class));
}
public Menu(String id, IModel<?> model) {
super(id, model);
}
}
Page1.java
public class Page1 extends HomePage {
public Page1() {
setPageTitle("Page1");
// ...
}
}
Page2.java
public class Page2 extends HomePage {
public Page2() {
setPageTitle("Page2");
// ...
}
}
The problem is that everytime I use my Menu to open a page (Page1 or Page2) the browser reloads all resources, I think it's due to Page1 and Page2 that are children of HomePage.
So, for example, one issue I have is that if I want my Menu to keep track of the page I'm currently visiting by setting a active class via javascript, I will have troubles because everytime I visit a page the js files (and all the others) are downloaded again and I loose all the logic I did.
I just would like to change the content of:
<div id="content" wicket:id="template" class="">
</div>
without refreshing all the rest of the page.
Is it possible to do that just by changing the Wicket approach?
Thanks
What you want to do is basically a Single Page Application. In this case page inheritance doesn't work well. You need to turn Page1, Page2, etc... into Panels and use AJAX to place them as page content (in your code wicket:id="template") when user clicks menu items.
You should to use <wicket:extend></wicket:extend> in parent markup. Something like:
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title wicket:id="title"> Title </title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<wicket:extend>
<div wicket:id="menu"></div>
<div wicket:id="homepageContent"></div>
<div id="content" wicket:id="template" class="">
<wicket:child/>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/myjs.js"></script>
</wicket:extend>
<section id="content">
<wicket:child/>
</section>
</body>
</html>
<wicket:child> is used inside the parent’s markup to define where the children pages/panels can “inject” their custom markup extending the markup inherited from the parent component.
Now only the child markup will updating, I'm not completly sure, but looks like only child part updating.
Last few hours i am trying to solve this but i can not.I am sending ajax request using jquery and based on response i set data on jsp.actully i am checking login detail so if login fail it set error message on label problem is that error message is set for few second and removed i mean to say error message is set for few second i want that if login fails the message is set on label still user enter valid details
thanks in advance
Here is my code
LoginDemo.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!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">
<link href="css/firstpage.css" rel="stylesheet" type="text/css" /><!-- <style> -->
<script src="js/jquery.min.js"></script>
<title>Insert title here</title>
<script>
$(document).ready(function(){
$("#submit").click(function(){
$.ajax({
type: "POST",
url: "AddInspServlet",
cache:false,
data: { userid: $('#username').val(), password: $('#password').val(),btn:$('#submit').val() },
success:function(data,textstaus){
alert("success:"+data);
if(data == "no"){
alert( document.getElementById("error").innerHTML);
document.getElementById("error").innerHTML= "UserName OR Password is incorrect";
alert( document.getElementById("error").innerHTML);
}else{
location.href = 'Home.jsp';
}
},
error:function(data){
alert("error"+data);
},
});
});
});
</script>
</head>
<body>
<form id="login" name="Loginform" method="post">
<h1><b>Log In</b></h1>
<fieldset id="inputs">
<input id="username" type="text" placeholder="Username" autofocus required>
<input id="password" type="password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="login">
Forgot your password?
</fieldset>
<label id="error" style="color: red;font: bolder; font-size: 18px;">
</label>
</form>
</body>
AddInspServlet
Here i m adding code which server executed and retrieve response
if(btn.equals("login"))
{
System.out.println("***** login condition checking ******");
String password =request.getParameter("password");
UserVO v =op.loginCheck(username, password);
if(password.equals(v.getPassword()))
{
System.out.println("inside true condition");
HttpSession session = request.getSession();
session.setAttribute("userid",v.getUser_id());
session.setAttribute("username",v.getUsername());
session.setAttribute("user", v.getFirst_name()+" "+v.getLast_name());
session.setAttribute("roleid", v.getRole_id());
// response.sendRedirect("Home.jsp");
System.out.println("submitting data success fully");
out.print("yes");
}
else
{
System.out.println("false condition");
out.print("no");
}
}
Get rid of the form tags.
By adding a type="submit" input element without using the action attribute in the form tag, the page will be reloaded.
Or you could keep the form tags and change the type of the submit button to type="button". The form will then not be executed and the page will not reload.
It would be better if you be more specific about the problem. I assume your problem is Label is getting displayed for few seconds and then get disappeared. Is that is true? then try to return "false" inside you data == "no" logic.
Thanks.
I have the following HTML accordian structure
<!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>
<title>Basic jQuery Accordion</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: content //auto, fill, content
});
});
</script>
</head>
<body>
<div style="width: 468px;">
<div id="accordion">
<h3>Javascript</h3>
<div>
<h4>Testt</h4>
</div>
<h3>Other</h3>
<div>
<h4>Stuff</h4>
</div>
</div>
</div>
</body>
</html>
I am trying to build this in a jsp file as shown
<!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>
<title>Basic jQuery Accordion</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: content //auto, fill, content
});
});
</script>
</head>
<body>
<div style="width: 468px;">
<div id="accordion">
<%
ArrayList<String> list = new ArrayList<String>();
list.add("CoolDrinks");
list.add("Snacks");
list.add("Other");
%>
<%
for (String items : list)
{
%>
<h3><%=items%></h3>
<div>
<h4><%=items%></h4>
</div>
<%
}
%>
<%
}
%>
</div>
</div>
</body>
</html>
Could anybody please tell me where its failing ??
Import for ArrayList?
<%#page import="java.util.ArrayList"%>
EDIT: Upon testing you will also need to remove the last set of:
<%
}
%>
So it will look like this:
<%#page import="java.util.ArrayList"%>
<%#page contentType="text/html" 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>
<title>Basic jQuery Accordion</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.2/themes/dark-hive/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(
function () {
$("#accordion").accordion({ header: "h3",
autoheight: false,
active: false,
alwaysOpen: false,
fillspace: false,
collapsible: true,
//heightStyle: content //auto, fill, content
});
});
</script>
</head>
<body>
<div style="width: 468px;">
<div id="accordion">
<%
ArrayList<String> list = new ArrayList<String>();
list.add("CoolDrinks");
list.add("Snacks");
list.add("Other");
%>
<%
for (String items : list)
{
%>
<h3><%=items%></h3>
<div>
<h4><%=items%></h4>
</div>
<%
}
%>
</div>
</div>
You should start your page with jsp header :
<%#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>
....
Hi I am new to JSP and JavaBean. I am practicing by writing an application where multiple pages will share a javabean component. The page "check.jsp" instantiates the bean and sets a property without any error. But whenever I try to getProperty in another jsp, survey.jsp, I get the error:
HTTP Status 500 - file:/survey.jsp(16,15) jsp:getProperty for bean with name 'survey'. Name was not previously introduced as per JSP.5.3
I have double checked that the name in the get and set properties are exactly the same as my bean id in the action element. Please I need help
CHECK.jsp:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<jsp:useBean id="survey" scope="application" class="appScope.SurveyBean"/>
<jsp:setProperty name="survey" property="quantity" value='<%= request.getParameter("title")%>' />
<form action="/appScope/survey.jsp" method="POST">
<h3> Thanks for your input</h3>
<h3> Please check the survey summary status if you want</h3><br/>
<input type="submit" value="Check Status" />
</form>
</body>
</html>
This is my javabean: SurveyBean.java:
package appScope;
public class SurveyBean {
private int javaQuantity = 0;
private int csQuantity = 0;
public int getJavaQuantity()
{
return javaQuantity;
}
public int getCsQuantity()
{
return csQuantity;
}
public void setQuantity(String bookTitle)
{
try
{
if(bookTitle.equals("java"))
{
javaQuantity++;
}
if (bookTitle.equals("c"))
{
csQuantity++;
}
}
catch (Exception e)
{
e.printStackTrace();
}
}
}
and here is survey.jsp where i get the error:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<h1>Survey Summary</h1>
//ERROR IS HERE
Java = <jsp:getProperty name="survey" property="javaQuantity" /> <br/>
C# = <jsp:getProperty name="survey" property="csQuantity" />
</body>
</html>
Name was not previously introduced
This indicates that you haven't told your JSP about this bean as of yet. You are directly using the <jsp:getProperty> before letting the JSP know about the bean.
You need to use the <jsp:useBean> tag to define the bean in the survey.jsp.The name attribute of the getProperty tag must match the id attribute of the useBean tag :
<jsp:useBean id="survey" class="appScope.SurveyBean" scope="request">
But this won't work , unless you set the bean named survey in the request scope in the check.jsp file and post that request to the survey.jsp.