Solved

Create call out box with ajax using php/mysql/dropdown

Posted on 2009-05-11
65
2,099 Views
Last Modified: 2013-12-12
I create a dropdown box from mysql db using php code.  When a selection is made a list of categories is displayed from db.  When I mouseover each category I need to call out the name/address/etc... from the db.  Code is below, but getting errors when using ajax_showTooltip.
if($count == 0)

 	{	

		echo "<td width='33%'>";

		echo "<a href=\"#\"  onmouseover=\"ajax_showTooltip('demo-pages/ajax-tooltip.php?id=".$row["cat_id"]."',this);return false\" onmouseout=\"ajax_hideTooltip()\">".$row["comp_name"]."</a>";

		echo "</td>";

 		//echo  $row['desc'] . "<br>";

 		//echo  $row['address'] . "<br>";

		//echo  $row['city'].", ";

		//echo  $row['state']." ";

		//echo  $row['zip_code'] . "<br>";

 		//echo  $row['phone_num'] . "<br>";

 		//echo "<a target='_blank' href=" . $row['url'] . ">".$row['url']."</a><br>";

 		//echo "<a href=mailto:" . $row['email'] . ">".$row['email']."</a><br>";

 		//echo  $row['contact_name'] . "</td>";

		$count++;

	}

Open in new window

0
Comment
Question by:shjani
  • 34
  • 31
65 Comments
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
I think you may be going to extra trouble trying to solve this with AJAX.  If the tool tip you want to show is just text, consider using the title property of your <td> tag.  Now I'm just guessing what that would look like in your example, but take a look at the code below.  This will produce a little yellow tool tip box whenever you mouseover the comp_name text, disappearing when you mouseout.  New line characters are fine, though you'll need to be careful with your apostrophes and quotation marks.  And I think the title property is fairly browser compatible.

If this won't work for your purposes, could you please post your actual ajax_showTooltip() and ajax_hideTooltip() functions for us to see?  There's not much advice we can offer without seeing them. :-)





$toolTipText = $row['desc']."\n";

$toolTipText .= $row['address']."\n";

$toolTipText .= $row['city']."\n";

$toolTipText .= $row['state']."\n";

$toolTipText .= "etc. etc. etc.\n";
 

echo "<td width='33%' title='$toolTipText'>";

echo $row["comp_name"];

echo "</td>";

Open in new window

0
 

Author Comment

by:shjani
Comment Utility
It would work, however, I need the call out box to stick so that a client can click on the Web site & email link.  

Here's the code:

function ajax_showTooltip(e,externalFile,inputObj)
{
      currentTooltipObject = inputObj;
      //window.onresize = function(e) { ajax_positionTooltip(e); } ;
   if(document.all)e = event;

   
      if(!ajax_tooltipObj)      /* Tooltip div not created yet ? */
      {
            ajax_tooltipObj = document.createElement('DIV');
            ajax_tooltipObj.style.position = 'absolute';
            ajax_tooltipObj.id = 'ajax_tooltipObj';            
            
            document.body.appendChild(ajax_tooltipObj);

            
            var leftDiv = document.createElement('DIV');      /* Create arrow div */
            leftDiv.className='ajax_tooltip_arrow';
            leftDiv.id = 'ajax_tooltip_arrow';
            ajax_tooltipObj.appendChild(leftDiv);
            
            var contentDiv = document.createElement('DIV'); /* Create tooltip content div */
            contentDiv.className = 'ajax_tooltip_content';
            ajax_tooltipObj.appendChild(contentDiv);
            contentDiv.id = 'ajax_tooltip_content';
            contentDiv.style.marginBottom = '15px';
            
            // Creating button div
            var buttonDiv = document.createElement('DIV');
            buttonDiv.style.cssText = 'position:absolute;left:50%;bottom:20px;text-align:center;background-color:#FFF;font-size:0.8em;height:15px;z-index:10000000';
            buttonDiv.innerHTML = '<a href="#" onclick="ajax_hideTooltip();return false">Close</a>';
            ajax_tooltipObj.appendChild(buttonDiv);

            if(ajax_tooltip_MSIE){      /* Create iframe object for MSIE in order to make the tooltip cover select boxes */
                  ajax_tooltipObj.style.cursor = 'move';
                  ajax_tooltipObj_iframe = document.createElement('<IFRAME frameborder="0">');
                  ajax_tooltipObj_iframe.style.position = 'absolute';
                  ajax_tooltipObj_iframe.border='0';
                  ajax_tooltipObj_iframe.frameborder=0;
                  ajax_tooltipObj_iframe.style.backgroundColor='#FFF';
                  ajax_tooltipObj_iframe.src = 'about:blank';
                  contentDiv.appendChild(ajax_tooltipObj_iframe);
                  ajax_tooltipObj_iframe.style.left = '0px';
                  ajax_tooltipObj_iframe.style.top = '0px';
            }            
      }
      // Find position of tooltip
      ajax_tooltipObj.style.display='block';
      ajax_loadContent('ajax_tooltip_content',externalFile);
      if(ajax_tooltip_MSIE){
            ajax_tooltipObj_iframe.style.width = ajax_tooltipObj.clientWidth + 'px';
            ajax_tooltipObj_iframe.style.height = ajax_tooltipObj.clientHeight + 'px';
      }

      
      ajax_positionTooltip(e,inputObj);
}


function ajax_hideTooltip()
{
      ajax_tooltipObj.style.display='none';
}

0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Do you mind posting also the text of the errors you're receiving?  Sorry, I should have asked for this last time.  Thanks!
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Did you write this code yourself, or did you copy it from somewhere else?  This doesn't appear to be everything, for one thing, you've got variables here like ajax_tooltip_MSIE that are never defined, which will definitely kick up an error.  There's also a call to ajax_positionTooltip(), a function which is never defined.  Finally, I don't know that even ajax_loadContent() is a standard AJAX function call.  I may be wrong, but it looks like we're missing a lot of code here.
0
 

Author Comment

by:shjani
Comment Utility
I didn't write the code.  Basically I'm a newbie at ajax and was looking at a way to achieve what I needed done.  There might be an easier way.  I basically need a call out for each company name that has their company & contact information.  Also I need the call out to "stick" in order to be able to get to their web site and/or email address link.
0
 

Author Comment

by:shjani
Comment Utility
Here's the total file, I only sent you parts of it.
/* Custom variables */
 

/* Offset position of tooltip */

var x_offset_tooltip = 5;

var y_offset_tooltip = 0;
 

/* Don't change anything below here */
 
 

var ajax_tooltipObj = false;

var ajax_tooltipObj_iframe = false;
 

var ajax_tooltip_MSIE = false;

if(navigator.userAgent.indexOf('MSIE')>=0)ajax_tooltip_MSIE=true;
 
 
 

var currentTooltipObject = false;
 

function ajax_showTooltip(e,externalFile,inputObj)

{

	currentTooltipObject = inputObj;

	//window.onresize = function(e) { ajax_positionTooltip(e); } ;

   if(document.all)e = event;
 

   

	if(!ajax_tooltipObj)	/* Tooltip div not created yet ? */

	{

		ajax_tooltipObj = document.createElement('DIV');

		ajax_tooltipObj.style.position = 'absolute';

		ajax_tooltipObj.id = 'ajax_tooltipObj';		

		

		document.body.appendChild(ajax_tooltipObj);
 

		

		var leftDiv = document.createElement('DIV');	/* Create arrow div */

		leftDiv.className='ajax_tooltip_arrow';

		leftDiv.id = 'ajax_tooltip_arrow';

		ajax_tooltipObj.appendChild(leftDiv);

		

		var contentDiv = document.createElement('DIV'); /* Create tooltip content div */

		contentDiv.className = 'ajax_tooltip_content';

		ajax_tooltipObj.appendChild(contentDiv);

		contentDiv.id = 'ajax_tooltip_content';

		contentDiv.style.marginBottom = '15px';

		

		// Creating button div

		var buttonDiv = document.createElement('DIV');

		buttonDiv.style.cssText = 'position:absolute;left:50%;bottom:20px;text-align:center;background-color:#FFF;font-size:0.8em;height:15px;z-index:10000000';

		buttonDiv.innerHTML = '<a href="#" onclick="ajax_hideTooltip();return false">Close</a>';

		ajax_tooltipObj.appendChild(buttonDiv);
 

		if(ajax_tooltip_MSIE){	/* Create iframe object for MSIE in order to make the tooltip cover select boxes */

			ajax_tooltipObj.style.cursor = 'move';

			ajax_tooltipObj_iframe = document.createElement('<IFRAME frameborder="0">');

			ajax_tooltipObj_iframe.style.position = 'absolute';

			ajax_tooltipObj_iframe.border='0';

			ajax_tooltipObj_iframe.frameborder=0;

			ajax_tooltipObj_iframe.style.backgroundColor='#FFF';

			ajax_tooltipObj_iframe.src = 'about:blank';

			contentDiv.appendChild(ajax_tooltipObj_iframe);

			ajax_tooltipObj_iframe.style.left = '0px';

			ajax_tooltipObj_iframe.style.top = '0px';

		}		

	}

	// Find position of tooltip

	ajax_tooltipObj.style.display='block';

	ajax_loadContent('ajax_tooltip_content',externalFile);

	if(ajax_tooltip_MSIE){

		ajax_tooltipObj_iframe.style.width = ajax_tooltipObj.clientWidth + 'px';

		ajax_tooltipObj_iframe.style.height = ajax_tooltipObj.clientHeight + 'px';

	}
 

	

	ajax_positionTooltip(e,inputObj); 

}
 

