Googled before posting. Did not found up-to-date information. Last problem recorded back in 2011, which suggested to use appendTo in the css considering the answer was based on the version of primefaces in 2011, I checking the documentation on the showcase and did not found anything regarding that. Made a blank .xhtml to check if something is wrong with primefaces or my code. Surprise, it works fine on the blank .xhtml just copied everything in the show case. (url: http://www.primefaces.org/showcase/ui/overlay/dialog/basic.xhtml ) use the Modal example, you can find it at the end of the code. Simple copy paste does not seem to work.
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<link href="css/imgareaselect-animated.css" rel="stylesheet"
type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.min.js" />
<script type="text/javascript"
src="scripts/jquery.imgareaselect.pack.js" />
<script type="text/javascript">
function preview(img, selection)
{
if (!selection.width || !selection.height)
return;
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
$(function ()
{
$('#photo').imgAreaSelect(
{
onSelectChange: preview
});
});
function teste() {
alert( document.getElementById('x1').value );
}
</script>
</h:head>
<h:body>
<div class="title">
<p:outputLabel>Psiengine interactive office</p:outputLabel>
</div>
<form action="index3.html" onsubmit="teste()" method="post">
<div>
<img id="photo" src="images/office.png" />
</div>
<div id="container">
<table style="margin-top: 1em;">
<thead>
<tr>
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
Coordinates
</th>
<th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
Dimensions
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 10%;">
<b>X<sub>1</sub>:
</b>
</td>
<td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
<td style="width: 20%;"><b>Width:</b></td>
<td><input type="text" value="-" id="w" /></td>
</tr>
<tr>
<td>
<b>Y<sub>1</sub>:
</b>
</td>
<td><input type="text" id="y1" value="-" /></td>
<td><b>Height:</b></td>
<td><input type="text" id="h" value="-" /></td>
</tr>
<tr>
<td>
<b>X<sub>2</sub>:
</b>
</td>
<td><input type="text" id="x2" value="-" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<b>Y<sub>2</sub>:
</b>
</td>
<td><input type="text" id="y2" value="-" /></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<h:panelGrid columns="1" cellpadding="5">
<p:commandButton value="Modal" type="button" onclick="PF('dlg2').show();" />
</h:panelGrid>
<p:dialog header="Modal Dialog" widgetVar="dlg2" modal="true" height="100">
<h:outputText value="This is a Modal Dialog." />
</p:dialog>
</form>
</h:body>
</html>
