Onmouseover fetch data from MYSQL in a small window

[shruti]

My boss is making me cry by asking me to do things that Google Gmail and Yahoo mail has done.

 

 

if I click on any of the Cellid(from table "traff" that is displayed), it will get that Cellid Value and then match it with tablename " comments" and then on click will pop up a balloon with all the values from table "comments" where date =Currdate

 

Below is all that you will need:

==========================================================

 

My data base table "comments" is

 

CELLID , problem ,solution , comments ,userid , date .

===========================================================

 

My data base table traff is

 

BSCID, Cellid , Seiz , Drps ,dropflag ,RF, Oth ,Traff, trafflag , Total , DIT , IHFL ,ihfflag , TCD , TCA ,SDD , SDA ,TAVL ,tchaflag , Drate ,date .

===========================================================

 

This is the page that displays the whole table:

 

<?php

$host = "localhost";

$user = "shruti";

$pass = "patel";

$dbname = "tmetrix";

 

$connection = mysql_connect("localhost", "root", "") or die("Cannot connect to MySQL server: " . mysql_error());

$db_selected = mysql_select_db('tmetrix', $connection);

 

$dt= DATE('Y-m-d');

$data = mysql_query("SELECT * FROM traff where date = '$dt'")

or die(mysql_error());

Print "<table border=0 cellspacing=0 cellpadding=0 style='width:100%'>";

 

 

$info= mysql_query($query);

$num_data = mysql_num_rows($data);

 

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

 

$row = mysql_fetch_array($data);

 

$rows[$i]['BSCID'] = "<td style='text-align:left'>" . $row['BSCID'] . "</td>";

 

$rows[$i]['Cellid'] = "<td style='text-align:left'>" . $row['Cellid'] . "</td>";

(When I take mouse over any cellid, it should show a window or bubble like thing that displays data from table comments)

$rows[$i]['Seiz'] = "<td>" . $row['Seiz'] . "</td>";

$rows[$i]['Drps'] = "<td>" . $row['Drps'] . "</td>";

$rows[$i]['RF'] = "<td>" . $row['RF'] . "</td>";

$rows[$i]['Oth'] = "<td>" . $row['Oth'] . "</td>";

$rows[$i]['Traff'] = "<td>" . $row['Traff'] . "</td>";

$rows[$i]['Total'] = "<td>"."(" . $row['Total'] .")". "</td>";

 

$rows[$i]['DIT'] = "<td>" . $row['DIT'] . "</td>";

 

$rows[$i]['IHFL'] = "<td>" . $row['IHFL'] . "</td>";

$rows[$i]['TCD'] = "<td>" . $row['TCD'] . "</td>";

$rows[$i]['TCA'] = "<td>" . $row['TCA'] . "</td>";

$rows[$i]['SDD'] = "<td>" . $row['SDD'] . "</td>";

$rows[$i]['SDA'] = "<td>" . $row['SDA'] . "</td>";

$rows[$i]['TAVL'] = "<td>" . $row['TAVL'] ."%". "</td>";

$rows[$i]['Drate'] = "<td>" . $row['Drate'] . "</td>";

 

if($row['dropflag'])

$rows[$i]['Drps'] = str_replace('<td>','<td style="font-weight:bold;color:#CC0066">',$rows[$i]['Drps']);

 

if($row['trafflag'])

$rows[$i]['Traff'] = str_replace('<td>','<td style="font-weight:bold;color: #CC0066">',$rows[$i]['Traff']);

 

if($row['ihfflag'])

$rows[$i]['IHFL'] = str_replace('<td>','<td style="font-weight:bold;color:#CC0066">',$rows[$i]['IHFL']);

 

if($row['tchaflag'])

$rows[$i]['TAVL'] = str_replace('<td>','<td style="font-weight:bold;color:#CC0066 ">',$rows[$i]['TAVL']);

 

}

 

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

 

if($i % 2)

{

print '<TR bgcolor="#ffffff">';

}

else

{

print '<TR bgcolor="#CCCCCC">';

}

 

foreach($rows[$i] as $cell)

echo $cell;

}

 

print "</TR>\n";

 

?>

[.josh]

Well you could either pass all of the data to javascript and onmouseover/click have javascript display the popup, or you can make a separate php script that retrieves the specific data based on the cell data, and use ajax to call that script, retrieve the data and display it.  Either way, this isn't really a php solution per se.  That is, you'd use php to retrieve the info either way, but to do the whole onmouseover/click with the popup, that's strictly javascript.

[obsidian]

As CV states, the dynamic portion is JS, but I figured I'd throw in a thought from having to do something similar in the past. You'll have a much smoother transition if you build a PHP array or data store of all the references you will need additional data for as the page is generated. Then, once your page is completed, use JavaScript to then locate the areas of the page and assign the onmouseover actions to those elements. Your PHP data store will need to be spit out to a JavaScript object for easy access to the functions, but otherwise, it's a pretty straight forward method. The other option would be to actually have the onmouseover trigger and AJAX call that queries each one individually; however, if you go with this method, I would recommend you cache results you have already queried so you don't have a big wait time for every value whether or not you have already seen it... just a thought.

[shruti]

Everyone is teling me to use AJAX..............But  :'( I dont know AJAX.

 