function ajax_positionTooltip(e,inputObj)

{

	if(!inputObj)inputObj=currentTooltipObject;

	if(inputObj){

		var leftPos = (ajaxTooltip_getLeftPos(inputObj) + inputObj.offsetWidth);

		var topPos = ajaxTooltip_getTopPos(inputObj);

	}else{		

	   var leftPos = e.clientX;

	   var topPos = e.clientY;

	}

   var tooltipWidth = document.getElementById('ajax_tooltip_content').offsetWidth +  document.getElementById('ajax_tooltip_arrow').offsetWidth;

   ajax_tooltipObj.style.left = leftPos + 'px';

   ajax_tooltipObj.style.top = topPos + 'px';   

} 
 

function ajax_hideTooltip()

{

	ajax_tooltipObj.style.display='none';

}
 

function ajaxTooltip_getTopPos(inputObj)

{		

  var returnValue = inputObj.offsetTop;

  while((inputObj = inputObj.offsetParent) != null){

  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;

  }

  return returnValue;

}
 

function ajaxTooltip_getLeftPos(inputObj)

{

  var returnValue = inputObj.offsetLeft;

  while((inputObj = inputObj.offsetParent) != null){

  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;

  }

  return returnValue;

}

Open in new window

0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Great.  Can you post the error messages you're receiving please?
0
 

Author Comment

by:shjani
Comment Utility
Line: 1
Character: 1
Error:  Object Expected
Code: 0
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Are you new to JavaScript as well?  Really that's all any of this is... AJAX is simply a functionality built into JavaScript, and most of your code here has to do with creating and positioning <div> tags and their content dynamically.  If you can post the errors you're receiving, that would be very helpful.
Something else you might try...  demo-pages/ajax-tooltip.php is apparently the page that actually displays your tool tip.  Have you tested it all by itself?  Just throw your domain name at the beginning and ?id=X at the end (replacing X with a known ID from your data set), and plug the combined URL into the address bar of your browser.  Does that display the way you're expecting your tool tip to display?
Also, are you sure there's not an ajax_loadContent() function floating around out there somewhere?  That may well be a common name for an AJAX load function, but I really don't think it's a standard function... which means you would need to define it yourself.  (We would know for sure from the errors whether or not this is working.)
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
LOL.  Line 1 character 1 is definitely problematic.  Assuming that the most recent JavaScript you posted was the entire file, and since I haven't seen any obvious parse errors in it, the problem may be in your main PHP file.  Do you feel comfortable posting that code in its entirety?
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
By the way, when your PHP file loads, is your table displaying correctly?  Because your AJAX issues are secondary if the initial page isn't loading right.  And looking back over the code from your initial post, I'm kinda wondering about a few things.  For one, do you mean to say if $count is 0, display all that table cell code?  Or do you mean to say if $count is NOT 0, then display?  For another thing, are you intending to display one row per entry or one cell?  What you've got up top is one cell, and if that's part of a loop... well, it's just unusual to loop through a recordset and display each entry as a separate cell rather than a separate row.  But it may make sense in the context of your PHP script; I just can't know from what I'm seeing.
0
 

Author Comment

by:shjani
Comment Utility
My php page loads fine.  This is called from my index page.  I had it working as a table with 3 columns that remained hidden until the category is selected.  At which time the company names along with contact info were listed below the category dropdown menu.  Now instead of the static rows and columns of the contact information I would like to have that pop out onto the side.  
<?php

$q=$_GET["q"];
 
 

include("includes/connect.inc");
 

$con = mysql_connect($database,$username,$password);
 

if (!$con)

 {

 die('Could not connect: ' . mysql_error());

 }
 

mysql_select_db("engelvanbreene", $con);
 

$sql="SELECT * FROM Suppliers WHERE category = '".$q."'";
 

$result = mysql_query($sql);

echo "<div>";

echo "<table border='0' width='100%'>";

echo "<tr>";

$count = 0;

while($row = mysql_fetch_array($result))

 {

 	if($count == 3)

	{	

		echo "<tr>";

		echo "<td colspan='3'>&nbsp;</td>";

		echo "</tr>";

		echo "<tr>";

		$count = 0;

	}

	

 	if($count == 0)

 	{	

		

		echo "<td width='33%'>";

		echo "<a href=\"#\"  onmouseover=\"ajax_showTooltip('demo-pages/ajax-tooltip.html?id=".$row['cust_id']."',this);return false\" onmouseout=\"ajax_hideTooltip()\">".$row['comp_name']."</a>";

		echo "</td>";

		

	

		

	

 		//echo  $row['desc'] . "<br>";

 		//echo  $row['address'] . "<br>";

		//echo  $row['city'].", ";

		//echo  $row['state']." ";

		//echo  $row['zip_code'] . "<br>";

 		//echo  $row['phone_num'] . "<br>";

 		//echo "<a target='_blank' href=" . $row['url'] . ">".$row['url']."</a><br>";

 		//echo "<a href=mailto:" . $row['email'] . ">".$row['email']."</a><br>";

 		//echo  $row['contact_name'] . "</td>";

		$count++;

	}

	

	else if($count==1)

 	{

		echo "<td width='33%'><span class='title'>" . $row['comp_name'] . "</span></td>";

 		//echo  $row['desc'] . "<br>";

 		//echo  $row['address'] . "<br>";

		//echo  $row['city'].", ";

		//echo  $row['state']." ";

		//echo  $row['zip_code'] . "<br>";

 		//echo  $row['phone_num'] . "<br>";

 		//echo "<a target='_blank' href=" . $row['url'] . ">".$row['url']."</a><br>";

 		//echo "<a href=mailto:" . $row['email'] . ">".$row['email']."</a><br>";

 		//echo  $row['contact_name'] . "</td>";

		$count++;

	}
 

 	else if($count==2)

 	{

		echo "<td width='33%'><span class='title'>" . $row['comp_name'] . "</span></td>";

 		//echo  $row['desc'] . "<br>";

 		//echo  $row['address'] . "<br>";

		//echo  $row['city'].", ";

		//echo  $row['state']." ";

		//echo  $row['zip_code'] . "<br>";

 		//echo  $row['phone_num'] . "<br>";

 		//echo "<a target='_blank' href=" . $row['url'] . ">".$row['url']."</a><br>";

 		//echo "<a href=mailto:" . $row['email'] . ">".$row['email']."</a><br>";

 		//echo  $row['contact_name'] . "</td>";

		 echo "</tr>";

		 $count++;
 

	}

 

 

 

 }

 echo "</tr>";

echo "</table>";

echo "</div>";

mysql_close($con);

?>

Open in new window

0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Nothing jumped out at me as being wrong in your PHP file... but it appears you're still not sending me the whole PHP file.  That's fine if there's proprietary code you don't want to share, but it makes it difficult to help find your error.

