Example 146: Ajax Tooltip
|
Description: This WebSmart PHP example demonstrates how to create an Ajax-enabled tool-tip.
Position your cursor over a row to view the tooltip:
ODORD, ODLINE, ODITEM, ODPRIC, ODDISC, ODQTY, ODUOM, ODEXTAM
<script type="text/javascript" language="javascript"
src="/websmart/v6.5/javascript/esdiapi009.js"></script>
<script type="text/javascript">
// called from inside the function AJAX_Update:
function Receive_AJAX_Response(mydiv, response )
{
// display the div at the proper position
mydiv.innerHTML = response;
}
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is FireFox.
var IE = document.all?true:false
if (!IE) document.captureEvents(Event.MOUSEMOVE)
document.onmousemove = xl_getMouseXY;
/** Function: xl_getMouseXY
* Purpose: Capture the current x-y coordinates of the mouse and position
* the element to the coordinates.
* @param e - the Event object
*
*/
function xl_getMouseXY(e)
{
var deltaX = 1;
var deltaY = 1;
// grab the x-y pos.s if browser is IE
if (IE) {
startX = event.clientX + document.documentElement.scrollLeft;
startY = event.clientY + document.documentElement.scrollTop;
}
// grab the x-y pos.s if browser is FF
else {
startX = e.pageX;
startY = e.pageY;
}
// position the frame so that its top left corner starts at the tip of the mouse
document.getElementById("result").style.left = (parseInt(startX+deltaX) + "px");
document.getElementById("result").style.top = (parseInt(startY+deltaY) + "px");
}
function rowselect(rowid, itemid)
{
var myurl = "$pf_scriptname";
myurl +="?task=ajaxresp";
myurl +=("&rowno=" + rowid);
myurl +=("&itemno=" + itemid);
mydiv = document.getElementById("result");
mydiv.style.display = "block";
xl_AjaxUpdate(myurl, mydiv, Receive_AJAX_Response);
}
function rowdeselect()
{
document.getElementById("result").style.display = "none";
}
</script>
<style type="text/css">
.resdiv
{
position:absolute;
z-index:999;
border-right: 2px outset #7F9DB9;
border-bottom: 2px outset #7F9DB9;
border-top: 1px solid #7F9DB9;
border-left: 1px solid #7F9DB9;
background-color: white;
width: 300px;
}
table, tr, td
{
font-family: Verdana, Arial, Helvetica;
font-size:11px;
}
</style>
require('/esdi/websmart/v6.6/include/xl_functions001.php');
$options = array('i5_naming' => DB2_I5_NAMING_ON);
global $db2conn;
$db2conn = xl_db2_connect($options);
global $ww_rowno, $ww_itemno;
// Global work fields should be defined here
$rownum = 0;
if(!$db2conn)
{
die('Failed to connect to database!');
}
global $wsnum;
// This code is for the Rate this page section
if (isset($_REQUEST['wsnum']))
{
$wsnum = $_REQUEST['wsnum'];
}
// Check the cookie
if(isset($_COOKIE['wsnumbc']))
{
$wsnum = $_COOKIE['wsnumbc'];
}
else
{
setcookie('wsnumbc', $wsnum);
}
// Global variable for calculated fields
// Global variables should be defined here
// As a default task for this program, execute the display function
if ($pf_task == 'default')
display();
if ($pf_task == 'ajaxresp')
ajax_resp();
/********************
End of mainline code
********************/
function display()
{
// Make all global variables available here
foreach($GLOBALS as $arraykey=>$arrayvalue)
{
global $$arraykey;
}
$query = "select MU_ORDDF.ODORD, MU_ORDDF.ODLINE, MU_ORDDF.ODITEM, MU_ORDDF.ODPRIC,
MU_ORDDF.ODDISC, MU_ORDDF.ODQTY, MU_ORDDF.ODUOM, MU_ORDDF.ODEXTAM
from XL_WEBDEMO/MU_ORDDF
inner join XL_WEBDEMO/MU_ITMF
on MU_ORDDF.ODITEM = MU_ITMF.IMITEM
order by MU_ORDDF.ODORD";
// Fetch rows for page: relative to initial cursor
if (!($stmt = db2_exec($db2conn, $query)))
{
echo "<b>Error ".db2_stmt_error() .":".db2_stmt_errormsg(). "</b>";
die;
}
// Output header
wrtseg("ListHeader");
while ($row = db2_fetch_assoc($stmt) and ($rownum < 9))
{
// set color of the line
xl_set_row_color('altcol1', 'altcol2');
$ODORD = $row["ODORD"];
$ODLINE = $row["ODLINE"];
$ODITEM = $row["ODITEM"];
$ODPRIC = $row["ODPRIC"];
$ODDISC = $row["ODDISC"];
$ODQTY = $row["ODQTY"];
$ODUOM = $row["ODUOM"];
$ODEXTAM = $row["ODEXTAM"];
wrtseg("ListDetails");
$rownum++;
}
// closet the database connection
db2_close($db2conn);
wrtseg("ListFooter");
}
// Process ajax request - return item information if there is a hit
function ajax_resp()
{
// Make all global variables available here
foreach($GLOBALS as $arraykey=>$arrayvalue)
{
global $$arraykey;
}
// retrieve the rowno parameter
if (isset($_REQUEST['rowno']))
$ww_rowno = $_REQUEST['rowno'];
// retrieve the rowno parameter
if (isset($_REQUEST['itemno']))
$ww_itemno = $_REQUEST['itemno'];
$query = "select IMITEM, IMSDESC, IMURL
from XL_WEBDEMO/MU_ITMF
where IMITEM = $ww_itemno";
// Fetch rows for page: relative to initial cursor
if (!($stmt = db2_exec($db2conn, $query)))
{
echo "<b>Error ".db2_stmt_error() .":".db2_stmt_errormsg(). "</b>";
die;
}
$row = db2_fetch_assoc($stmt);
// set color of the line
xl_set_row_color('altcol1', 'altcol2');
//Get the values from $row
$IMITEM = $row['IMITEM'];
$IMSDESC = $row['IMSDESC'];
$IMURL = $row['IMURL'];
wrtseg('AjaxRespDtl');
// closet the database connection
db2_close($db2conn);
}
<div id="result" class="resdiv" style="display:none;"></div>
<tr id="$rownum" onmouseover="rowselect('$rownum','$ODITEM');"
onmouseout="rowdeselect();" class="$pf_altrowclr">
<table align="center">
<tr align="center">
$IMSDESC
</tr>
<tr align="center">
<img src="/wsdemo/musicstore/$IMURL" border="0">
</tr>
</table>
Program Definition: ajax_tooltip.phw Rate This Example
|