this is a very basic one
i have a form in html
in which i want following functionality
1. when user click submit button then the mail goes and a thank you message appear in same place without refreshing the page
here is my html
in which there are two div which is show text and get text on body load i am showing get text div and on submit i have to show next div but this not happening i dont know eher i am doing wrong
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<STYLE></STYLE>
<script src="jquery.js"></script>
<TITLE></TITLE>
<META content="text/html; charset=UTF-8" http-equiv=content-type>
</head>
<body style="margin:0; padding:0;">
<div style=" width:311px; height:576px; background:url(img/bg.png) no-repeat; position:relative; ">
<div class="getText">
<form action="" method="POST">
<input type="text" name="name" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:235px; left:47px; "/>
<input type="text" name="email" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:286px; left:47px; "/>
<input type="text" name="" value="" style="width:207px; height:26px; border:1px solid black; position:absolute; top:337px; left:47px; "/>
<textarea cols="23" rows="4" style="border:1px solid black; position:absolute; top:387px; left:47px;"></textarea>
<input type="submit" name="submit" value="Submit" style="width:76px; height:27px; border:0; outline:none; color:#ffffff; background-color:#ff0000; font-weight:bold; cursor:pointer; font-size:14px; font-family:verdana; position:absolute; top:470px; left:49px;" id="sub">
</form>
</div>
<div class="showText" style="width:247px; height:282px; background-color:#ffac00; color;#292a2a; text-align:center; font-weight:bold; font-size:14px; font-family:verdana; position:absolute; top:216px; left:28px;"><br><br><br>
Thank You !<br>
You shall hear from us soon !!
</div>
</div>
<script>
$(document).ready(function(){
$(".showText").hide();
("#sub").on("click",function( ) {
$(".showText").show();
$(".getText").hide();
});
});
</script>
</body>
</html>
on click of submit page is getting refreshed and not showing thank you div i didnt want to refresh the page
Here is something to get you started on using AJAX: http://jsfiddle.net/j8rnW/
$(document).ready(function () {
$(".showText").hide();
$("#sub").on("click", function (e) {
e.preventDefault();
$.ajax({
url: '',
method: 'post',
data : {}, //pass your form elements as key-value pairs
success: function (response) {
$(".showText").show();
$(".getText").hide();
}
});
});
});
Using ajax would help. Or you can change the input type to 'button' instead of submit. Because submit always posts the form values and refreshes the page
Related
https://ibb.co/3M8TjjY
Codepen
https://codepen.io/shon-lucky/pen/WNozGRe?editors=1100
Trying to center this form and its beating me up. So far i have used margin: auto. But everytime i do the form centers but the input elements are not centered in the form. I have used positioning where i made the parent container relative and made the form absolute but the everything dissapears before i even try to move it. Can someone help me with this plz
<form action="">
<div class="firstrow">
<label for="How Many People">How Many People</label>
<input type="text">
</div>
<div class="firstrow">
<label for="date">Date</label>
<input type="text">
</div>
<div class="firstrow">
<label for="time">Time</label>
<input type="text">
</div>
<br style="clear:both">
<div class="secondrow">
<label for="name">Name</label>
<input type="text" placeholder="Your full name">
</div>
<div class="secondrow">
<label for="email">Email</label>
<input type="text">
</div>
<div class="secondrow">
<label for="Phone">Phone</label>
<input type="text" placeholder="You phone">
</div>
</div>
</form>
</section>
.section4{
width:100%;
height: 380px;
background-color: #374a5c;
}
.section4 .wrapper{
width:80%;
height:380px;
margin:auto;
border: 1px solid red;
}
form{
}
label,input{
display:block;
}
.firstrow{
float: left;
}
.secondrow{
float:left;
}
Thank you for the Codepen! Here is a fix to center the form elements:
Link to the edited pen : https://codepen.io/pathiout/pen/YzpaLdR?editors=1100
Here is the css I used :
.firstrow {
display: inline-block;
margin: 10px auto;
}
.secondrow {
display: inline-block;
}
Basically I removed the "float left" attributes that prevents any centering from parent. Is this an acceptable solution for you ?
Have you tried text-align? Sometimes in HTML, the text align can center html element other than text, I've used it many times already.
<div style="text-align: center"><input type="text"> ....
first post here so please be gentle ;-)
I have a query about popup modals, that not only have an image within the modal, but some text too. Attached my current status of the coding, however could not figure out an easy way to get the text caption for each image. The image popups are correct, however text returned is TEXT1 for whichever I click.
Any help would be appreciated. Many thanks
Sabs
function onClick(element) {
document.getElementById("modal01").style.display = "block";
document.getElementById("img01").src = element.src;
document.getElementsByClassName("modal-content").innerHTML = this.alt;
}
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
/*height: 100%;*/
}
body {
background: url('../img/dark.jpg');
background-size: cover;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.main {
margin: 0 auto;
height: 100%;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 5px;
margin-top: 100px;
margin-right: 2rem;
margin-left: 2rem;
}
.mainInner img{
width: 100%;
object-fit: cover;
/*display:inline-block;*/
}
/* ---------------- placement of images within our grid system -----*/
.mainInner:nth-child(1){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(2){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(3){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(1):hover, .mainInner:nth-child(2):hover, .mainInner:nth-child(3):hover{
transform: scale(1.05);
cursor: pointer;
transition: .5s;
opacity: 0.30;
}
/*----------------------- styling the modal ------------------------*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 60px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /*Full height*/
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
/*styling the caption text*/
color: #f1f1f1;
font-size: 20px;
font-weight: bold;
text-align: center;
}
/* Modal Content */
.modal-content {
margin: auto;
display: block;
/*position: absolute;*/
/*transform: translate(-50%, -50%);*/
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 650px){
.main{
display: block;
}
.mainInner{
margin-bottom: 1rem;
}
.modal-content {
width: 100%;
}
}
/*----------------- end modal styling -----------------*/
<!DOCTYPE html>
<html>
<head>
<title>Popup Modal Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="main center">
<div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" onclick="onClick(this)"></div>
</div>
<!-- 1st IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT1</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 2nd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT2</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 3rd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT3</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script2.js"></script>
</body>
</html>
I'm a little bit late on this post - welcome to SO, Sabs! Kudos for making a first post with a clear and concise problem, and including your relevant code.
At first glance, the reason you're always returning "Text 1" is because your JS file hardcodes modal01 as the ID for each modal. So while the function is called whenever you click any of the images, it will always show that ID.
You don't have to re-invent the JS and CSS for a modal popup, though - a much simpler way is to use Bootstrap. You can still edit CSS and JS to your heart's content by giving IDs and classes, but you don't need much to call it. You need to include source CSS/JS files (from CDN here for simplicity's sake):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Calling the modal from your HTML uses a data-toggle and a data-target:
<div class="main center">
<div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" data-toggle="modal" data-target="#myModal1"></div>
<div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" data-toggle="modal" data-target="#myModal2"></div>
<div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" data-toggle="modal" data-target="#myModal3"></div>
</div>
The modals:
<!-- Beginning Modal 1 -->
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 1</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>The first modal..</p>
<img src="img/brands/AyalaBar.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 1 -->
<!-- Beginning Modal 2 -->
<div class="modal fade" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 2</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>A second modal..</p>
<img src="img/brands/BastianInverun.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 2 -->
<!-- Beginning Modal 3 -->
<div class="modal fade" id="myModal3">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 3</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>The third modal..</p>
<img src="img/brands/breuning.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 3 -->
I have problem with materialize collapsible and date picker. Collapsible is not even opening on click and the date picker too. Date picker placed in Personal details - collapsible item. Someone please help me to fix collapsible and date picker.
Check: Placements App
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Placements MGIT</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<!-- If CDN not available, loading JQuery from Server-->
<script>
if (!window.jQuery) {
document.write('<script src="/js/jquery.min.js"><\/script>');
}
</script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="/js/materialize.min.js"></script>
</head>
<body>
<nav>
<div class="nav-wrapper">
MGIT Placements
<i class="material-icons">M</i>
<ul class="left hide-on-med-and-down">
<li class="active">Login</li>
<li>Register</li>
<li>Upcoming</li>
<li>Contact</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li class="active">Home</li>
<li>Login</li>
<li>Register</li>
<li>Upcoming</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="row">
<div class="student-profile">
<div class="col l8 offset-l2 m10 offset-m1">
<ul class="collapsible" popout" data-collapsible="accordion">
<li>
<div class="collapsible-header">Pefrsonal Info</div>
<div class="collapsible-body">
<div id="personal">
<div class="card black-text">
<div class="input-field col s12 m4 l4">
<input type="text" id="firstname" />
<label for="firstname">First Name:</label>
</div>
<div class="input-field col s12 l4 m4">
<input type="text" id="lastname" />
<label for="lastname">Last Name:</label>
</div>
<div class="input-field col s12 l4 m4">
<input type="text" id="surname" />
<label for="surname">Surname:</label>
</div>
<div class="input-field col s12 m6 l6">
<input type="text" id="father" />
<label for="father">Father Name:</label>
</div>
<div class="input-field col s12 l6 m6">
<input type="text" id="mother" />
<label for="mother">Mother Name:</label>
</div>
<div class="input-field col s12 m6 l6">
<input type="date" class="datepicker" />
</div>
</div>
</div>
</div>
</li>
<li>
<div class="collapsible-header">Academics Info</div>
<div class="collapsible-body"> Acaademics Should be here</div>
</li>
<li>
<div class="collapsible-header">Change Password</div>
<div class="collapsible-body">Password Change Shoule be here</div>
</li>
<li>
<div class="collapsible-header">View Data </div>
<div class="collapsible-body" id="dynamicdata">View Data</div>
</li>
</ul>
</div>
</div>
</div>
<style type="text/css">
<style type="text/css">
body {
background-color: #FCFCFC;
}
nav{
background-color: #33597C;
}
.updates{
position: absolute;
padding: 20px;
background: transparent;
}
marquee{
padding: 20px;
}
.vline{
width: 1px;
position: absolute;
background-color: orange;
}
.vline.medium{
top: initial;
height: 420px;
}
.small-login{
padding: 20px;
}
.login-fields{
padding: 20px;
}
h6{
color: #33597C;
}
h2 {
color: grey;
}
/* #4A6787 ; #33597C; */
.login-bg {
margin-top: 5%;
}
#message {
color: red;
margin: 20px;
}
#lgn_btn{
top: 20px;
background-color: #33597C;
width: 60%;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: #1A237E;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #1A237E;
box-shadow: 0 1px 0 0 #1A237E;
}
/* label focus color */
.input-field input[type=password]:focus + label {
color: #1A237E;
}
/* label underline focus color */
.input-field input[type=password]:focus {
border-bottom: 1px solid #1A237E;
box-shadow: 0 1px 0 0 #1A237E;
}
</style>
<script type="text/javascript">
jresp = '{% autoescape off%}{{jresp}}{% endautoescape%}';
resp = JSON.parse(jresp);
rollno = resp['rollno'];
details = resp['data'];
var update = document.getElementById('dynamicdata')
for (keys in details) {
update.innerHTML += "<b>"+keys[0].toUpperCase()+keys.slice(1).toLocaleLowerCase()+": </b>"+details[keys]+"<br />"
}
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15,
});
$(".button-collapse").sideNav();
$(document).ready(function () {
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
});
</script>
</body>
</html>
Well, after reading code, debugging and Googling I am able to fix the problem.
First thing - Materialize Collapsible.
Clicking on collapsible header, display property of collapsible body
is not changing.
So, adding display property for the element collapsible body, will fix the problem.
collapsible-body{
display: block;
}
`
Second thing - Materialize DatePicker
On Chrome, it is not responding to mouse clicks. But, responding to space button.
So, to fix this issue, I just added a bit of JQuery code as shown below.
Date Picker HTML Code
<div class="input-field col s12 m6 l6">
<label for="dob">Date of Birth:</label>
<input id="dob" type="text" class="datepicker" />
</div>
and mouse click event that triggers...
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 40,
min: new Date(1990,0,1),
max: new Date(2000,11,31),
closeOnSelect: true,
});
$("#dob").click(function (event) {
event.stopPropagation();
$(".datepicker").first().pickadate("picker").open();
});
Here, you can see the working materialize date picker...
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 40,
min: new Date(1990, 0, 1),
max: new Date(2000, 11, 31),
closeOnSelect: true,
});
$("#dob").click(function(event) {
event.stopPropagation();
$(".datepicker").first().pickadate("picker").open();
});
<head>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</head>
<body>
<div class="input-field">
<label for="dob">Date of Birth:</label>
<input id="dob" type="date" class="datepicker" />
</div>
</body>
Here is the code which isn't working. Basically I'm allowing the user to edit some text in the div and then display its screenshot. Can someone please tell why is it not working?
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<input id="submit" type="submit" value="SUBMIT" />
</div>
<script type="text/javascript">
window.onload = function() {
html2canvas( [ document.body ], {
onrendered: function( canvas ) {
document.body.appendChild( canvas );
}
});
};
</script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>
I changed your code a little bit and it works:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css" />
<title>Poster</title>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript">
var Submit = function() {
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
};
</script>
</head>
<body>
<div id="main_image">
<img src="image.jpg" id= "image"/>
<div id="user_text">IT IS TOTALLY AWESOME</div>
</div>
<div id="edit_text_box">
<textarea id="user_input" placeholder="Your text here.." rows="2" cols="30" ></textarea>
<div id="change_size">
<span style="float: left;">FONT-SIZE : </span>
<button id="decrease_size">-</button>
<button id="increase_size">+</button>
</div>
<button onclick="Submit();" >Submit</button>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/edit_text.js"></script>
</body>
</html>
First, I added html2canvas JavaScript file (<script type="text/javascript" src="html2canvas.js"></script>). You can download it at https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js and put that file to the same folder as your HTML. Apparently, you are trying to create something like a form, but there's no form tag in your code. You can call html2canvas either when you submit a form (you have to add <form> then) or using onclick attribute of a button. I changed your submit input element to button and bind Submit method to its onclick attribute. When user clicks the button, screenshot appears below the form.
Just use this code
document.querySelector('button').addEventListener('click', function() {
html2canvas(document.querySelector('.specific'), {
onrendered: function(canvas) {
// document.body.appendChild(canvas);
return Canvas2Image.saveAsPNG(canvas);
}
});
});
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
h1 {
font-size: 36px;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
h1 small {
font-size: 65%;
font-weight: 400;
line-height: 1;
color: #777;
display: block;
padding-top: 15px;
}
.specific {
background-color: #fff;
}
p a {
padding: 5px;
}
<script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="specific">
<h1>Click to Take a Screenshot & Download it! <small>using html2canvas.js + canvas2image.js</small></h1>
<p>This is a simple demo.</p>
<p>Use html2canvas.js to take a screenshot of a specific div and then use canvas2image.js to download the screenshot as an image locally to your filesystem.</p>
<button type="button" class="btn btn-default">Take a Screenshot!</button>
<p>References: html2canvas.jscanvas2image.js
</p>
</div>
I'm porting our existing web application from Wicket 1.4 to 1.5. In the app there are two template pages which are children of a base page. The templates are named secure and unsecure, and they define pages for authenticated and unauthenticated users. Any pages in the app inherit from these templates. In Wicket 1.4 this set up worked fine without any problems.
After porting to Wicket 1.5 I get the following error:
Unable to find component with id 'PageTitle' in [HtmlHeaderContainer]
'PageTitle' is a Wicket Label and is used dynamically build the page title in the base page, it is positioned in the <head> tag of the base page mark up. What I've discovered is that the <head> mark up is being rendered twice, so I presume I get the error because Wicket creates the PageTitle once and then tries to create it again (The <head> is defined in the base page mark up only).
The quick and dirty fix is to move the PageTitle to the templates (duplicated code). Is there a better way to solve this problem?
Hopefully my description is clear enough, however, I can supply a code example if needed.
The <head> tag should only be used once in page markup. This means that if you have a <head> tag in a base page, no page that extends it should include it. Further, no component should use the <head> tag.
Instead, use the <wicket:head> tag to include any additional content that is not included in your base page. Wicket will use the <wicket:head> tag to dynamically inject content into the <head> tag that is rendered and delivered to the browser.
OK as requested here's a code sample. BasePage.java:
public class BasePage extends WebPage
{
public BasePage()
{
this(new PageParameters());
}
public BasePage(PageParameters parameters)
{
add(new Label("PageTitle", "Gosh Wicket version migration is hard work"));
}
...
}
BasePage.html (doctype etc., removed):
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title wicket:id="PageTitle">Page title goes here</title>
<!-- This comment will appears in both the headers I see in the source, therefore this header is rendering twice-->
<link type="text/css" rel="stylesheet" href="css/application.css" />
<script type="text/javascript" src="js/rollover.js"></script>
<script type="text/javascript" src="js/menus.js"></script>
</head>
<wicket:child/>
</html>
UnSecureTemplate java:
public class UnSecureTemplate extends BasePage
{
public UnSecurePageTemplate()
{
super(new PageParameters());
}
public UnSecureTemplate(PageParameters parameters)
{
super(parameters);
Label footerText = new Label("footerText", footerComesFromAPropertiesFile);
add(footerText);
//Instance variables here defined in BasePage
// Header bar links - left
Link<Object> hdrHome = addLink("hdrHome", HomePage.class);//this method is in BasePage in case you're wondering
hdrHome.add(new Image("mgrLogo", new ContextRelativeResource(poLogoUrl)));
// Header bar links - Right
ExternalLink hdrCorporate = new ExternalLink("hdrCorporate", anExternnalLink);
hdrCorporate.add(new Image("operatorLogo", new ContextRelativeResource(opLogoUrl)));
add(hdrCorporate);
}
UnSecureTemplate.html:
<wicket:extend xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<body id="body" onload="preloadImages(); return true;">
<div class="centerbody">
<a name="top"></a>
<div id="mast">
<a wicket:id="hdrHome" title="home page">
<img wicket:id="mgrLogo" id="mgr-logo" src="images/logoShort.png" width="171" height="45" wicket:message="alt:remon.logoAltText" />
</a>
<a wicket:id="hdrCorporate" title="Web Site">
<img wicket:id="operatorLogo" id="po-logo" src="images/logoNoStrapline.png" height="45" wicket:message="alt:remon.logoAltText" />
</a>
</div>
<div id="mainmenubar" style="width: 100%">
<div class="menubaritem" style="width: 171px;">
</div>
<div class="menubaritem" style="width: auto; border-right: none;">
</div>
</div>
<div id="mainpanel">
<div id="leftnav">
<p> </p>
</div>
<div id="rightpanel">
<wicket:child/>
</div> <!-- right panel -->
</div> <!-- main panel -->
<div id="footer" style="height:15px;">
<span><span wicket:id="footerText">Footer Text</span></span>
</div>
<div id="footerspacer">
</div>
</div> <!-- centre body -->
</body>
</wicket:extend>
}
An application page, LogIn.java:
public class Login extends UnSecureTemplate
{
public Login()
{
this(new PageParameters());
}
public Login(PageParameters pageParameters)
{
super(pageParameters);
String welcomeResourceString = stringObtainedFromPropertiesFile;
add(new Label("welcome", welcomeResourceString));
add(new Label("loginHeader", thisAlsoComesFromPropertiesFile);
LoginForm form = new LoginForm("loginform", new SimpleUser(), pageParameters);
form.add(new FeedbackPanel("feedback"));
add(form);
}
...
}
LogIn.html:
<wicket:extend xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd">
<h2 wicket:id="welcome">Welcome to the Application</h2>
<div style="margin: 20px 150px 20px 150px; text-align: center;">
<p wicket:id="loginHeader"></p>
<form wicket:id="loginform" id="loginform" >
<table style="display: table; border: 0px; margin: auto;" wicket:message="summary:loginTableSummary">
<tr style="display: table-row;">
<td class="login" colspan="2"><span wicket:id="feedback">Feedback</span></td>
</tr>
<tr style="display: table-row;">
<td class="login">
<label for="username"><wicket:message key="username">Username</wicket:message></label>
</td>
<td class="login">
<input wicket:id="username" id="username" type="text" name="user" value="" size="30" maxlength="50"/>
</td>
</tr>
<tr style="display: table-row;">
<td class="login">
<label for="password"><wicket:message key="password">Password</wicket:message></label>
</td>
<td class="login">
<input wicket:id="password" id="password" type="password" name="pswd" value="" size="30" maxlength="16"/>
</td>
</tr>
<tr style="display: table-row;">
<td class="login"> </td>
<td class="login"><input class="btn" type="submit" name="Login" value="Login" wicket:message="title:loginButtonTitle"/></td>
</tr>
</table>
</form>
</div>
</wicket:extend>