On the other hand, if this indeed is the whole file, that would definitely cause a problem.  No where in your code do you reference the JavaScript file that you posted earlier, so your function calls on the mouseover and mouseout events would definitely throw an "object expected" error, because the functions are objects that the browser is expecting (but failing) to find.  I'm not sure what's up with the line number deal, but it could be that you're missing proper <HTML> and <BODY> tags.

Let me know if this is the whole PHP file or not.  If it is, you really should add your <HTML> and <BODY> tags.

Regardless, I feel I should point out that your PHP code as it stands is rather inefficient.  I hope I can say that without coming across as offensive!  Certainly no rancor intended.  However, I've taken the liberty of cleaning it up a bit... because in my mind, the more inefficient the code, the more likely a hard-to-find error is going to slip in.  See my version of your page below.

And one last comment... Having now gotten a look at what you're doing in the page, I would definitely suggest skipping AJAX entirely.  It's a whole lot of work for something that doesn't look like it's necessary.  But I'll post my thoughts on that separately in a few minutes.



<?php
 

$q=$_GET["q"];

  

include("includes/connect.inc");

 

$con = mysql_connect($database,$username,$password);

 

if (!$con) { die('Could not connect: ' . mysql_error()); }

 

mysql_select_db("engelvanbreene", $con);

$sql="SELECT * FROM Suppliers WHERE category = '".$q."'";

$result = mysql_query($sql);

mysql_close($con);
 

?>
 

<div>

<table border='0' width='100%'>
 

<?php while($row = mysql_fetch_array($result)) { ?>
 

  <tr>

	<td width='34%'>

		<a href="#" onmouseover="ajax_showTooltip('demo-pages/ajax-tooltip.html?id=<?php echo $row['cust_id']; ?>',this);return false" onmouseout="ajax_hideTooltip()">

		<?php echo $row['comp_name']; ?></a>

	</td>

	<td width='33%' class='title'><?php echo $row['comp_name']; ?></td>

	<td width='33%' class='title'><?php echo $row['comp_name']; ?></td>

  </tr>
 

  <tr><td colspan='3'> </td></tr>
 

<?php } ?>
 

</table>

</div>

Open in new window

0
 

Author Comment

by:shjani
Comment Utility
No offense taken.  Here's the index.php file.  I use this to populate the dropdown menu and then I use the other file to list the data for the item selected in the dropdown menu.
<?php echo '<?xml version="1.0" encoding="iso-8859-15" ?>'; 

/*took out $servername, $dbname, $dbusername, $dbpassword for privacy reasons...rest same */
 
 

////////////// Do not  edit below/////////
 

connecttodb($servername,$dbname,$dbusername,$dbpassword);

function connecttodb($servername,$dbname,$dbuser,$dbpassword)

{

global $link;

$link=mysql_connect ("$servername","$dbuser","$dbpassword");

if(!$link){die("Could not connect to MySQL");}

mysql_select_db("$dbname",$link) or die ("could not open db".mysql_error());

}
 
 

$sql="SELECT CatID, CatName FROM Categories"; 

$result=mysql_query($sql); 
 

$options=""; 
 

while ($row=mysql_fetch_array($result)) { 
 

    $id=$row["CatID"]; 

    $thing=$row["CatName"]; 

    $options.="<OPTION VALUE=\"$id\">".$thing; 

} 
 

mysql_close($link);
 

?>
 

<!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" xml:lang="en" lang="en">

<head>

<title>ootbox</title>
 

<meta http-equiv="Content-Type" content="text/html; charset =iso-8859-15" />

<meta name="keywords" content="marketing apparel, marketing merchandise, marketing, supplier, distributor," />

<meta name="description" content="Search Engine that provides suppliers of unique marketing merchandise" />

 

<script type="text/javascript" src="ajax-dynamic-content.js"></script>

<script type="text/javascript" src="ajax.js"></script>

<script type="text/javascript" src="ajax-tooltip.js"></script>

<script TYPE="text/javascript" src="selectuser.js"></script>

 

<link rel="stylesheet" href="ajax-tooltip.css" type="text/css" />
 

<link rel="stylesheet" href="style.css" type="text/css" />

<link rel="stylesheet" href="Verdana.css" type="text/css" />

<link rel="stylesheet" href="9f9433085cd21ca5f2d94ce438db82c7.css" type="text/css" />
 
 

<style type="text/css">

<!--

.style7 { color: #687818;}

-->

</style>
 
 

</head>
 

<body>

<table cellpadding="0" cellspacing="0" id="rv_top_adjust_width_0" width="95%" align="center" border="0" height="100%">

	<tr>

	  <td align="left" valign="top" class="bgtop">

<table cellpadding="0" cellspacing="0" width="100%" bgcolor="#000000" height="150">

				<tr>

					<td valign="top"><img src="images/img_01_final.jpg" alt=""  /></td>

					<td width="99%"></td>

					<td colspan="2" valign="top"><img src="images/right.jpg" alt=""/></td>

				</tr>

				<tr><td colspan="5" bgcolor="#CCCCCC">&nbsp;</td></tr>

		  </table>	  </td>

	</tr>

	<tr>

		<td align="left" valign="top" class="bgblack">

			<table cellpadding="0" cellspacing="0" width="100%">

				<tr>

					<td align="left" valign="top" class="bgblack">

						<table cellpadding="0" cellspacing="0" width="100%">

							<tr>

								<td align="left" valign="top" class="bgmenu"><img src="images/img_05.jpg" alt="" width="173" height="8" /></td>

							</tr>

							<?php include("nav.inc"); ?>

							<tr><td><table width="183" height="120" border="0" align="center">

							  <tr><td height="62" colspan="2">&nbsp;</td>

							</tr>

							  </table></td>			

							</tr>

						</table>					</td>

					<td align="left" valign="top" width="99%" bgcolor="#312D1B">

						<table cellpadding="0" cellspacing="0" width="100%">

							 	
 

							<!-- Begin PATHWAY and ICON -->

							<tr>

								<td class="magin">

									<table cellpadding="0" cellspacing="0" width="100%">

										<tr>

											<!-- Begin PATHWAY -->

											<td align="left" width="99%"></td>

											<!-- End PATHWAY -->

											<!-- Begin ICON -->

											<td align="right"><table cellpadding="0" cellspacing="0" width="100%"><tr></tr></table></td>

											<!-- End ICON -->

										</tr>

									</table>								</td>

							</tr>

							<!-- End PATHWAY and ICON -->

							<tr>

								<td align="left" valign="top">

									<table cellpadding="0" cellspacing="0" width="100%">

										<tr>

											<td align="left" valign="top">

												<table cellpadding="0" cellspacing="0" width="100%">

													<tr>																																

														<td align="left" valign="top" class="magin" id="rv_adjust_width_177">
 

<!-- ####### LAYOUT CSS: MODIFY COLOR, FONT AND BOX SIZE HERE BUT DO NOT DELETE. ####### -->
 

<style type="text/css">
 

</style>

<!-- ########################### END CSS LAYOUT ###########################  -->

<table width="100%" height="228" cellpadding="0" cellspacing="0" id="rv_template_layout">

	<tr>

		

		<td height="226" align="left" valign="top" class="type17bgwhite">

			<table cellpadding="5" cellspacing="0" width="100%">

				<tr>

					<td align="left" valign="top">

						<table cellpadding="0" cellspacing="0" width="100%">

							<tr>

								<td align="left" valign="top"><img src="images/layouttemplate/9455e2815109d7c66be83a9e811e39d1/cor_05_gr.jpg" alt="" width="9" height="8" /></td>

								<td valign="top" width="99%" class="type17tbl02_t"><img src="images/layouttemplate/9455e2815109d7c66be83a9e811e39d1/spacer.gif" alt="" width="1" height="8" /></td>

								<td align="right" valign="top"><img src="images/layouttemplate/9455e2815109d7c66be83a9e811e39d1/cor_06_gr.jpg" alt="" width="8" height="8" /></td>

							</tr>

							<tr>

								<td class="type17tbl02_l"></td>

								<td align="left" valign="top">

									<table width="100%" height="123" cellpadding="0" cellspacing="0">

										<tr>

											

											<td height="102" align="center" valign="top" class="type17paraleft">

											<div class="type17txtpink">Welcome to Out of the Box Concepts....where great ideas

											  become realities!</div>

							    			<center>

							    			  <p><br />

							    			      <img src="rvs_library/180x60/4ct_180x60_29.jpg" alt="" width="180" height="60" border="1" class="type17bdrimg" align="center"/><br />

							    			    </p>

							    			  <p><br />

							    			      <span class="type17pad5"><a href=""><img src="images/button.gif" border="0" align="middle"/></a></span>

							    			      </p>

							    			</center><br />

											

											

 <form>

   <label><span class="style7">Search: </span>&nbsp;&nbsp;</label>

   <select name="users" onchange="showUser(this.value)" class="drop">

<OPTION VALUE=0>Select Category 

<?=$options?> 

</SELECT> 
 
 

</form></td></tr><tr>

<td width="100%"><div id="txtHint" class="expand"></div>

							    		</td>

										</tr>

									</table>								</td>

								<td class="type17tbl02_r"></td>

							</tr>

							<tr>

								<td align="left" valign="bottom" class="type17tbl02_b"><img src="images/layouttemplate/9455e2815109d7c66be83a9e811e39d1/cor_07_gr.jpg" alt="" width="9" height="9" /></td>

								<td class="type17tbl02_b"><img src="images/layouttemplate/9455e2815109d7c66be83a9e811e39d1/spacer.gif" alt="" width="1" height="8" /></td>

								<td align="right" valign="bottom" class="type17tbl02_b"><img src="images/layouttemplate/9455e2815109d7c66be83a9e811e39d1/cor_08_gr.jpg" alt="" width="8" height="9" /></td>

							</tr>

						</table>					</td>

				</tr>

				

				<tr>

					<td align="left" valign="top" class="type17bgwhite">

						<table cellpadding="0" cellspacing="0" width="100%">

							<tr>

								

								<td align="left" valign="top" width="33%">

									<table cellpadding="0" cellspacing="0" width="100%">

										<tr>

											<td align="left" valign="top"></td>

											<td valign="top" width="99%" ><img src="images/layouttemplate/9455e2815109d7c66be83a9e811e39d1/spacer.gif" alt="" width="1" height="6" /></td>

											<td align="right" valign="top"></td>

										</tr>

										

										

									</table>								</td>

							</tr>

						</table>					</td>

				</tr>

			</table>		</td>

	</tr>

</table></td>				

													</tr>

												</table>											</td>

										</tr>

									</table>								</td>

							</tr>

							

							 
 

							<tr>

								<td align="center" valign="bottom">

									<table cellpadding="0" cellspacing="0">

										<tr>

											<td align="center" valign="bottom" class="marginpw"></td>

											<td width="8"></td>

											<td align="center" valign="bottom" class="marginpw"></td>

										</tr>

									</table>								</td>

							</tr>

						</table>					</td>

					<td align="right" valign="top" class="bgblack"><img src="images/spacer.gif" alt="" width="3" height="1" /></td>

				</tr>

			</table>		</td>

	</tr>

	

		 

	 

<?php include("footer.inc"); ?>

</table>

</body>

</html>

Open in new window

0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Actually... looking over your code again, I'm wondering if maybe I don't understand what you're trying to display... and as such, I may have been a bit presumptuous in simplifying your code for you.  If so, I'm sorry.  Just trying to help! :-)

