I am having trouble using two plugins. I have tried:
https://github.com/snikch/jquery.dirtyforms
https://github.com/codedance/jquery.AreYouSure
In my code I am using:
<script>
$(funtion() {
$('form').dirtyForms();
});
</script>
Or
<script>
$(funtion() {
$('form').areYouSure();
});
</script>
within my header and when I change elements of the form and try to refresh I get no dialouge. I am struggling to work out how I can tell if it's being called at all.
I can't for the life of me get it to work. Any ideas?
Below is a view source example of a page with it in:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles/header.css?v=1.0">
<link rel="stylesheet" href="styles/content.css?v=1.0">
<link rel="stylesheet" href="styles/footer.css?v=1.0">
<link rel="stylesheet" href="styles/jquery.datetimepicker.css?v=1.0">
<script src="scripts/jquery191.min.js"></script>
<script src="scripts/mdetect.js" type="text/javascript"></script>
<script type="text/javascript">
if(MobileEsp.DetectTierIphone() == true) {
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=0.4, maximum-scale=1.0, user-scalable=1"
document.getElementsByTagName('head')[0].appendChild(metaTag);
}
if(MobileEsp.DetectTierTablet() == true) {
var metaTag=document.createElement('meta');
metaTag.name = "viewport"
metaTag.content = "width=device-width, initial-scale=0.75, maximum-scale=1.0, user-scalable=1"
document.getElementsByTagName('head')[0].appendChild(metaTag);
}
</script>
<script type="text/javascript" src="scripts/jquery.tablesorter.js"></script>
<script type="text/javascript" src="scripts/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript" src="scripts/widget-print.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBTHOXfueJyei11NqPw3rRjhjj_yjcdV-E&callback=initMap"></script>
<script src="scripts/jquery.datetimepicker.full.min.js"></script>
<script src="scripts/jquery.form.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.dirtyforms/2.0.0/jquery.dirtyforms.min.js"></script>
<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>
<script>
$(document).ready(function(){
$("BodyshopAddress").each(function(){
var embed ="<iframe width='200' height='200' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' style='margin-left:30px;' src='https://maps.google.com/maps?&q="+ encodeURIComponent( $(this).text() ) +"&output=embed&iwloc'></iframe>";
$(this).html(embed);
});
});
</script>
<script>
$(funtion() {
$('form').dirtyForms();
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="MainHeader">
...
</div>
<div class="logged_container">
...
</div>
<div class="navigation_container">
...
</div>
<div style="position:absolute; top:0; right:0; margin-right:10px; margin-top:5px; background-color:#4771A5; border-radius:3px; padding:5px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 25px rgba(82, 168, 236, 0.7);">
<form id="myForm" action="" method="POST">
<input type='text' size='20' name='Poke' placeholder='Magic Poking Stick' style="margin-right:5px; vertical-align:middle; text-align:center;"> <input type='submit' name='BadBoyPoke' value='' class='submit' title='Search' maxlength="3" style='background-image:url("img/bms121.png"); vertical-align:middle;' >
</form>
</div>
<script>
$(document).ready(function()
{
$('#RepairerNetworkTable').tablesorter({
widthFixed : true,
headerTemplate : '{content} {icon}', // Add icon for various themes
widgets: [ 'stickyHeaders', 'filter', 'print' ],
widgetOptions: {
stickyHeaders_attachTo : '.wrapper',
print_title : '', // this option > caption > table id > "table"
print_dataAttrib : 'data-name', // header attrib containing modified header name
print_rows : 'f', // (a)ll, (v)isible or (f)iltered
print_columns : 's', // (a)ll, (v)isible or (s)elected (columnSelector widget)
print_extraCSS : '', // add any extra css definitions for the popup window here
print_styleSheet : 'styles/tablePrint.css', // add the url of your print stylesheet
print_callback : function(config, $table, printStyle){
$.tablesorter.printTable.printOutput( config, $table.html(), printStyle );
}
}
});
$('.print').click(function(){
$('.tablesorter').trigger('printTable');
});
}
);
</script>
<div class="content">
<div class="contentTableView">
<a href="#" class="print" style="float:right; margin-right:20px;">
<img src="img/bms91.png" alt="" height="16" style="vertical-align:top; padding-right:5px;">Print</a>
</div>
<br /><br />
<div class="GridViewContainer wrapper">
<table id="RepairerNetworkTable" class="tablesorter">
...
</table>
</div>
<br />
<div class="TabbedViewContainer">
<div class="TabbedNavContainer">
<div style="position: relative; top: 50%; transform: translateY(-50%);">
<form action="" method="post">
<a style="text-decoration:underline !important;" href="repairer_network.php?RepNetID=9&RepNetTab=Info">Info</a>
Work Providers / Brokers
Bodyshops
<input name="submitInfo" type="submit" value="Change Repairer Network's Info" />
</div>
</div>
<div style="text-align:left; padding-left:10px; padding-top:10px;">
<span style="font-size: 12px; font-weight:bold;">Repairer Network Info: </span>
<br />
<hr size='1' style=" margin: 5px 10px 5px 0; ">
<table style="float:left;">
<tr>
<td>Name: </td>
<td><input name="BusinessName" type="text" size="30" value="AI Claims Solutions (UK) Ltd"/> </td>
</tr>
<tr>
<td>Email: </td>
<td><input name="BusinessEmail" type="text" size="30" value=""/></td>
</tr>
<tr>
<td>Phone: </td>
<td><input name="BusinessPhone" type="text" size="30" value=""/></td>
</tr>
</table>
</form>
</div>
</div>
<br />
</div>
<div class="footer">
...
</div>
</div>
</body>
</html>
It's simple to use. Just add the following line to your page's ready function:
$('form').areYouSure(); Are You Sure? - A light "dirty forms" JQuery Plugin
$(document).ready(function(){
$('form').areYouSure();
});
That's what the plugin says... it listen to the element $('form') (you could use an id or class) and when the "event" "areYouSure()" occurs, the plugin will trigger...
Related
First let me start by saying I am very new to javascript. I am currently studying the subject as part of a course I am doing.
I have an assignment that requires me to put together image slices in a table built by javascript and place it in a on a HTML page.
I have had success with all of this except when i attempt to resize the table and div section with CSS the images separate leaving gaps in the image. Is there anyone out there who can see why i am getting this issue? Im pulling my hair out.
here is my code.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bazaar Ceramics</title>
<!--[if IE]>
<link type="text/css" rel="stylesheet" media="all" href="ie_only.css"/> <![endif]-->
<link href="../../CSS/ie_only.css" rel="stylesheet" type="text/css">
<link href="../../CSS/laptop.css" rel="stylesheet" type="text/css">
<link href="../../CSS/Layout.css" rel="stylesheet" type="text/css">
<link href="../../CSS/mobile.css" rel="stylesheet" type="text/css">
<link href="../../CSS/style.css" rel="stylesheet" type="text/css">
<link href="../../CSS/tablet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="mainwrapper">
<div id="header"><img id="logo" src="../../images/bazaar-logo.jpg" alt="Bazaar Ceramics Logo"><h1 class="title">Bazaar Ceramics</h1>
</div><!--this is the end of div Header-->
<div id="ImageContent"><script src="../../Script/ImageContent.js"> </script></div><!--this is the end of div id ImageContent-->
<div id="formContent">
<h1 class="prodhead">Order Item</h1>
<form action="#" name="orders">
<table id="formtab">
<tr>
<td width="20%"><label>Item Description:</label></td> <td><input type="text" name="description" size="100%" value="Red Bowl" disabled></td>
</tr>
<tr>
<td><label>Quantity:</label></td><td><input type="text" name="quantity" value="1" min="1"></td>
<tr>
<td><label>Price:</label></td><td><input type="text" name="price" value="$350" disabled></td>
</tr>
<tr>
<td><label>Total Price:</label></td><td><input type="text" name="total"></td>
</tr>
<tr>
<th colspan="2"><input type="button" name="clear" value="Clear Form" id="button"> <input type="button" name="calculate" value="Calculate Total" id="button"> <input type="button" name="Submit" value="Submit Order" id="button"></th>
</table>
</form>
</div><!--this is the end of div id formContent-->
<div id="footer">
Home
Close
<br style="clear:both"><p id="copyright">Copyright 2018 Online System Solutions</p></div><!--this is the end of dive id footer-->
</div><!--end of mainwrapper-->
</body>
</html>
CSS Code
.myTable {
max-width:90%;
}
.myImg{
display:block;
max-width: 100%;
height: auto;
width: auto;
vertical-align:middle;
}
javascript
// constants
var colCount=5;
var rowCount=4;
// input data
var col1 = new Array("r1_c1","r2_c1","r3_c1","r4_c1");
var col2 = new Array("r1_c2", "r2_c2", "r3_c2", "r4_c2");
var col3 = new Array("r1_c3", "r2_c3", "r3_c3", "r4_c3");
var col4 = new Array("r1_c4", "r2_c4", "r3_c4", "r4_c4");
var col5 = new Array("r1_c5", "r2_c5", "r3_c5", "r4_c5");
// create the column array.
var collist = [col1,col2,col3,col4,col5];
// make the table.
document.write('<table class="myTable" cellspacing="0" cellpadding="0" align="center">');
for (rownum = 1; rownum <= rowCount; rownum++) {
document.write("<tr>");
for (colnum = 1; colnum <= colCount; colnum++) {
document.write("<td>" + '<img src="../../images/Large/bcpot002_' + (collist[(colnum-1)])[(rownum-1)] + '.jpg"' + 'class="myImg">' + '</img>' + "</td>");
}
document.write("</tr>");
}
document.write('</table>')
Any help here would be great thanks.
Good day! I am using iframe and instead of an src to another page for its contents, I used the iframe's id to call a Javascript action but nothing shows. Here is my code:
#(title: Html, nav: String = "")(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>Impact Analysis Knowledge Management Tool</title>
<style>
.menu {
width:25%;
height:100%;
}
.mainContent {
width:75%;
height:100%;
}
</style>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<link href='#routes.Assets.at("stylesheets/css/ui-lightness/jquery-ui-1.10.4.css")' rel="stylesheet">
<script src='#routes.Assets.at("javascripts/jquery-ui-1.10.4.js")'></script>
<script type="text/javascript">
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write('<div class="container"> <div class="content"> <div class="row"> <div class="span14"> #content </div> </div> </div> </div>');
doc.close();
</script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="#routes.Application.index()">Home</a>
<ul class="nav">
<li class="#("active".when(nav == "add tag"))">
Add Tag
</li>
<li class="#("active".when(nav == "view edit"))">
View/Edit Tag
</li>
<li class="#("active".when(nav == "log"))">
Log Information
</li>
<li class="#("active".when(nav == "map"))">
Web Map
</li>
</ul>
<p align="right"> Log-out </p>
</div>
</div>
</div>
<iframe class="menu" src="#routes.Tags.map(false)" ></iframe>
<iframe id="frame" class="mainContent" src="about:blank" ></iframe>
</body>
</html>
The left iframe has no problem but the other side (where there is no src) is empty. I checked the console and it says Uncaught TypeError: Cannot read property 'contentWindow' of null. Please help me figure this out. Thanks a lot.
EDIT
This is the page-source.
<link rel="stylesheet" href="/assets/stylesheets/jquery-ui.css">
<script src="/assets/javascripts/jquery-1.10.2.js"></script>
<script src="/assets/javascripts/jquery-ui-1.10.4.js"></script>
<script src='/assets/javascripts/jquery-1.7.1.min.js' type="text/javascript"></script>
<script>
$(function() {
var availableTags = ["rule 14","rule 15","rule 13","domestic route","block time","working crew","daily schedule","rule 1"];
var scntDiv = $('#addMore');
var i = $('#addMore p').size();
$('#addRT').live('click', function() {
$('<p>'+
'<input id="tags'+i+'" type="text" name="relatedTags.tag.name" placeholder="Name" required /> '+
'<textarea name="relatedTags.relatedNotes" placeholder="Notes"></textarea> '+
'<select name="relatedTags.relationship"> <option value="parent"> parent </option>'+
'<option value="child"> child </option>'+
'<option value="peer"> peer </option>'+
'</select> '+
'Remove</p>').appendTo(scntDiv);
$( "#tags"+i ).autocomplete({
source: availableTags
});
i++;
return false;
});
$('#remRT').live('click', function() {
if( i > 0 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
});
function checkDuplicates() {
if ( $.trim( $('#name').val() ) == '' ) {
alert('Invalid name.');
return false;
}
else {
var availableTags = ["rule 14","rule 15","rule 13","domestic route","block time","working crew","daily schedule","rule 1"];
var input = document.getElementById('name').value;
input = input.replace(/\s+/g,' ').trim().toLowerCase();
var found = $.inArray(input, availableTags);
if(found != -1) {
alert("Tag already exists.");
return false;
} else { //does not contain the value
var k = $('#addMore p').size();
for (var i=0; i<k; i++) {
for (var j=0; j<k; j++) {
if (i!=j){
if (document.getElementById('tags'+i).value==document.getElementById('tags'+j).value &&
document.getElementById('tags'+i).value!="" && document.getElementById('tags'+j).value!="") {
alert("Duplicate entries found.");
document.getElementById('tags'+i).select();
return false;
}
}
}
}
return true;
}
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Impact Analysis Knowledge Management Tool</title>
<style>
.menu {
float:left;
width:20%;
height:100%;
}
.mainContent {
float:left;
width:79%;
height:100%;
}
</style>
<link rel="stylesheet" media="screen" href="/assets/stylesheets/bootstrap.css">
<link rel="stylesheet" media="screen" href="/assets/stylesheets/main.css">
<link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
<link href='/assets/stylesheets/css/ui-lightness/jquery-ui-1.10.4.css' rel="stylesheet">
<script src='/assets/javascripts/jquery-ui-1.10.4.js'></script>
</head>
<body>
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="/index">Home</a>
<ul class="nav">
<li class="active">
Add Tag
</li>
<li class="">
View/Edit Tag
</li>
<li class="">
Log Information
</li>
<li class="">
Web Map
</li>
</ul>
<p align="right"> Log-out </p>
</div>
</div>
</div>
<iframe class="menu" src="/map?editable=false" ></iframe>
<iframe id="frame" class="mainContent" src="about:blank"></iframe>
<script type="text/javascript">
$(function(){
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write("<div class='container'> <div class='content'> <div class='row'> <div class='span14'>
<p align="right"> Logged in as: <b>user1</b> </p>
<h1> Add Tag </h1>
<form action="/addTag" method="POST" id="form" onsubmit="return checkDuplicates(this);">
<fieldset>
<legend>Add Tag</legend>
<div class="clearfix " id="name_field">
<label for="name">Name</label>
<div class="input">
<input type="text" id="name" name="name" value="" >
<span class="help-inline"></span>
<span class="help-block">Maximum length: 100, Required</span>
</div>
</div>
<div class="clearfix " id="notes_field">
<label for="notes">Impact Analysis Notes</label>
<div class="input">
<textarea id="notes" name="notes" ></textarea>
<span class="help-inline"></span>
<span class="help-block">Maximum length: 200</span>
</div>
</div>
</fieldset>
<fieldset>
<legend>Related Tags</legend>
<div id="profiles">
<div id="addMore" class="twipsies well profile">
</div>
<div class="manage">
<a class="addProfile btn success" id="addRT">Add related tag</a>
</div>
</div>
</fieldset>
<div class="actions">
<input type="submit" class="btn primary" value="Add Tag">
Cancel
</div>
</form>
<script type="text/javascript" charset="utf-8">
$('.addProfile').live('click', function(e) {
var template = $('.profile_template')
template.before('<div class="twipsies well profile">' + template.html() + '</div>')
renumber()
})
$('#form').submit(function() {
$('.phone_template').remove()
$('.profile_template').remove()
})
var renumber = function(phones) {
$('.profile').each(function(i) {
$('input', this).each(function() {
$(this).attr('name', $(this).attr('name').replace(/relatedTags\[.+?\]/g, 'relatedTags[' + i + ']'))
})
})
}
</script>
</div> </div> </div> </div>');
doc.close();
});
</script>
</body>
</html>
What happens is a syntax error because the #content is also an HTML. The quotation marks are messed up. Please help me. Thank you so much.
Well, you use jQuery is a tag... so I'll use a jQuery :)
What about:
$('#frame').contents().find('body').append('<div>your content</div>');
Or:
$('#frame').contents().find('body').html('<div>your content</div>');
Difference between the both examples?
.append(): http://api.jquery.com/append/
.html() : http://api.jquery.com/html/
run your javascript when the page is loaded.
$(function(){
var doc = document.getElementById('frame').contentWindow.document;
doc.open();
doc.write('<div class="container"> <div class="content"> <div class="row"> <div class="span14"> #content </div> </div> </div> </div>');
doc.close();
});
I have a upload-file-form in home.php. When a file is uploaded successfully the home.php loads the upload.php where I have a form there the user can write the information about the mp3 file, info like artist name and things like that. I want to implement the Autocomplete script by jQuery. But the autocomplete don't work when it get loaded through javascript code but it work when I visit the page upload.php. What can be the problem?
Home.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="src/script.js" type="text/javascript" charset="iso-8859-6"></script>
</head>
<body style="margin-top:-60px;">
<form id="upload_form" enctype="multipart/form-data" method="post" action="upload.php">
<div>
<input class="ufile" type="file" name="ufile" id="ufile" accept="audio/*" onchange="loadFile(this)" />
<input type="button" class="button" id="upload_button" value="ارفع ملف صوتي" onclick="inputCheck()" />
</div>
</form>
<div style="padding:0px 10px 0px 10px;">
<div id="upload_response"></div>
</div>
</body>
</html>
Upload.php
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-6">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function () {
var availableTags = ["html", "php"];
$("#artistInput").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form name="saveForm" action="upload.php" method="post" onSubmit="return(infoCheck(this))">
<input class="uploadinput" style="width:430px;" name="artist" id="artistInput">
<input type="submit" class="button" style="color:white;margin-left:5px;width:160px;background:url(images/red_gradient.jpg)" value="حفظ" name="saveInfo" />
<input type="reset" class="button" style="color:black;width:168px;background:url(images/yellow_gradient.jpg)" value="إعادة تعيين">
</form>
</div>
</body>
</html>
Script.js
function uploadFinish(e) { // upload successfully finished
var oUploadResponse = document.getElementById('upload_response');
oUploadResponse.innerHTML = e.target.responseText;
oUploadResponse.style.display = 'block';
$("#upload").animate({
height: '765px'
}, 350);
$('#errormessage').slideUp('fast');
}
You're executing the script before the DOM element is ready.
You can do several different things to solve it, for example:
Load your script at the bottom of the page
Move your script inside document ready event, so the DOM element is available
$(document).ready(function() { -your script here- });
you can use ajax to use auto complete type plug-in..
<style>
label._tags {
padding:5px 10px;
margin:0px;
border:solid thin #ccc;
border-radius:3px;
display: inline-block;
}
label._tags span {
padding:2px 10px;
margin: 0px 10px;
color:#FFF;
border-radius:700px;
font-family:"calibri",verdana,serif;
background-color:teal;
}
</style>
<script type="text/javascript">
var request;
var tag=new Array();
function getXMLObject(){
if(window.XMLHttpRequest){
return(new XMLHttpRequest);
}else if(window.ActiveXObject){
return(new ActiveXObject("Microsoft.XMLHttp"));
}else{
return (null);
}
}
function getCategory(){
var address="Ajax_testing";
request=getXMLObject();
var data=document.getElementById("multitag").value;
var nwadd=address+"?text="+data;
request.onreadystatechange=showResultsubject;
request.open("GET",nwadd,true);
request.send();
}
function close()
{
var y=document.getElementById("p");
var myNode = document.getElementById("p");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
y.setAttribute("style","dispaly:none;");
}
function removetag(id)
{
var y=document.getElementById("l");
var z=document.getElementById(id.substr(3));
tag.pop();
y.removeChild(z);
}
function gettag(id){
tag.push(id);
var f="";
for (var i=0;i<tag.length;i++)
{
var s="<label class='_tags' id='"+tag[i]+"'>"+tag[i]+"<span><a id='tag"+tag[i]+"' onclick='removetag(this.id)'>X</a></span> </label>";
f=f.concat(s);
}
document.getElementById("l").innerHTML=f;
}
<tr>
<td>Keyword :
</td>
<td><input type="text" id="multitag" name="multitag" onkeyup="getCategory()" onclick="close()">
<div id="l">
</div>
<div id="p" style="display: none;z-index:11;" >
</div>
</td>
</tr>
THIS IS META.PHP . I AM JUST PASSING SESSION VALUE USING JAVA SCRIPT
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script src="./js/jquery.js"></script>
<script src="./js/laddubox.js"></script>
<script src="./js/pop.js"></script>
<script src="./js/jquery.js"></script>
<script type="text/javascript">
var page = "<?php echo $_SESSION['pa'] ?>";
</script>
<title><?=$title?></title>
</head>
THIS IS A POP-UP IN JS . NOW I WANT THE SESSION VALUE IN THIS POP-UP AND I HAVE CREATED THE HIDDEN INPUT FIELD TO PASS THE VALUE TO ANOTHER PAGE
function sin() {
var lbox = new LadduBox();
lbox.init({
"width": 500,
"height": 300,
"HTML": '<div style="width:495px; height:272px; background-color:#ffffff; border:2px solid orange;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="485" height="270" style="font-family:arial; font-size:20px; font-weight:bold;"><tr><td align="right" colspan="3"><img src="images/untitled-1.png" style="margin:10px; cursor:pointer;" id="btnClose"/></td></tr><tr><td height="30" colspan="3"><div style="font-family:arial; font-size:20px; color:#ff6c00; padding-left:200px;">SIGN IN</div></td></tr><tr><td><form method="get"><div style="margin:10px; font-size:14px;">EMAIL<br><input type="text" name="email"/></div><br><div style="margin-left:10px; margin-top:-10px; font-size:14px;">PASSWORD<br><input type="hidden" name="page" value=""/><input type="text" name="paswrd"/></div><br><input type="submit" value="submit" class="subbg"/></form></td><td><img src="images/orbar.png" /></td><td align="center"><img src="images/redfb.png" style="margin-bottom:7px;"/><br><img src="images/redgoogle.png" style="margin-bottom:7px;"/><br><img src="images/redtwitter.png" /></td></tr></table></div>',
'btnCloseId': '#btnClose'
});
lbox.fire();
}
SO PLEASE IF ANYONE KNOWS THE ANSWERE PLEASE HELP ME
You have this HTML snippet:
<input type="hidden" name="page" value=""/>
Just insert PHP value there as:
<input type="hidden" name="page" value="<?php echo $_SESSION['pa'] ?>"/>
Is it as simple as you are just missing the semicolon at the end of the php statement?
var page = "";
So I am designing a website for myself, which takes a user input from the user through a form, searches for the same in database , and returns the expected output.
Below shown is my HTML Code for the same.
<%# page import="java.sql.*"%>
<%# include file="DBConn.jsp" %>
<%# page import = "java.sql.*"%>
<%
String ID,time,result,obj;
Statement stmt,stmt2;
ResultSet rs;
String SQL="";
String k="key";
String w="wallet";
String p="pen";
String a="atm";
ID="";
time="";
result="";
String save=request.getParameter("bSave");
String delete=request.getParameter("BDelete");
String search=request.getParameter("BSearch");
stmt = con.createStatement();
if (search!=null)
{
obj=request.getParameter("ID");
if(obj.equals(k))
{
ID="05447646";
}
else if(obj.equals(w))
{
ID="05447647";
}
else if(obj.equals(p))
{
ID="05447649";
}
else if(obj.equals(a))
{
ID="05447650";
}
rs=stmt.executeQuery("Select * from tablename1 where ID='"+ ID +"'");
while(rs.next()) {
ID=rs.getString("ID");
time=rs.getString("time"); }
}
%>
<!DOCTYPE HTML>
<html>
<head>
<title>Intelli-Track Search Interface</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="1.css" rel="stylesheet" />
<style type="text/css">
#Head1{
position: absolute;
width: 100%;
top: 126px;
visibility: visible;
left: 4px;
}
#tab1 {
position: absolute;
width: 780px;
height: 408px;
z-index: 1;
left: 1px;
top: 272px;
right: auto;
}
#apDiv1 {
position: absolute;
width: 403px;
height: 408px;
z-index: 1;
left: auto;
top: 200px;
right: -1px;
}
.center1 {
text-align: center;
}
#apDiv1 .indent-1 {
text-align: center;
font-size: 44px;
}
#apDiv1 p {
text-align: center;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop,1000px"></script>
<script src="js/init.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#login_frm").submit(function(){
//remove previous class and add new "myinfo" class
$("#msgbox").removeClass().addClass('myinfo').text('Validating Your Login ').fadeIn(2000);
this.timer = setTimeout(function () {
$.ajax({
url: 'check.jsp',
data: 'un='+ $('#login_id').val() +'&pw=' + $('#password').val(),
type: 'post',
success: function(msg){
if(msg != 'ERROR') // Message Sent, check and redirect
{ // and direct to the success page
$("#msgbox").html('Login Verified, Logging in.....').addClass('myinfo').fadeTo(900,1,
function()
{
//redirect to secure page
document.location='login.jsp?user='+msg;
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Sorry, Wrong Combination Of Username And Password.').removeClass().addClass('myerror').fadeTo(900,1);
});
}
}
});
}, 200);
return false;
});
});
</script>
<noscript>
<link rel="stylesheet" href="css/5grid/core.css" />
<link rel="stylesheet" href="css/5grid/core-desktop.css" />
<link rel="stylesheet" href="css/5grid/core-1200px.css" />
<link rel="stylesheet" href="css/5grid/core-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/structure.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
<!--[if lte IE 7]><link rel="stylesheet" href="css/ie7.css" /><![endif]-->
</head> <body>
<form name="form1" method="post" action="">
</form>
<nav id="nav">
<ul>
<li>Home</li>
<li>About Intelli-Track</li>
<li>Logout</li>
<li>Contact</li>
</ul>
</nav>
<div class="image-centered" id="Head1">
<header> <h1 align="center">Welcome to <strong>Intelli-Track</strong> Search Interface</h1><hr>
</header>
</div>
<div id="tab1">
<table align="center" width="800" style="border:10px solid #d2d2d2">
<tr><th align="center"><h3><u>Object</u></h3></th><th width="234" align="center"><h3><u>Tag-ID</u></h3></th>
<th width="394" align="center"><h3><u>Last Accessed Date and Time</u></h3></th></tr>
<tr></tr>
<tr><td align="center"><script type="text/javascript">
</script>
</td><td align="center"><%=ID%></td>
<td align="center"><%=time%></td>
</tr>
</table>
</div>
<div id="apDiv1">
<p> </p>
<h3 class="indent-1"> <span class="center1">Object Finder</span> </h3>
<form name="form2" width=70% method="post" action="">
<p>
<label for="ID">Enter object to be searched:</label>
</p>
<p>
<input type="text" name="ID" id="IDd">
</p>
<p>
<input name="BSearch" type="submit" class="button-big" value="Search">
</p>
</form>
<p> </p>
</div>
</body>
</html>
This is what the actually page looks like :
So what does this page basically do is , when a user enter a value in the form ( The valid values are pen,key,atm,wallet), it retrieves the last time of the pen access and the TAG_ID, which is already stored in the database. While I can easily retrieve these two values. I do not know how to print the name of the object in the first column "OBJECT", again it should print valid OBJECT (like pen, wallet, atm, key)
What should i put here in this part of the code, to achieve the same. :
<table align="center" width="800" style="border:10px solid #d2d2d2">
<tr><th align="center"><h3><u>Object</u></h3></th><th width="234" align="center"><h3><u>Tag-ID</u></h3></th>
<th width="394" align="center"><h3><u>Last Accessed Date and Time</u></h3></th></tr>
<tr></tr>
<tr><td align="center"><script type="text/javascript">
what goes here ..???
</script>
</td><td align="center"><%=ID%></td>
<td align="center"><%=time%></td>
</tr>
</table>
i have tried using Document.getElementbyID but that doesn't works...!! and yes there's no validation in that too..!!
simply put you want to display the text which was entered in the text-box Object Finder if I am not wrong?
If yes, then you are already retrieving it in the JSP as a string obj=request.getParameter("ID"); so just use <%= obj %> wherever you want to display the value, something like:
<tr>
<td align="center">
<%= obj %>
</td>
...
I have sorted out a solution for the same, I made the database itself to store the object name along with the tag_id's.
So after that i simply retrieved the database value's using the select query, and posted the same in the table.
rs=stmt.executeQuery("Select * from tablename1 where ID='"+ ID +"'");
while(rs.next()) {
obj1=rs.getString("objj");
ID=rs.getString("ID");
time=rs.getString("time"); }
Then print the same using ..!!
<table align="center" width="800" style="border:10px solid #d2d2d2">
<tr><th align="center"><h3><u>Object</u></h3></th><th width="234" align="center"><h3><u>Tag-ID</u></h3></th>
<th width="394" align="center"><h3><u>Last Accessed Date and Time</u></h3></th></tr>
<tr></tr>
<tr><td align="center"><%=obj1%></td><td align="center"><%=ID%></td>
<td align="center"><%=time%></td>
</tr>
</table>
So this solve's my problem.