Please someone help me with the code!! I know all that you are telling me as  I searched the web a lot for something like this.

But when I try out something, it messes up my whole code.

 

So can someone work with my own code and help me??

 

Please

[d.shankar]

Because AJAX suits your problem...

 

Ok back to your ways..

 

A small idea and a bit creativity can let you do this

 

Instead of displaying in a <td><tr> tags.. you can display in <a> tage with title attribute .. so when it is hovered over the cellid it will query show the data from the comments table in the form of a tool tip...

 

Will that do ???

[shruti]

I know sir,

 

$rows[$i]['Cellid'] = "<td style='text-align:left' onclick='getComments(" . $row['Cellid'] . ")'>" . $row['Cellid'] . "</td>";

 

Now I have to write a function

getComments.

 

I have tried a few things but it does not work.

 

It would be great if you help with some example.

[d.shankar]

What my idea suggests is that it wont open a blank window or a target frame..

 

It will just display the comments in a tool tip

.. for instance, Try to hover your mouse over the "Start" button in the taskbar , if you are using windows. You will get the msg "Click here to begin"

 

 

So in this case when you hover your mouse over the CELLid it will query the respective CELLid information from the comments table..

 

Am i clear ??

 

[shruti]

I have tired to make the function.............IS IT RIGHT??

IT DOESN'T WORK..................... :'(

 

function getComments(x){

 

$data = mysql_query("SELECT * from comments where  Cellid='$x'")

$num_data = mysql_num_rows($data);

 

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

 

$row = mysql_fetch_array($data);

 

echo "<tr><td style='color: #666666;text-align:left;font-size:small;font-family:Tahoma'>" .$row['CELLID'] . "</td> ";

echo "<td style='color: #666666;text-align:left;font-size:small;font-family:Tahoma'>" .$row['problem'] . "</td> ";

echo "<td style='color: #666666;text-align:left;font-size:small;font-family:Tahoma'>" .$row['solution'] . "</td> ";

echo "<td style='color: #666666;text-align:left;font-size:small;font-family:Tahoma'>" .$row['comments'] . "</td>";

                                }

 

}

[craygo]

Here is some code for you to try. I pieced this together from some site I found. I hope you can figure it out to apply to your own tables and fields.

 

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2006,2007 Bontrager Connection, LLC
// http://bontragerconnection.com/ and http://www.willmaster.com/
// Version: July 28, 2007
var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {
rX = self.pageXOffset;
rY = self.pageYOffset;
}
else if(document.documentElement && document.documentElement.scrollTop) {
rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
}
else if(document.body) {
rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}
d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
//-->
</script>

</head>

<body>
<table width="300" align="center" />
  <tr>
    <td>MakeID</td>
    <td>Make</td>
    <td>Veh Type</td>
  </tr>
<?php
// database connection here


function create_div($width, $fields, $table, $w_field, $w_value, $unique){
$f = implode("`, `", $fields);
$sql = "SELECT `$f` FROM `$table` WHERE `$w_field` = '$w_value'";
$res = mysql_query($sql) or die(mysql_error());
$div = "<div id=\"data".$unique."\" style=\"display:none; position:absolute; border-style:solid; background-color:white; padding: 0px; width:".$width."px\" />\n";
  while($r = mysql_fetch_assoc($res)){
    foreach($fields as $name){
    $div .= $r[$name]." ";
    }
  $div .= "<br />";
  }
$div .= "</div>\n";
return $div;
}

$sql = "SELECT * FROM makes";
$res = mysql_query($sql) or die(mysql_error());
$i=0;
$fields = array("model_id", "model_name");
while($r = mysql_fetch_assoc($res)){
  echo create_div("200", $fields, "models", "makeid", $r['make_id'], $i);
?>
  <tr>
    <td><?php echo $r['make_id']; ?></td>
    <td><a onmouseover="ShowContent('data<?php echo $i; ?>'); return true;" onmouseout="HideContent('data<?php echo $i; ?>'); return true;" href="javascript:ShowContent('data<?php echo $i; ?>')"><?php echo $r['make_name'];?></a>
    </td>
    <td><?php echo $r['veh_type']; ?></td>
  </tr>
<?php
$i++;
}
?>
</table>
</body>
</html>

 

If you need help let me know

 

Ray

 

[shruti]

Thank you craygo

 

I am newbie. Your code is scaring me.

 

Can you work with my code to help me.???

No one is help me ......I am so frustrated.  :'(

:'(

 

:'(

[revraz]

Sounds like it's time you hit the Freelance section.

[obsidian]

No one is help me ......I am so frustrated.  :'(

 

I understand your frustration, but also realize that everyone who has taken the time to give you a thoughtful response is trying to help you. There is a fine line between seeking for help to aid you in learning and wanting to have someone write your code for you. With that in mind, revraz may have the best solution for you at this point. Try to find someone willing to modify your code directly if you don't want to study the suggestions and learn how to best do it yourself.

 

Good luck!

[craygo]

i think you may have you tables a little mixed up. If your main table is traff and the linked table is comments, and there can be more than one comment per row, you need to change the way the link is. You need to drop the CELLID from the traff table and add the BSCID to the comments table. That way there can be more that one comment per row in the traff table. As you have it now there can be one comment to many traff rows.

 

Ray