Are you showing a different company for each column?  Or a different company for each row?  It looks from your code above as though for every three company names your SQL statement returns, you're outputting a row with just the company names, one in each cell.  Then you output an empty row.

My idea about abandoning the AJAX came while I was under the assumption that there was just one company for each row, and the other two cells were extra data on that company.  Then when you moused over, you wanted to display lots of extra info.  My thought was that you could take that extra row below and write all the extra info into it at load time, but set the CSS display attribute so as to collapse the row.  The on click or mouseover, you could expand the row, causing it to magically appear between the row in question and the next row.

I'm suddenly wondering if that's exactly what you were doing before. :-)

If not and you're interested, I can show you code for collapsing/expanding table rows.  If expanding/collapsing isn't what you want to do, however, I still think AJAX is major overkill for this project... AJAX is well-suited for situations in which you need to keep certain data updated on a minute-by-minute basis, situations where the data is likely to change that quickly.  In this project here, you've got some much simpler options that you can implement all in one file at load time, but still with the same effect of having a box "pop up" with details.

Let me know how you want to proceed!
0
 

Author Comment

by:shjani
Comment Utility
Your code doesn't do what I want to do.  With the code you posted all the categories are listed in each column ie column 1, 2 & 3 all have the 4 items from the database.  Such as:
1                    1                         1
2                     2                        2
3                     3                        3
4                     4                        4

The code I created populates from left to right

1                    2                          3
4

Which is how I need it.
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Yep... I realized that after posting, as you can see from my last post. :-)  Oh the joys of time lag in communication on forums like this one. :-)
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
I've now looked over your entire PHP file, and I can understand why you didn't initially post all of it here-- and I appreciate your not wanting to overwhelm me. :-)

About your line 1/character 1 error...  That error could indeed by on line 1 of any of the four JS files you reference in this document.  If you have a JavaScript error anywhere, it's not uncommon for that error to ruin all dynamic JavaScript execution for a page.  Even if you don't think the other JS files are related to the functions being called in your mouseover, check over the first few lines anyway and look for obvious errors.

If you want to post them here, I'll try my own hand at finding the issue.
0
 

Author Comment

by:shjani
Comment Utility
I thought about the collapse row option, but the general idea is to have eventually up to multiple company names (could be 40-50) and when you hover over one of the names the company information pops out to the side and doesn't affect any of the other rows or columns.  Also, the pop out needs to stay static so that a client can mouse over to the pop out cell and click on the Web site or email address.  There needs to be a timer so that the pop out stays on open for a period of time.  
0
 

Author Comment

by:shjani
Comment Utility
My last error comes when I mouse over the company name and it says:

Object doesn't support this property or method
0
 

Author Comment

by:shjani
Comment Utility
If you know of a better way I'm all eyes...
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
That error could mean a lot of things.  If you want to post ALL of your code, I'll help you chase it down.  However, I really can't do much more with what you've given me now.

About the collapsing option, its behavior could be anything you want.  Open on mouseover or click, stay open forever until you click on it or close with a timer.  All of that is up to you... none of that is specific to AJAX.

For that matter, like I mentioned before, you can accomplish exactly what you want to do without AJAX.  It would involve reading all of your data at load time-- all of your data for all displayed companies, not just their names-- and writing the values to several JavaScript arrays.  Then we would create your little popup box and hide it.  Whenever someone clicked or moused-over a company name, the JavaScript would write the appropriate values from those arrays into the popup box, then it would move the box right next to the name that was clicked, and then it would make the box visible.

If you can't get the AJAX to work, I suggest this route.  It is far simpler, and in this case, probably a lot faster than AJAX... maybe not noticeably so, but AJAX load times will vary with the speed of a person's Internet connectivity, which itself may vary from moment to moment.  AJAX is, after all, about loading a whole new page.  The solution I'm proposing would be instantaneous, because the data would already be loaded.  And did I mention it would be simpler?  Much simpler.  Much less code to dig through looking for the source of weird errors.
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
LOL.  All eyes.  Love it.

Okay, do this for me... for sake of making my code make more sense, can you list out for me all your field names that you want displayed each time a company is moused over?
0
 

Author Comment

