on click show Iframe - java
I have a map that you can click on locations to get information for that area and I would like to show that information in a Iframe on the same page when clicked
My page has this for the link now
`<AREA SHAPE="CIRCLE" COORDS="555,142,6" HREF="http://www.Page.com" TITLE="" />`
Any suggestions
The beauty of AJAX is that you don't really need an IFRAME to do this.
You've got a server that will return to you information about a certain area. Each of the AREA tags simply needs an onclick attribute that calls a JavaScript function to retrieve that information and display it in a location you set aside on your page.
Here is a sample HTML page that will retrieve information from the server using AJAX
<html>
<head>
<script type="text/javascript">
function getAreaInfo(id)
{
var infoBox = document.getElementById("infoBox");
if (infoBox == null) return true;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.status != 200) alert(xhr.status);
infoBox.innerHTML = xhr.responseText;
};
xhr.open("GET", "info.php?id=" + id, true);
xhr.send(null);
return false;
}
</script>
<style type="text/css">
#infoBox {
border:1px solid #777;
height: 400px;
width: 400px;
}
</style>
</head>
<body onload="">
<p>AJAX Test</p>
<p>Click a link...
Area One
Area Two
Area Three
</p>
<p>Here is where the information will go.</p>
<div id="infoBox"> </div>
</body>
</html>
And here is the info.php that returns the information back to the HTML page:
<?php
$id = $_GET["id"];
echo "You asked for information about area #{$id}. A real application would look something up in a database and format that information using XML or JSON.";
?>
Hope this helps!
Related
JSON data not loading into Google Charts Geo Map Visual
I am trying to pass a JSON file into a Google Charts Geo Map but nothing is return after running the script.
Here is the JSON for states and the amount of orders (orders.json):
{"columns":["state","orders"],"data":[["US-SC",245],["US-CA",2866],["US-MD",411],["US-VA",552], ["US-CO",390],["US-NY",1529],["US-FL",1534],["US-TX",1588],["US-ID",76],["US-CT",275],["US-PA",926],["US-WV",88],["US-HI",141],["US-NJ",833],["US-MI",507],["US-KS",158],["US-WA",476],["US-MN",289],["US-OH",682],["US-GA",574],["US-KY",209],["US-WI",282],["US-IL",866],["US-OK",170],["US-MA",643],["US-RI",85],["US-NC",536],["US-MS",103],["US-OR",207],["US-AZ",382],["US-NV",168],["US-TN",374],["US-AR",131],["US-AL",233],["US-MO",353],["US-WY",14],["US-IA",143],["US-IN",300],["US-LA",237],["US-ME",65],["US-AK",44],["US-UT",134],["US-ND",44],["US-NE",105],["US-BC",29],["US-MT",52],["US-DE",68],["US-SD",31],[null,91],["US-ON",69],["US-DC",68],["US-Jersey",1],["US-Taipei",1],["US-NH",89],["US-VI",5],["US-NM",63],["US-Dubai",5],["US-AB",22],["US-AP",8],["US-Wan Chai",1],["US-VT",18],["US-AE",11],["US-West Midlands",2],["US-Stafford",1],["US-Glos",1],["US-QC",19],["US-SK",4],["US-VIC",8],["US-London",3],["US-QLD",5],["US-Nottinghamshire",1],["US-England",11],["US-NRW",2],["US-PR",15],["US-Kwun Tong",1],["US-Isle of Wight",1],["US-NSW",14],["US-N\/A",3],["US-CORK",1],["US-Oxfordshire",1],["US-MEX",1],["US-NT",1],["US-Guam",1],["US-Powys",1],["US-NS",9],["US-NB",1],["US-Tenessee",1],["US-AS",1],["US-BAYERN",1],["US-Co. Dublin",2],["US-Central and Western",3],["US-MB",3],["US-Tamuning",1],["US-Kowloon City",1],["US-PE",1],["US-COUNTY DURHAM",1],["US-3892",1],["US-GU",2],["US-ALICANTE",1],["US-Cambridgeshire",1],["US-AA",1],["US-WEST GLAMORGAN",1],["US-Warwickshire",1],["US-Gelderland",1],["US-NL",3],["US-Gujarat",2],["US-Tokyo",1],["US-MOR",1],["US-Abu Dhabi",1],["US-Co. Clare",1],["US-West lothian",1],["US-Worcestershire",1],["US-Northamptonshire",1],["US-Essex",1],["US-PI",1],["US-Z\u00fcrich",1],["US-Merseyside",2],["US-Durham",1],["US-Co. Kildare",2],["US-Hamilton",1],["US-TO",2],["US-Buenos Aires",1],["US-Lagos",1],["US-Greater London",1],["US-Shetland Islands",1],["US-HK",1],["US-Co. Waterford",1],["US-SA",2],["US-West Yorkshire",1],["US-3906",1],["US-Surrey",1],["US-FM",1],["US-Warrington",1],["US-ACT",1],["US-BW",1],["US-PUE",1],["US-Ash Sh\u0101riqah",1],["US-Co. Kerry",1]]}
Here is the script for creating the Geo Map:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
google.charts.load('visualization', '1', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawStatesMap);
function drawStatesMap() {
var jsonData = $.ajax({
data: 'orders.json',
dataType: "json"
success: function(json) {
console.log(jsonData);
}
}).responseText;
var statesData = google.visualization.DataTable(jsonData);
// var statesData = google.visualization.DataTable(jsonData);
var chart = google.visualization.GeoChart(document.getElementById('chart_div'));
var options = {region: 'US', resolution: 'provinces'};
var dimension = "orders";
chart.draw(statesData, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
I was expecting to have an interactive Google Geo Map but nothing is returned to Google CHrome when running the above script.
text field name should be unique
I am working on a project where the client's requirement is to add a dynamic text box. I made the dynamic text box but I'm not getting the unique name of the text box.
Here is my code:
<script type="text/javascript">
function addfieldset() {
var namefieldset = document.getElementById("name").cloneNode(true);
document.getElementById("names").appendChild(namefieldset);
}
function deletefieldset(e) {
var namefieldset = e.parentNode;
namefieldset.parentNode.removeChild(namefieldset);
}
</script>
<body>
<%! public static int i = 1;%>
<% if (i > 0) { %>
<div id="names"><div id="name"><% out.print(i);%>Name: <input name="namefield<%= i%>" type="text"/>delete</div></div>
<input id="addnamebtn" type="button" value="Add Name" onclick="addfieldset()"/>
<% i++;
}%>
</body>
You are mixing two different codes. The key is to realize, where and when each code is executed - JSP on the server when the page is requested and rendered (i.e. before the response is sent to the browser) and Javascript in the browser, after the browser receives the already generated response. I.e. you have to change the name of the new text field in the addfieldset() function (which means you have to have a counter, how many text fields there already is).
The java code in scriptlet is executed on the server side. Hence, cloning it again through Javascript will not execute the scriptlet again.
An another approach of what you are trying to achieve will be to store the count variable in javascript.
var count = 1;
function addfieldset() {
count++;
var namefieldset = document.getElementById("name").cloneNode(true);
var textField = namefieldset.getElementsByTagName('input')[0];
textField.setAttribute("name", "namefield" + count);
textField.value = "";
document.getElementById("names").appendChild(namefieldset);
}
function deletefieldset(e) {
var namefieldset = e.parentNode;
namefieldset.parentNode.removeChild(namefieldset);
}
<body>
<div id="names">
<div id="name">
<span>Name:</span>
<input name="namefield1" type="text" />
delete
</div>
</div>
<input id="addnamebtn" type="button" value="Add Name" onclick="addfieldset()" />
</body>
try this JavaScript and HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
var i = 0;
function generateRow() {
i++;
var d = document.getElementById("div");
d.name = "food";
d.innerHTML += "<p>name"+i+" :<input type='text' name='name" + i + "' /> <a href='#' onclick='deletefieldset(this)'>delete</a></p>";
}
function deletefieldset(e) {
var namefieldset = e.parentNode;
namefieldset.parentNode.removeChild(namefieldset);
}
function onLoad() {
generateRow();
}
window.onload = onLoad;
</script>
<body>
<div id="div"></div>
<p>
<input type="button" id="addnamebtn" value="Add Name" onclick="generateRow()" />
</p>
</body>
</html>
How to Capture Image using Web Camera in JSP only (Without using Servlet) and save it into MS SQL Server
I want to capture the image using web camera and store it into MS SQL Server database.
I am able to capture the image using web camera but right now i am trying to pass the image to next page but could not get the image on next jsp to process the image.
Code to capture image
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Web camera - Testing</title>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function () {
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = {"video": true},
errBack = function (error) {
console.log("Video capture error: ", error.code);
};
// Put video listeners into place
if (navigator.getUserMedia) { // Standard
navigator.getUserMedia(videoObj, function (stream) {
video.src = stream;
video.play();
}, errBack);
} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function (stream) {
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if (navigator.mozGetUserMedia) { // WebKit-prefixed
navigator.mozGetUserMedia(videoObj, function (stream) {
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
// Trigger photo take
document.getElementById("snap").addEventListener("click", function () {
context.drawImage(video, 0, 0, 213, 160);
document.getElementById('canvasImg').src = canvas.toDataURL("image/png");
// document.getElementById('video').style.display = "none"; // hide the live image video portin after click on take picture
});
}, false);
</script>
</head>
<body>
<h1>Capture Image using Camera!</h1>
<!--
Ideally these elements aren't created until it's confirmed that the
client supports video/camera, but for the sake of illustrating the
elements involved, they are created with markup (not JavaScript)
-->
<video id="video" width="213" height="160" autoplay></video>
<button id="snap">Capture Photo</button>
<form action="savetesting.jsp" method="post">
<canvas id="canvas" width="213" height="160" name="ImageFile1" style="display: none;"></canvas>
<img id="canvasImg" name="ImageFile"><img>
<input type="reset" value="Reset"/>
<input type="submit" value="Submit"/>
</form>
</body>
</html>
but now i am trying to get the captured image using
request.getParameter("ImageFile");
but could not succeed.
Please help me out with this issue, How to get the image on next page then i will try to save the image in MS SQL Server Database but only using JSP (without using Servlet).
Neither canvas nor img are form input fields, even when placed inside form tag. Add
<input type="hidden" name="ImageData" id="ImageData" />
to your form, and
document.getElementById('ImageData').value = canvas.toDataURL("image/png");
to the click event handler of the snap button.
Then, in JSP, get the image data (in the data URI format) using
String imageData = request.getParameter("ImageData");
and process them using javax.xml.bind.DatatypeConverter as described in Convert DataURL image to image file in java
How to run a child window java script function in parent window after changing the url in the parent window?
I want to execute the java script function of a child window on parent window, Even after changing the URL in the parent window.
I tried like below:
**Parent.html:**
<html>
<head>
<title>Parent window document</title>
</head>
<body>
<script type="text/Javascript">
function openChildWindow()
{
var s_url = "child.html";
var s_name = "ChildWindowDocument";
var s_specs = "resizable=yes,scrollbars=yes,toolbar=0,status=0";
var childWnd = window.open(s_url, s_name, s_specs);
var div = childWnd.document.getElementById("child_wnd_doc_div_id");
div.innerHTML = "Hello from parent wnd dddsfds";
}
</script>
<input type="button" value="Open child window document" name="sss" onclick="openChildWindow()" />
<div>Click me: nothing will happen.</div>
<div id="aaa" class="yourclass">
<p>This is a paragraph with a <span>span</span> where the paragraph's container has the class. Click the span or the paragraph and see what happens.</p>
This sentence is directly in the div with the class rather than in child element.
</div>
<div>Nothing for this div.</div>
<a>dsfsd</a>
</body>
</html>
**child.html:**
<html>
<head>
<title>Parent window document</title>
<script>
opener.document.body.onclick = function(e) {
var sender = (e && e.target) || (window.parent.event && window.parent.event.srcElement);
document.getElementById("id").value=sender.tagName;
}
</script>
</head>
<body>
<div id="child_wnd_doc_div_id">child window</div>
ID: <input type="text" id="id"/><br/>
Name: <input type="text" id="id"/><br/>
Xpath: <input type="text" id="id"/><br/>
CSS: <input type="text" id="id"/><br/>
</body>
</html>
Clearly, my concept is: I want to execute the child window function after changing the url in the parent window.
The only way I see: observe the unload-event of the opener. When it fires, try(after a short timeout) to reassign the onclick-function(and also the onunlad-function). Of course this will only work when both documents are placed under the same domain.
Initialize JavaScript variable with java
Can we initialize JavaScript variables with java in jsp page?
like,
<script type="text/javascript">
var refreshId = setInterval(function() {
var nv=<% out.print(num_voted); %>;
var tv=<%out.print(totalvoted); %>;
var m=<% out.print(month);%>;
var y=<% out.print(year);%>;
alert("refreshed");
$('#alertmessagebox').text("Total members voted "+nv+" out of "+tv+" for "+m+" " +y);
}, 9000);
$.ajaxSetup({ cache: false });
</script>
Code is not working as expected. :(
Is there way to do this? Why it is not possible by this way? shall we need to create header to do this?
Here is an example of setting Javascript variables in a JSP.
<head>
<%
String numVotedStr = request.getParameter("numvoted");
int numVoted = 0;
if (numVotedStr != null) {
numVoted = Integer.parseInt(numVotedStr);
}
%>
<script type="text/javascript">
function setInterval() {
alert("hello " + <%= numVoted %>);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="setInterval()" value="Press Me"/>
</form>
</body>
</html>
To test, use the appropriate version of this URL:
http://localhost:8080/sandbox/example.jsp?numvoted=99
This will popup an alert box with the integral value of "numvoted" on the HTTP request, by producing an HTML page where the value is initialized in Javascript. (The code should have at least a try-catch for the parseInt() call, but this will serve as simple example.)