Example 146: Ajax Tooltip

Position your cursor over a row to view the tooltip:

'; } PANEL='ListDetails' { DESC='Page body'; ITERATIONS='10'; DETAILS=' '; } PANEL='ListFooter' { DESC='Page footer'; DETAILS='

Order Number	Line Number	Inventory Item Code	Unit Price	Discount Amount	Order Quantity	Extended Amount
$ODORD	$ODLINE	$ODITEM	$ODPRIC	$ODDISC	$ODQTY	$ODEXTAM

Start by creating a new program using the \'SQL Record Listing\' template from any of the PHP template families (Idaho, Lincoln, or MacLeod). Accept all defaults.

When prompted for the files, add MU_ITMF and MU_ORDDF. Select any fields from the file MU_ITMF. Select the following fields from the file MU_ORDDF:

    ODORD, ODLINE, ODITEM, ODPRIC, ODDISC, ODQTY, ODUOM, ODEXTAM

In the program\'s ListHeader HTML segment, add the following Javascript in the header section (between <head> and </head>)

    <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>

In the program\'s ListHeader HTML segment, add the following CSS in the header section (between <head> and </head>)

    <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>

Replace your PHP source code with the following:


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");
}

Add the following code into your PHP source:

    
// 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);   
    
}

Add this div to the ListFooter HTML segment above the </body> tag.

    <div id="result" class="resdiv" style="display:none;"></div>

In the program\'s ListDetails HTML segment, find the line:
```
    <tr class="$pf_altrowclr">
    
```
and replace it with the following:

    <tr id="$rownum" onmouseover="rowselect(\'$rownum\',\'$ODITEM\');" 
    onmouseout="rowdeselect();" class="$pf_altrowclr">

Create a new html segment named AjaxRespDtl and copy the following code into it.

    
    <table align="center">
      <tr align="center">
        $IMSDESC
      </tr>
      <tr align="center"> 
        <img src="/wsdemo/musicstore/$IMURL" border="0">
      </tr>
    </table>

Compile and run your program.

Program Definition: ajax_tooltip.phw

Rate This Example

Did this example help you to achieve your goal?	Yes	No	Don\'t Know

Enter additional comments below. If you want to hear back from us, include your contact information.