by:shjani
Comment Utility
comp_name, desc, address, city, state, zip_code, phone_num, url, email, contact_name
             
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Okay, you asked for it and here it is.  Take the following code and load it all by itself into a fresh file, save it as PHP, upload it and run it.  This shows off the functionality without accessing the database (I needed some way to test it, since I don't have access to your data).

I'll send you the version designed for your actual use in the next post.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>
 

	<script language="javascript1.2">

	  <!--

		

		var myPopUpOffset = 100;
 

		function popDetails(comp_id,inputObj) {

			var popObj = document.getElementById('detailPop');

			popObj.style.left = ajaxTooltip_getLeftPos(inputObj) + myPopUpOffset + "px";

			popObj.style.top = ajaxTooltip_getTopPos(inputObj) + "px";

			var tempInnards = "";

			tempInnards = "<b>" + comp_name[comp_id] + "</b><br>";

			tempInnards += desc[comp_id] + "<br>";

			tempInnards += address[comp_id] + "<br>";

			tempInnards += city[comp_id] + ", " + state[comp_id] + " " + zip_code[comp_id] + "<br>";

			tempInnards += phone_num[comp_id] + "<br>";

			tempInnards += "<a href='" + url[comp_id] + "' target='_blank'>" + url[comp_id] + "</a><br>";

			tempInnards += "<a href='mailto:" + email[comp_id] + "'>" + email[comp_id] + "</a><br>";

			tempInnards += "Contact: " + contact_name[comp_id] + "<p>";

			tempInnards += "<center><a href='#' onclick='unpopDetails();'>Close</a></center>";

			popObj.innerHTML = tempInnards;

			popObj.style.visibility = 'visible';

			return false;

		}
 

		function unpopDetails() {

			document.getElementById('detailPop').style.visibility = 'hidden';

			return false;

		}
 

		function ajaxTooltip_getTopPos(inputObj) {               

		  var returnValue = inputObj.offsetTop;

		  while((inputObj = inputObj.offsetParent) != null){

				if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;

		  }

		  return returnValue;

		}

		 

		function ajaxTooltip_getLeftPos(inputObj) {

		  var returnValue = inputObj.offsetLeft;

		  while((inputObj = inputObj.offsetParent) != null){

				if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;

		  }

		  return returnValue;

		}

	  //-->

	</script>
 

 </HEAD>
 

 <BODY>
 
 

<table border='1' width='100%'>

 

<?php 
 

	$count = 0;
 

	$comp_id = 0;

	$comp_name = "";

	$desc = "";

	$address = "";

	$city = "";

	$state = "";

	$zip_code = "";

	$phone_num = "";

	$url = "";

	$email = "";

	$contact_name = "";
 

	$comma = "";
 

	//display all company names, 3-abreast

	for($i=0;$i<50;$i++) {
 

		$this_comp_name = "comp_name".$comp_id;

		$comp_name .= $comma."'".$this_comp_name."'";

		$desc .= $comma."'desc".$comp_id."'";

		$address .= $comma."'address".$comp_id."'";

		$city .= $comma."'city".$comp_id."'";

		$state .= $comma."'state".$comp_id."'";

		$zip_code .= $comma."'zip".$comp_id."'";

		$phone_num .= $comma."'phone_num".$comp_id."'";

		$url .= $comma."'http://www.cnn.com/".$comp_id."'";

		$email .= $comma."'joe@email.com".$comp_id."'";

		$contact_name .= $comma."'contact_name".$comp_id."'";
 

		$comma = ",";
 

		if(!$count) { echo "<tr>"; }

?>

		<td width='33%' class='title'>

			<a href="#" onmouseover="popDetails(<?php echo $comp_id; ?>,this);"><?php echo $this_comp_name; ?></a>

		</td>

<?php

		$comp_id++;

		$count++;

		if($count==3) {

			$count = 0;

			echo "</tr>";

		}

	}
 

	//finish out the last row with blank cells if need be

	if($count==1) { echo "<td> </td><td> </td></tr>"; }

	elseif($count==2) { echo "<td> </td></tr>"; }

 

?>

 

</table>
 
 

 <div id="detailPop" style="position:absolute;left:0px;top:0px;width:200px;min-height:150px;background-color:#BBBBBB;border:solid 1px #000000;padding:10px;vertical-align:middle;visibility:hidden;"></div>
 
 

	<script type="text/javascript">

	  <!--

		var comp_name = new Array(<?php echo $comp_name; ?>);

		var desc = new Array(<?php echo $desc; ?>);

		var address = new Array(<?php echo $address; ?>);

		var city = new Array(<?php echo $city; ?>);

		var state = new Array(<?php echo $state; ?>);

		var zip_code = new Array(<?php echo $zip_code; ?>);

		var phone_num = new Array(<?php echo $phone_num; ?>);

		var url = new Array(<?php echo $url; ?>);

		var email = new Array(<?php echo $email; ?>);

		var contact_name = new Array(<?php echo $contact_name; ?>);

	  //-->

	</script>

  

 </BODY>

</HTML>

Open in new window

0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
And what follows now is designed for your actual use.  Naturally, I wasn't able to test this as is, so there may be errors (though I hope to have caught most of them in the test case above).  Also, you'll need to embed the code here in your existing page.  Just make sure the JavaScript block inside the <HEAD></HEAD> tags end up there in your final PHP script.  Also make sure the rest of the code in the <BODY></BODY> end up in the right place too.

Note one customizable option I made sure to leave you with... in the first block of JavaScript, the first code you see is the assignment for two variables:  myPopUpOffsetLeft and myPopUpOffsetLeft.  If both of these are set to 0, the popup box will automatically show up with the upper-left corner exactly over top of the upper-left corner of the company name text.  Probably not what you want.  So I've given you these two variables so you can easily move the popup box.  By default, it'll appear 100 pixels to the right.

As for making it pretty, I leave that to you. :-)  Hope you like it!

P.S.  You'll need to watch out for apostrophes in any of your database fields... they'll mess everything up unless you escape them!  (i.e. make sure to put a backslash in front of each apostrophe)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>
 

	<script language="javascript1.2">

	  <!--
 

		var myPopUpOffsetLeft = 100;

		var myPopUpOffsetTop = 0;

		

		function popDetails(comp_id,inputObj) {

			var popObj = document.getElementById('detailPop');

			popObj.style.left = ajaxTooltip_getLeftPos(inputObj) + myPopUpOffsetLeft + "px";

			popObj.style.top = ajaxTooltip_getTopPos(inputObj) + myPopUpOffsetTop + "px";

			var tempInnards = "";

			tempInnards = "<b>" + comp_name[comp_id] + "</b><br>";

			tempInnards += desc[comp_id] + "<br>";

			tempInnards += address[comp_id] + "<br>";

			tempInnards += city[comp_id] + ", " + state[comp_id] + " " + zip_code[comp_id] + "<br>";

			tempInnards += phone_num[comp_id] + "<br>";

			tempInnards += "<a href='" + url[comp_id] + "' target='_blank'>" + url[comp_id] + "</a><br>";

			tempInnards += "<a href='mailto:" + email[comp_id] + "'>" + email[comp_id] + "</a><br>";

			tempInnards += "Contact: " + contact_name[comp_id] + "<p>";

			tempInnards += "<center><a href='#' onclick='unpopDetails();'>Close</a></center>";

			popObj.innerHTML = tempInnards;

			popObj.style.visibility = 'visible';

			return false;

		}
 

		function unpopDetails() {

			document.getElementById('detailPop').style.visibility = 'hidden';

			return false;

		}
 

		function ajaxTooltip_getTopPos(inputObj) {               

		  var returnValue = inputObj.offsetTop;

		  while((inputObj = inputObj.offsetParent) != null){

				if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;

		  }

		  return returnValue;

		}

		 

		function ajaxTooltip_getLeftPos(inputObj) {

		  var returnValue = inputObj.offsetLeft;

		  while((inputObj = inputObj.offsetParent) != null){

				if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;

		  }

		  return returnValue;

		}

	  //-->

	</script>
 

 </HEAD>
 

 <BODY>
 
 

<?php
 

$q=$_GET["q"];

include("includes/connect.inc");

$con = mysql_connect($database,$username,$password);

 

if(!$con) { die('Could not connect: ' . mysql_error()); }

 

mysql_select_db("engelvanbreene", $con);

$sql="SELECT * FROM Suppliers WHERE category = '".$q."'";

$result = mysql_query($sql);

mysql_close($con);

 

?>

 

<div>

<table border='0' width='100%'>

 

<?php 
 

	$count = 0;
 

	$comp_id = 0;

	$comp_name = "";

	$desc = "";

	$address = "";

	$city = "";

	$state = "";

	$zip_code = "";

	$phone_num = "";

	$url = "";

	$email = "";

	$contact_name = "";
 

	$comma = "";
 

	//display all company names, 3-abreast

	while($row = mysql_fetch_array($result)) {
 

		$this_comp_name = $row['comp_name'];

		$comp_name .= $comma."'".$this_comp_name."'";

		$desc .= $comma."'".$row['desc']."'";

		$address .= $comma."'".$row['address']."'";

		$city .= $comma."'".$row['city']."'";

		$state .= $comma."'".$row['state']."'";

		$zip_code .= $comma."'".$row['zip_code']."'";

		$phone_num .= $comma."'".$row['phone_num']."'";

		$url .= $comma."'".$row['url']."'";

		$email .= $comma."'".$row['email']."'";

		$contact_name .= $comma."'".$row['contact_name']."'";
 

		$comma = ",";
 

		if(!$count) { echo "<tr>"; }

?>

		<td width='33%' class='title'>

			<a href="#" onmouseover="popDetails(<?php echo $comp_id; ?>,this);"><?php echo $this_comp_name; ?></a>

		</td>

<?php

		$comp_id++;

		$count++;

		if($count==3) {

			$count = 0;

			echo "</tr>";

		}

	}
 

	//finish out the last row with blank cells if need be

	if($count==1) { echo "<td> </td><td> </td></tr>"; }

	elseif($count==2) { echo "<td> </td></tr>"; }

 

?>

 

</table>

</div>
 

 <div id="detailPop" style="position:absolute;left:0px;top:0px;width:200px;min-height:150px;background-color:#BBBBBB;border:solid 1px #000000;padding:10px;vertical-align:middle;visibility:hidden;"></div>
 
 

	<script type="text/javascript">

	  <!--

		var comp_name = new Array(<?php echo $comp_name; ?>);

		var desc = new Array(<?php echo $desc; ?>);

		var address = new Array(<?php echo $address; ?>);

		var city = new Array(<?php echo $city; ?>);

		var state = new Array(<?php echo $state; ?>);

		var zip_code = new Array(<?php echo $zip_code; ?>);

		var phone_num = new Array(<?php echo $phone_num; ?>);

		var url = new Array(<?php echo $url; ?>);

		var email = new Array(<?php echo $email; ?>);

		var contact_name = new Array(<?php echo $contact_name; ?>);

	  //-->

	</script>

  

 </BODY>

</HTML>

Open in new window

0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Oh, and I tested the first version in multiple browsers and it worked fine in all the following:
  • Win - IE7
  • Win - FF
  • Win - Opera
  • Win - Chrome
  • Mac - FF
  • Mac - Opera
  • Mac - Safari
Sorry, meant to mention that before.
0
 

Author Comment

by:shjani
Comment Utility
Thanks so much for the code.  I added it to my files, but I'm getting this error:  Object Expected.

I'm wondering if because the comp_name variable is assigned after the mouseover if that has anything to do with it.  I would have thought that shouldn't be a problem since everything loads at once.  

Also, I changed comp_id to cust_id since that's what's in the database.
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
First off, did you test the first chunk of code I posted last night?  You should test that as is before you try integrating the other version into your code.

About the error, is it happening at page load or the first time you click something.  Is it giving you a line number?  Other than line 1, of course? :-)  Usually this has to do with a function not working properly, like if the code is trying to call a function and it's not there.  Or the variables don't pass correctly.

The placement of the JavaScript comp_name variable assignment shouldn't make a difference.

A few things to check:
  • make sure you copied over all of my file, especially the javascript function declarations from within the <head></head> tags.
  • make sure you don't have any more instances of comp_id left in your code
  • when you added your extra code back into the file, make sure you didn't leave any references to those AJAX javascript files.  I stole two of their functions and adapted them... probably should have renamed them too, but if there are two functions with the same name, that could cause a problem.
0
 

Author Comment

by:shjani
Comment Utility
No, I moved the comp_name assignment and that doesn't make any difference.  There doesn't seem to be anything that is passed to the javascript function and so I'm getting the error.
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Please be more specific.  There doesn't seem to be anything passed to which function?  And what makes you say that?

Would you mind answering the rest of my questions too?  It would make it a lot easier for us to resolve this.

Thanks! :-)
0
 

Author Comment

by:shjani
Comment Utility
Take a look at this link.  It will be more clearer:

http://www.ootbconcepts.com/index_dev.php

Basically I'm troubleshooting to see what is being passed to the mouseover function popDetails.  Click on sports on the dropdown menu and then mouse over one of the company names - say Nike.  Look at the javascript error message.  I'm printing out $cust_id and $comp_name to see what is being stored in each of the varialbles.  Instead of incrementing $cust_id (previously $comp_id), I am bringing it from the database.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:shjani
Comment Utility
Again time lag in postings...I took out all the javascript previously there to avoid the function name confusion.  I've narrowed it down to comp_name[comp_id].
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Okay, I follow what you mean now.  Gotcha.  Yeah, look, don't change $comp_id to anything.  That's just a variable name that has no bearing on anything... It's the value that matters, and that value most definitely should NOT be the cust_id. That variable is simply used as a unique identifier within this page alone.  It serves as the key to each of those arrays, and if you use a non-sequential value, it will destroy the functionality.

I now understand why you were asking about comp_name not being defined.  What's happening is that you've got, say, four different companies being listed.  In that case, you've got four values in each of your arrays, and the keys for those values are 0, 1, 2, and 3.  To access the first company name, JavaScript should be using comp_name(0).  However, by changing the key from the sequentially incrementing $comp_id value to the company's ID in your database, JavaScript is probably looking for something like comp_name(2352)... which simply does not exist.  In other words, it's undefined, just like the error message says.

So just switch everything back to the way I had it with $comp_id and all should work fine.  Should. :-)
0
 

Author Comment

by:shjani
Comment Utility
ok I switched everything back to $comp_id and put the script in the <head></head> of the index_dev.php file.  But I'm getting the error comp_name undefined.  

Basically the coding you sent was put in the getuser.php file.  The index_dev.php file uses the selectuser.js file to get getuser.php.  It shows that the information is coming from the database with the echo statement, but when I do a document.write to find out the variables in the javascript I don't get anything.
0
 

Author Comment

by:shjani
Comment Utility
I'm not sure if             

var comp_name = new Array(<?php echo $comp_name; ?>);

is picking up the variable because when I do a

document.write(comp_name[0]);
document.write(comp_name[1]);

I don't get anything.
nothing shows up.
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
You've got my JavaScript functions on the wrong page.  They need to be in getuser.php along with the rest of the code I gave you.  Right now, the mouse events in getuser.php can't find their functions, and the functions in index_dev.php won't ever get called.
0
 

Author Comment

by:shjani
Comment Utility
I put it back and am getting the "object expected" error.  
0
 

Author Comment

by:shjani
Comment Utility
When I run your example by itself I get comp_name undefined.  Look at this link:

http://www.ootbconcepts.com/example.php

0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
I just pulled up getuser.php on your site, using the Sports category.  You've got some new line characters in your address field, and that's throwing everything else off in terms of JavaScript.  Before you write that $address variable into the JavaScript address() array at the bottom of the file, you need to replace those new line characters like so:

<?php
    //replace new line characters
    $address = str_replace("\n","\\n",$address);  
?>
You'll need to do the same with any other fields that might also have new line characters.

That leaves just one problem that I can see-- where you're writing the $comp_name variable into the JavaScript comp_name() array.  Can you verify that the line pertaining to comp_name appears like this:

var comp_name = new Array(<?php echo $comp_name; ?>);

That's how it should be, but judging by the code that's being generated, I'm guessing it got changed.  Make sure it appears the way I've got it here.
 
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
See my last post.  You are indeed running my example, but it's having a problem because of the new line characters in your data.  I didn't realize the address field might have such characters... make sure you add the replacement code I outlined in my last post. ;-)
0
 

Author Comment

by:shjani
Comment Utility
I added the replace new line chanracters code for the address.  That's the only one that has new lines.  As far as the Array declaration, yes, it's like you had it

var comp_name = new Array(<?php echo $comp_name; ?>);

Here's the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

 

	<script language="javascript1.2">

	  <!--

		var myPopUpOffsetLeft = 100;

		var myPopUpOffsetTop = 0;

		

		function popDetails(comp_id,inputObj) {

			var popObj = document.getElementById('detailPop');

			popObj.style.left = ajaxTooltip_getLeftPos(inputObj) + myPopUpOffsetLeft + "px";

			popObj.style.top = ajaxTooltip_getTopPos(inputObj) + myPopUpOffsetTop + "px";

			var tempInnards = "";

			tempInnards = "<b>" + comp_name[comp_id] + "</b><br>";

			tempInnards += desc[comp_id] + "<br>";

			tempInnards += address[comp_id] + "<br>";

			tempInnards += city[comp_id] + ", " + state[comp_id] + " " + zip_code[comp_id] + "<br>";

			tempInnards += phone_num[comp_id] + "<br>";

			tempInnards += "<a href='" + url[comp_id] + "' target='_blank'>" + url[comp_id] + "</a><br>";

			tempInnards += "<a href='mailto:" + email[comp_id] + "'>" + email[comp_id] + "</a><br>";

			tempInnards += "Contact: " + contact_name[comp_id] + "<p>";

			tempInnards += "<center><a href='#' onclick='unpopDetails();'>Close</a></center>";

			popObj.innerHTML = tempInnards;

			popObj.style.visibility = 'visible';

			return false;

		}

 

		function unpopDetails() {

			document.getElementById('detailPop').style.visibility = 'hidden';

			return false;

		}

 

		function ajaxTooltip_getTopPos(inputObj) {               

		  var returnValue = inputObj.offsetTop;

		  while((inputObj = inputObj.offsetParent) != null){

				if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;

		  }

		  return returnValue;

		}

		 

		function ajaxTooltip_getLeftPos(inputObj) {

		  var returnValue = inputObj.offsetLeft;

		  while((inputObj = inputObj.offsetParent) != null){

				if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;

		  }

		  return returnValue;

		}

	  //-->

	</script>

 

 </HEAD>

 

 <BODY>

 

 

<?php

 

$q=1;

$con = mysql_connect('xxx', 'yyy', 'zzz');

 

if(!$con) { die('Could not connect: ' . mysql_error()); }

 

mysql_select_db("engelvanbreene", $con);

$sql="SELECT * FROM Suppliers WHERE category = '".$q."'";

$result = mysql_query($sql);

mysql_close($con);

 

?>

 

<div>

<table border='0' width='100%'>

 

<?php 

 

	$count = 0;

 

	$comp_id = 0;

	$comp_name = "";

	$desc = "";

	$address = "";

	$city = "";

	$state = "";

	$zip_code = "";

	$phone_num = "";

	$url = "";

	$email = "";

	$contact_name = "";

 

	$comma = "";

 

	//display all company names, 3-abreast

	while($row = mysql_fetch_array($result)) {

 

		$this_comp_name = $row['comp_name'];

		$comp_name .= $comma."'".$this_comp_name."'";

		$desc .= $comma."'".$row['desc']."'";

		$address .= $comma."'".$row['address']."'";

		$city .= $comma."'".$row['city']."'";

		$state .= $comma."'".$row['state']."'";

		$zip_code .= $comma."'".$row['zip_code']."'";

		$phone_num .= $comma."'".$row['phone_num']."'";

		$url .= $comma."'".$row['url']."'";

		$email .= $comma."'".$row['email']."'";

		$contact_name .= $comma."'".$row['contact_name']."'";

 

		$comma = ",";

 

		if(!$count) { echo "<tr>"; }

?>

		<td width='33%' class='title'>

			<a href="#" onmouseover="popDetails(<?php echo $comp_id; ?>,this);"><?php echo $this_comp_name; ?></a>

		</td>

<?php

		$comp_id++;

		$count++;

		if($count==3) {

			$count = 0;

			echo "</tr>";

		}

	}

 

	//finish out the last row with blank cells if need be

	if($count==1) { echo "<td> </td><td> </td></tr>"; }

	elseif($count==2) { echo "<td> </td></tr>"; }

 

?>

 

</table>

</div>

 

 <div id="detailPop" style="position:absolute;left:0px;top:0px;width:200px;min-height:150px;background-color:#BBBBBB;border:solid 1px #000000;padding:10px;vertical-align:middle;visibility:hidden;"></div>

 <?php

   //replace new line characters

   $address = str_replace("\n","\\n",$address);  

?>
 

 

	<script type="text/javascript">

	  <!--

		var comp_name = new Array(<?php echo $comp_name; ?>);

		var desc = new Array(<?php echo $desc; ?>);

		var address = new Array(<?php echo $address; ?>);

		var city = new Array(<?php echo $city; ?>);

		var state = new Array(<?php echo $state; ?>);

		var zip_code = new Array(<?php echo $zip_code; ?>);

		var phone_num = new Array(<?php echo $phone_num; ?>);

		var url = new Array(<?php echo $url; ?>);

		var email = new Array(<?php echo $email; ?>);

		var contact_name = new Array(<?php echo $contact_name; ?>);

	  //-->

	</script>

  

 </BODY>

</HTML>

Open in new window

0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Are you sure this is the live code you've got uploaded to your server?  It doesn't appear to be...
0
 

Author Comment

by:shjani
Comment Utility
Yes, this is the latest that has on the server.  
0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
At the very bottom of getuser.php, just above </body></html>, please add the following code and let me know when you've done so, so I can pull it up.  We're still having problems with that newline issue, and I'd like to lick this thing before I go to bed! :-)

<pre>

<?php
 

	echo $desc."\n\n";

	for($i=0;$i<strlen($desc);$i++) {

		echo "$i: ".chr(substr($desc,$i,1))."\n";

	}

?>

</pre>

Open in new window

0
 

Author Comment

by:shjani
Comment Utility
Yeah your code worked!  I just took out all the /n from the database tables and it works now.  But, I renamed example.php as getuser.php and uploaded onto server and I'm getting the object problem.  Look at

http://www.ootbconcepts.com/index_dev.php

I'm wondering if it has to do with the selectuser.js script which is below.  This opens getuser.php.
// JavaScript Document

var xmlHttp;function showUser(str)

{ 

xmlHttp=GetXmlHttpObject();

if (xmlHttp==null)

 {

 alert ("Browser does not support HTTP Request");

 return;

 }

var url="getuser.php";

url=url+"?q="+str;

url=url+"&sid="+Math.random();

xmlHttp.onreadystatechange=stateChanged;

xmlHttp.open("GET",url,true);

xmlHttp.send(null);

}function stateChanged() 

{ 

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

 { 

 document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

 } 

}function GetXmlHttpObject()

{

var xmlHttp=null;

try

 {

 // Firefox, Opera 8.0+, Safari

 xmlHttp=new XMLHttpRequest();

 }

catch (e)

 {

 //Internet Explorer

 try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

 catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

 }

return xmlHttp;

}

Open in new window

0
 
LVL 8

Assisted Solution

by:Bobaran98
Bobaran98 earned 500 total points
Comment Utility
Whatever problems you're having now, it has to do with your index_dev.php page.  If you load getuser.php all by itself, you'll see it works fine:

http://www.ootbconcepts.com/getuser.php?q=1&sid=1235

I tell you what... try this.  Take the JavaScript block out from the <head></head> tags in getuser.php and put it in the same place in your index_dev.php file.  Now, strip out of the getuser.php file everything from the beginning to the <BODY> tag, then at the end, remove the </BODY> and </HTML> tags.

I'm trying to remember how the AJAX works, and now that I think of it, I believe the contents of an AJAX loaded element should not be formatted as their own separate page... in other words, there should be no header tags.

Now that we've got the bugs worked out of the code itself, it's a matter of integrating that code with your AJAX solution.  Try this and let me know!
0
 
LVL 8

Expert Comment

by:Bobaran98
Comment Utility
Ok, I'm going to bed.  I look forward to hearing a good report in the morning! :-)
0
 

Author Comment

by:shjani
Comment Utility
I moved the javascript the index_dev.php and took out all the beginning and end tags in the getuser.php file, but am getting an error "comp_name is undefined" on index_dev.php.

 
0
 
LVL 8

Expert Comment

by:Bobaran98
Comment Utility
I've got an idea... try adding the following JavaScript variable declarations in the block at the top of index_dev.php (just below where myPopUpOffsetLeft and myPopUpOffsetTop are declared):

var comp_name = new Array();
            var desc = new Array();
            var address = new Array();
            var city = new Array();
            var state = new Array();
            var zip_code = new Array();
            var phone_num = new Array();
            var url = new Array();
            var email = new Array();
            var contact_name = new Array();

Then remove all the "var" keywords from the JavaScript block at the bottom of getuser.php:

<script type="text/javascript">
          <!--
comp_name = new Array(<?php echo $comp_name; ?>);
desc = new Array(<?php echo $desc; ?>);
address = new Array(<?php echo $address; ?>);
            city = new Array(<?php echo $city; ?>);
state = new Array(<?php echo $state; ?>);
zip_code = new Array(<?php echo $zip_code; ?>);
phone_num = new Array(<?php echo $phone_num; ?>);
url = new Array(<?php echo $url; ?>);
email = new Array(<?php echo $email; ?>);
contact_name = new Array(<?php echo $contact_name; ?>);
         //-->
      </script>

Run it and see what happens.  If you still have a problem, try the same change to the top block in index_dev.php, but this time with empty strings instead of empty arrays:

var comp_name = "";
            var desc = "";
            var address = "";
            var city = "";
            var state = "";
            var zip_code = "";
            var phone_num = "";
            var url = "";
            var email = "";
            var contact_name = "";

The fact is that when the original page load completes for index_dev.php, none of these variables are defined.  Even though they do get defined when getuser.php is run, I'm suddenly thinking that the variable scope may be all funky because of the AJAX.

Let me know if this doesn't work... I've got another idea... :-)
0
 

Author Comment

by:shjani
Comment Utility
I don't have the undefined object error, but on mouseover everything is undefined in the box.  Both sets of code produced this.

http://www.ootbconcepts.com/index_dev.php
0
 
LVL 8

Expert Comment

by:Bobaran98
Comment Utility
Hmmm... and now I've forgotten my other idea.

Dang.  Okay, let me ask you a question.  Do you have your heart set on using AJAX to load the listings when you select a category from the list?  Because our problem at this point is directly related to the AJAX load (again, getuser.php works fine all by itself).  We can keep working on it, but you've got some other options that would be a lot easier.

One would be to use frames (or perhaps just an iframe) on your index_dev.php page, and the onchange event for your category selectbox would simply load getuser.php into the appropriate frame.  Another option is to popup a new window with the results for that category.  

Let me know.
0
 

Author Comment

by:shjani
Comment Utility
No, it doesn't matter what path we take.  Just remember that we are usine selectuser.js to get getuser.php.
0
 
LVL 8

Expert Comment

by:Bobaran98
Comment Utility
Huh?  I don't follow.  If we want to use frames or a popup window, you could remove selectuser.js entirely (unless it's doing something in addition to the AJAX page load).  Your category selectbox would look something like this:

<select id='users' onchange='openGetUser(this.value);'>

And then in your JavaScript function declarations up top, you'd add something like this:

function openGetUser(str) {
top.otherFrameName.location.href = "getuser.php?q=" + str + "&sid=" + Math.random();
}

That's for a frame.  I think for an iframe, you could also do:

function openGetUser(str) {
iFrameName.src = "getuser.php?q=" + str + "&sid=" + Math.random();
 }

To do a popup window, you'd have something like this:

function openGetUser(str) {
  myURL = "getuser.php?q=" + str + "&sid=" + Math.random();
window.open(myURL, "getuser", "width=350,height=200");
   }
And with this last one, there are actually a bunch of different options you can specify in that last argument, not just the size... you can also set resizability, scrollability, and whether other browser window elements show.

Regardless, going with one of these options would be a lot simpler than trying to chase down our AJAX/JavaScript variable scoping issue.
0
 

Author Comment

by:shjani
Comment Utility
I'm not clear on what you're proposing.  

Right now I have the dropdown menu being populated from the database using selectuser.js.  Once a selection is made in the dropdown menu the getuser.php file is called.  It seems that you're trying to do these both steps in the frame code, but it leaves out populating the dropdown menu.
0
 

Author Comment

by:shjani
Comment Utility
As I look at the frame options I don't think they will work.  The mouseover capability was a very important feature for my client.
0
 
LVL 8

Expert Comment

by:Bobaran98
Comment Utility
No, I'm afraid you're confused about which parts of your code are doing what.  I've looked over your selectuser.js, and all it's used for is to load getuser.php via AJAX when you change your category selection.  You could remove the reference to selectuser.js from index_dev.php, and your category selectbox would still load its options just fine.

In actuality, the options in the category selectbox are generated using the PHP/MySQL code at the very top of your index_dev.php file (look for all the lines that mention mysql).

What I'm suggesting is that you change the onchange property in your selectbox to a different JavaScript function, something like one of the ones I've listed above.  You just need to decide if and which of the three options I mentioned sound good to you.  Let's just try the popup window and see how you like it.  Change your selectbox tag like so:

<select id='users' onchange='openGetUser(this.value);'>
And add the function below in your JavaScript function block at the top of index_dev.php.  Now load the page and change your category selection option and see what happens.

NOTE:  You'll need to go back to getuser.php and add back in the <HTML> and <BODY> tags, and you'll need to also put back the JavaScript function declarations inside the <HEAD> tags.

function openGetUser(str) {

   myURL = "getuser.php?q=" + str + "&sid=" + Math.random();

   window.open(myURL, "getuser", "width=350,height=200");

}

Open in new window

0
 
LVL 8

Expert Comment

by:Bobaran98
Comment Utility
shjani, what we're discussing has nothing to do with the mouseover.  Whether you load getuser.php in a frame, an iframe, a popup window, or a div tag, the appearance and functionality will be exactly the same.

Of course, we're having problems with the variable scope with your div tag option, which is why I suggest these other three options-- because all of them will load getuser.php as a standalone page (which we've already got working fine).
0
 

Author Comment

by:shjani
Comment Utility
Great, I see what you mean now.  Sorry about my ignorance.  I think a div tag will be better instead for appearance sake.  I'd rather avoid popup windows.
0
 
LVL 8

Expert Comment

by:Bobaran98
Comment Utility
Okay, here are my thoughts, then.  I can't do much more to help you today or probably tomorrow either-- I need to get back to my "real" job. :-)  We've solved your original issue, which was to bring getuser.php to a point where it worked, displaying its listings, each with the appropriate mouseover.  After all, getuser.php works fine if you load it into a browser window all by itself.  In case you haven't tried that, just take a look:

http://www.ootbconcepts.com/getuser.php?q=1

So, I suggest you close this particular question and post a new question in the AJAX forum.  Describe exactly what you've got-- index_dev.php is a page with a selectbox, and getuser.php is a page with JavaScript functionality that currently works just fine.  Your problem is when you try using AJAX to load getuser.php into a <div> tag in the index_dev.php page.  Be ready to post the code, and I'll bet you come up with a solution pretty quick.

At this point, we've posted so much on this page back and forth that I doubt anyone new would invest the time to read all the way through it.
0
 

Author Comment

by:shjani
Comment Utility
Thanks for all your help!  I went ahead and implemented the iframe option.
0
 

Author Comment

by:shjani
Comment Utility
I'm new to ee how does the point thing work?
0
 
LVL 8

Expert Comment

by:Bobaran98
Comment Utility
Well, if you felt that multiple people contributed towards answering your question, then you would take the total number of points-- 500 in this case-- and divy them up as you saw fit.  If your solution came mostly from one person, you generally give that person all 500 points.  You don't have to give away all 500 points-- if you feel you ultimately answered the question yourself, albeit with help from the "experts," you might give away only some of the points.
After that, I think you assign a grade, though I'm not sure... frankly, of the three questions I've asked since joining (last week), I've not yet had one resolved! :-)  But anyway, that grade acts as a multiplier-- A is 4 times the number of points, etc.  Actually, I'm not sure how much people use the grading feature.  I haven't been on here very long myself, but all I've ever seen are A's.
Anyway, I hope this helps.  Do you like the IFRAME solution?  I'm sorry I couldn't walk you all the way through to your AJAX solution, but I need to crack down on the amount of time I spend on here (it's addicting!)... and besides, I've not got a whole lot of experience with AJAX, so who knows what obvious stuff I might be missing.
0
 

Accepted Solution

by:
shjani earned 0 total points
Comment Utility
Thanks for explaining the process.  I think the iframe solution might work.  If not, I'll submit a question on getting it done via AJAX.
0
 
LVL 8

Expert Comment

by:Bobaran98
Comment Utility
Hmmm... is it a faux pas to ask a question about receiving points?  I'm assuming shjani meant to assign some points, since he asked me how the point thing works.  I'm not quite sure what the point assignment block up top means... it looks like maybe I got assigned "20 points" 25 times?  

Anyway, I've not actually received any.  Since I answered his question exactly, investing a huge amount of time-- well over three hours-- coding his solution for him, and I was the only one who responded to this question...

Just checking. :-)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now