jQuery tool tip pulling DESCRIPTION from database

I am wondering if it is possible to use say a call back function like in jQuery. Display a tool tip but when a user goes over the DIV/A it will show the description of a certain ID in the database?

Using: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

Any suggestions?

Thanks!
LVL 1
catonthecouchproductionsAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
"I have all of that dont I? do you know why I am gettting that JS error?"

No you did not. No ID - please check:::

This is yours:

<a href="#" class="jTip" rel="description.php?id=62&width=375&name=Description%20is%20as%20follows:">TEST TOOL TIP!</a>

Should have been

<a href="#" ID="TEST" class="jTip" rel="description.php?id=62&width=375&name=Description%20is%20as%20follows:">TEST TOOL TIP!</a>


-----------

You wrote:
"But did you see on there site they have name as
    name="NAME HERE"
not in the REL"

Who?? what?? where???

Just please follow ALL instructions and it will work...
0
 
Michel PlungjanIT ExpertCommented:
If you want the tooltip to call the server only when mousing over you need

1. write the php that queries the DB
2. test that it works using normal url
3. wire it into the jQuery tool tip with ajax


0
 
catonthecouchproductionsAuthor Commented:
Alrighty, let me try that ahead of time! Ill let you know! I might need some help wit that!.

Ryan
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
catonthecouchproductionsAuthor Commented:
I have this so far and I get the other end of the if the Error Has Occured
<?php
if($_REQUEST["paper"]){
	$id     = $_REQUEST["paper"];
	$sql    = "SELECT * FROM papers WHERE description=$id";
	$query  = mysql_query($sql) or die(mysql_error());
	
	while($row = mysql_fetch_array($query)){
		print "<p>Description: ".$row["description"]."</p>";
	}	
}else{
	echo "Error has occured";
}
?>

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
0
 
catonthecouchproductionsAuthor Commented:
I got it, here is my newest code and after looking at the JS for it, I have this so far:
<?php
if($_REQUEST["id"]){
	$id     = $_REQUEST["id"];
	$sql    = "SELECT * FROM papers WHERE id=$id";
	$query  = mysql_query($sql) or die(mysql_error());
	
	while($row = mysql_fetch_array($query)){
		print "<p>".$row["description"]."</p>";
	}	
}else{
	echo "Error has occured";
}
?>
 
 
 
JS ---------------------------------------------
 
$("#desc").Tooltip({ 
    track: true, 
    delay: 0, 
    showURL: false, 
    opacity: 1, 
    fixPNG: true, 
    showBody: " - ", 
    extraClass: "pretty"
}); 

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Sorry, I was offline for a while

Where are you now?

Still need some assistance and with which part?

I see an error has occurred on the link you gave.
http://newspapersofamerica.com/new/index.php?p=description&paper=96

Also have you decided to include all the IDs on the page at once (simpler) instead of pulling them in one by one on mouseover?
0
 
catonthecouchproductionsAuthor Commented:
Thats fine! I have this now - http://newspapersofamerica.com/new/index.php?p=description&id=96 - changed paper to id. I am stuck on the ajax part for the tooltip I have my JS set up but I am confused how to get it with ajax? Use the call back function with jquery?

>>Also have you decided to include all the IDs on the page at once (simpler) instead of pulling them in one by one on mouseover?

What do you mean by that? Wouldn't the only way be to on mouseover show id X

Thanks,
Ryan
0
 
Michel PlungjanIT ExpertCommented:
You can pull all the possible IDs in when you load the page with just the php in the page.
Ajax is normall only used if there are too many possible values to load in one page at once
0
 
catonthecouchproductionsAuthor Commented:
Oh that is true..so you are saying load all the IDs with the descriptions? Then pull using ajax? Am I right? I am stuck on that part, any suggestions?

How would i alter my PHP to do that?

Thanks,
Ryan
0
 
Michel PlungjanIT ExpertCommented:
No I say EITHER load ALL descriptions in ONE go (super simple - no big change to your php needed - just create an array of descriptions)
OR load them one at a time with Ajax
0
 
catonthecouchproductionsAuthor Commented:
Ohh..what would you recommend this is my first approach at this?
0
 
Michel PlungjanIT ExpertCommented:
<script>
var myDescs = new Array();
<?php
if($_REQUEST["id"]){
        $id     = $_REQUEST["id"];
        $sql    = "SELECT * FROM papers WHERE id=$id";
        $query  = mysql_query($sql) or die(mysql_error());
       
        while($row = mysql_fetch_array($query)){
                print "\nmyDescs[myDescs.length]=\"".$row["description"]."\";";
        }      
}else{
        echo "alert('Error has occured')";
}
?>
</script>

have a look at view-source of the result

It should say
<script>
var myDescs = new Array();
myDescs[myDescs.length]="description 1";
myDescs[myDescs.length]="description 2";
myDescs[myDescs.length]="description 3";
</script>

and then you can use

document.getElementById('id3').title=myDescs[3];

for example
0
 
catonthecouchproductionsAuthor Commented:
I get an error when I run that, I get the alert box. Any suggestions? Is there any other way to do this, because in the long run I am going to have 1600 descriptions for each row? It wouldnt be easier to use the PHP file I created then use jquery tooltiip and call back to bring in each description for the correct ID?
0
 
Michel PlungjanIT ExpertCommented:
first get your php to return SOMETHING

Then we need to use Ajax since yo uhave too many descriptions for one page assuming you have 1600 items on ONE page you need to describe (why so many???)
0
 
catonthecouchproductionsAuthor Commented:
I have so many because there are about 1600 papers if you go http://www.newspapersofamerica.com/new/index.php?p=daily and click a state it has each paper, each paper will have a description and then use a tool tip mouse over to show it.

I have my php get results - http://www.newspapersofamerica.com/new/index.php?p=description&id=96

This pulls the results of the ID from 96, not all of them have ids yet, i just added in 96.

Ryan
0
 
Michel PlungjanIT ExpertCommented:
Ok, now you need to make that php ONLY return the description string - nothing else
If you need to, make a new php
description.php?p=description&id=96

so it can be called by the Ajax
0
 
Michel PlungjanIT ExpertCommented:
Like this:
var currentId = "";
function getTip(myObject) {
  if (myObject.title) return; // no need to get it more than  oce
  currentId=myObject.id;
  $.get("description.php", { p: "description", id: currentId },
    function(data){
      if (currentId) document.getElementById(currentId).title=data;
    });
}

you MAY need to call the mouseover of the object and/or add a letter to the ID to not make it numeric...
0
 
catonthecouchproductionsAuthor Commented:
Alrighty, on this part I am kind of confused about - http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ - you set a tag to do the mouse over but how will you call the tooltip?

EX CODE:

$('label').Tooltip({
  delay: 0,
  track: true,
  event: "click"
});
0
 
Michel PlungjanIT ExpertCommented:
0
 
catonthecouchproductionsAuthor Commented:
Yeah...just like that, on the hover it will show the description of the specific ID.
0
 
Michel PlungjanIT ExpertCommented:
So visit
http://15daysofjquery.com/jquery-tooltips/21/

If you are lazy, grab the files from my site (view-source:http://www.plungjan.name/ee/testjq.html) and see how you pass the url to return the description in the REL attribute


The php just did this:

<?php
 
if ($_GET["id"] == "96") {
  echo "<b>ID 96</b>: Read North East and Newcastle news  from ChronicleLive, the <i>Evening Chronicle</i> newspaper online.<br>All the latest on Newcastle Utd, Sunderland AFC and more.";
} 
else {
  echo "Description not found";
}
 
?>

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
Thank you! Let me try this out, ill post my results, I might have some questions..Ill give this a go!
0
 
catonthecouchproductionsAuthor Commented:
So i started to implement it, i cant get anything to display. I see how this is starting to work. I pasted yours to try to get something working and nothing so far.

You gave me this code as well, the get ID description (at bottom of page) - Is there a way to retrieve it from t he database according to what ID is being displayed on the row? Does my old code work for that? The PHP works fine.

At the very bottom.
Any suggestions?
Thanks a ton for your help!
while($row = mysql_fetch_array($query)){
	print "<tr>";
		print "<td>".$row["name"]."</td>"; 
		print "<td>".$row["city"]."</td>"; 
		print "<td>".$row["circulation"]."</td> ";
		print "<td>$".$row["price"]."</td> ";
		print "<td class=\"desc\" align=\"center\"><span class=formInfo\"><a href=\"#\" rel=\"description.php?id=96&width=375&amp;name=Description%20is%20as%20follows:\"><img src=\"images/newspaper.png\" alt=\"description\" /></a></span></td>";
		print "<td align=\"center\"><a href=\"#\"><img src=\"images/dollar.png\" alt=\"purchase\" /></a></td>";
	print "</tr>";
	}
 
 
GET ID CODE ###################################
 
<?php
 
if ($_GET["id"] == "96") {
  echo "<b>ID 96</b>: Read North East and Newcastle news  from ChronicleLive, the <i>Evening Chronicle</i> newspaper online.<br>All the latest on Newcastle Utd, Sunderland AFC and more.";
} 
else {
  echo "Description not found";
}
 
?>
 
 
MY DESCRIPTION CODE #############################################
 
 
<?php
if($_REQUEST["id"]){
	$id     = $_REQUEST["id"];
	$sql    = "SELECT * FROM papers WHERE id=$id";
	$query  = mysql_query($sql) or die(mysql_error());
	
	while($row = mysql_fetch_array($query)){
		print "<p>".$row["description"]."</p>";
	}	
}else{
	echo "Error has occured";
}
?>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
I fail to understand your problems

Copy my code from the html and upload the js files to your server,

use

<a target="_blank" href="somelink.html" class="jTip" id="someLink" rel="desc.php?id=95&link=whatever&width=375&amp;name=Description%20of%paper:">Google</a>


where 95 is the ID of that newspaper and desc.php could look like this:

<?php
if($_REQUEST["id"]){
        $id     = $_REQUEST["id"];
        $sql    = "SELECT * FROM papers WHERE id=$id";
        $query  = mysql_query($sql) or die(mysql_error());
print "<table>";        
while($row = mysql_fetch_array($query)){
        print "<tr>";
                print "<td>".$row["name"]."</td>"; 
                print "<td>".$row["city"]."</td>"; 
                print "<td>".$row["circulation"]."</td> ";
                print "<td>$".$row["price"]."</td> ";
                print "<td class=\"desc\" align=\"center\"><span class=formInfo\"><a href=\"#\" rel=\"description.php?id=96&width=375&amp;name=Description%20is%20as%20follows:\"><img src=\"images/newspaper.png\" alt=\"description\" /></a></span></td>";
                print "<td align=\"center\"><a href=\"#\"><img src=\"images/dollar.png\" alt=\"purchase\" /></a></td>";
        print "</tr>";
        }
print "</table>";
}else{
        echo "Error has occured";
}
?>

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
I made your code above in to desc.php and I pasted the code in my papers.php code.

http://www.newspapersofamerica.com/new/index.php?p=papers&state=3

And I get no results

Any suggestions?
0
 
catonthecouchproductionsAuthor Commented:
In my firebug I get two errors:

jQuery is not defined
http://www.newspapersofamerica.com/new/index.php?p=papers&state=3
Line 15

I had to use jquery no conflict to work

$ is not defined
http://www.newspapersofamerica.com/new/js/jtip.js
Line 9

Any suggestions?

Thanks!
<script type="text/javascript">
// prevent conflict with niceforms
var J = jQuery.noConflict();
// code for table sorting
$(document).ready(function() { 
	J("#myTable").tablesorter();
});
// code for editing in place
$(document).ready(function() {
 
   J(".name").editInPlace({
               url: "save.php",
			   bg_out: "#FFFFFF"
       });
 
   J(".state").editInPlace({
               url: "save.php",
		 	   bg_out: "#FFFFFF"
       });
 
   J(".circulation").editInPlace({
               url: "save.php",
			   bg_out: "#FFFFFF"
       });
 
   J(".price").editInPlace({
               url: "save.php",
			   bg_out: "#FFFFFF"
       });
});
$(document).ready(function() { 
Date.firstDayOfWeek = 7;
Date.format = 'mm/dd/yyyy';
	J('.date-pick').datePicker()
});
</script>

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
I made sure both of my files are updated and my code looks correct, but I cant see a tool tip at all? Any ideas?
0
 
catonthecouchproductionsAuthor Commented:
Doesnt that seem a bit too much and the code I had for description.php would work. Since we need the description.

The code after the one I posted is the one I came up with.



<?php
if($_REQUEST["id"]){
        $id     = $_REQUEST["id"];
        $sql    = "SELECT * FROM papers WHERE id=$id";
        $query  = mysql_query($sql) or die(mysql_error());
print "<table>";        
while($row = mysql_fetch_array($query)){
        print "<tr>";
                print "<td>".$row["name"]."</td>"; 
                print "<td>".$row["city"]."</td>"; 
                print "<td>".$row["circulation"]."</td> ";
                print "<td>$".$row["price"]."</td> ";
                print "<td class=\"desc\" align=\"center\"><span class=formInfo\"><a href=\"#\" rel=\"description.php?id=96&width=375&amp;name=Description%20is%20as%20follows:\"><img src=\"images/newspaper.png\" alt=\"description\" /></a></span></td>";
                print "<td align=\"center\"><a href=\"#\"><img src=\"images/dollar.png\" alt=\"purchase\" /></a></td>";
        print "</tr>";
        }
print "</table>";
}else{
        echo "Error has occured";
}
?>
 
 
 
DESCRIPTION.PHP ################################
 
 
 
<?php
if($_REQUEST["id"]){
	$id     = $_REQUEST["id"];
	$sql    = "SELECT * FROM papers WHERE id=$id";
	$query  = mysql_query($sql) or die(mysql_error());
	
	while($row = mysql_fetch_array($query)){
		print "<p>".$row["description"]."</p>";
	}	
}else{
	echo "Error has occured";
}
?>

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
I had some errors, i fixed them all, i had a conflict with some other JS I was using and i had to use - http://docs.jquery.com/Using_jQuery_with_Other_Libraries

I set that up and had to alter my jtip.js file for the functions to change "$" to "$j" to fix them all.

No errors no with firebug, any suggestions?
// prevent conflict with niceforms
var $j = jQuery.noConflict();
// code for table sorting
$j(document).ready(function() { 
	$j("#myTable").tablesorter();
});
// code for editing in place
$j(document).ready(function() {
 
   $j(".name").editInPlace({
               url: "save.php",
			   bg_out: "#FFFFFF"
       });
 
   $j(".state").editInPlace({
               url: "save.php",
		 	   bg_out: "#FFFFFF"
       });
 
   $j(".circulation").editInPlace({
               url: "save.php",
			   bg_out: "#FFFFFF"
       });
 
   $j(".price").editInPlace({
               url: "save.php",
			   bg_out: "#FFFFFF"
       });
});
$j(document).ready(function() { 
	Date.firstDayOfWeek = 7;
	Date.format = 'mm/dd/yyyy';
	$j('.date-pick').datePicker()
});

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
I have this: http://www.newspapersofamerica.com/new/index.php?p=desc&id=4

That is what will be returned correct?

0
 
Michel PlungjanIT ExpertCommented:
Sorry, I am in CET. I was not online.

I will look
0
 
Michel PlungjanIT ExpertCommented:
try

<a href="#" class="jTip" rel="description.php?id=96&width=375&amp;name=Description%20is%20as%20follows:">

and fix your description.php


Warning: mysql_query(): Can't connect to local MySQL server through socket '....'(2) in .... description.php on line 5

Warning: mysql_query(): A link to the server could not be established in .... description.php on line 5
Can't connect to local MySQL server through socket '....' (2)

0
 
catonthecouchproductionsAuthor Commented:
Hey. I did, I was making my config file use both local/remote server to connect, If you go http://www.newspapersofamerica.com/new/index.php?p=description&id=62

You will see that pulls the description from row 62.

<?php
if($_REQUEST["id"]){
	$id     = $_REQUEST["id"];
	$sql    = "SELECT * FROM papers WHERE id=$id";
	$query  = mysql_query($sql) or die(mysql_error());
	
	while($row = mysql_fetch_array($query)){
		print "<p>".$row["description"]."</p>";
	}	
}else{
	echo "Error has occured";
}
?>

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
I get this error on mouse over my the link:

    >> oLeft = o.offsetLeft // Get left position from the parent object

>>o has no properties
http://www.newspapersofamerica.com/new/js/jtip.js
Line 55
0
 
catonthecouchproductionsAuthor Commented:

<a href="#" class="jTip" rel="description.php?id=62&width=375&amp" name="Description%20is%20as%20follows:">TEST TOOL TIP!</a>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
0
 
catonthecouchproductionsAuthor Commented:
It shoud be now I am using header.php/footer.php and loading content in between with PHP so I have my config.php file in my header.php file. Let me add it now for it works. Should be working.
0
 
catonthecouchproductionsAuthor Commented:
I did that..any suggestions now?

THanks!
Ryan
0
 
Michel PlungjanIT ExpertCommented:
Where is the example with the
<a href="#" class="jTip"
rel="description.php?id=62&width=375&name=Description%20is%20as%20follows:">TEST TOOL TIP!</a>

then?

Notice the lack of quote
0
 
catonthecouchproductionsAuthor Commented:
0
 
Michel PlungjanIT ExpertCommented:
Should be

rel="description.php?id=62&width=375&name=Description%20is%20as%20follows:">
0
 
catonthecouchproductionsAuthor Commented:
I changed that and still nothing - I get a JS error, do you? On mouseoever on that image.
0
 
catonthecouchproductionsAuthor Commented:
http://www.codylindley.com/blogstuff/js/jtip/ at the site if you view source t hey have the name as its on attribute.
0
 
catonthecouchproductionsAuthor Commented:
I get this js error:

 Error: o has no properties
Source File: http://www.newspapersofamerica.com/new/js/jtip.js
Line: 55
0
 
Michel PlungjanIT ExpertCommented:
You did not have an ID!

Please make the links look like the ones in the examples I have given you.


Todays News Heralds:


<a href="#" class="jTip" id="paper96" rel="description.php?id=96&width=300&name=Description%20as%20follow:"><img src="images/newspaper.png" alt="description" /></a>
0
 
Michel PlungjanIT ExpertCommented:
So
1. class="jTip"
2. unique ID
3. No spaces and no quotes in the REL

Feel free to change
&name=Description%20as%20follow:
to whatever you wish as long as you substitute %20 for spaces
0
 
catonthecouchproductionsAuthor Commented:
I have all of that dont I? do you know why I am gettting that JS error?

Ryan
0
 
catonthecouchproductionsAuthor Commented:
But did you see on there site they have name as

    name="NAME HERE"

not in the REL
0
 
catonthecouchproductionsAuthor Commented:
I get this now - http://www.newspapersofamerica.com/new/index.php?p=papers&state=3

Try it out, I get the whole page, any idea how to get one Id, haha.

Thanks,
RYan
0
 
Michel PlungjanIT ExpertCommented:
Try giving it an href

<a href="http://www.newspapersofamerica.com/new/description.php?id=62"
class="jTip" id="test" rel="description.php?id=62&width=375&name=Description%20is%20as%20follows:">TEST TOOL TIP!</a>
0
 
catonthecouchproductionsAuthor Commented:
One last quick question! I got the rest to show up! Thanks so much for your help and guiding me through this.

How would I get it to show "Nothing to display" If there is no description?
<?php
include_once ("config.php");
if($_REQUEST["id"]){
	$id     = $_REQUEST["id"];
	$sql    = "SELECT * FROM papers WHERE id=$id";
	$query  = mysql_query($sql) or die(mysql_error());
	
	while($row = mysql_fetch_array($query)){
		print "<p>".$row["description"]."</p>";
	}	
}else{
	echo "Error has occured";
}
?>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
change

while($row = mysql_fetch_array($query)){
            print "<p>".$row["description"]."</p>";
      }      

to

$desc = "";
while($row = mysql_fetch_array($query)){
  &desc.="<p>".$row["description"]."</p>";
}      
if ($desc=="") {
  $desc = "Nothing to display";
}
0
 
Michel PlungjanIT ExpertCommented:
PS: Feel free to visit my profile....
0
 
catonthecouchproductionsAuthor Commented:
Thank you, i get this now":

[Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]"  nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)"  location: "<unknown>"  data: no]

Line 0

And no idea why.
0
 
catonthecouchproductionsAuthor Commented:
Nevermind, I got it!
0
 
catonthecouchproductionsAuthor Commented:
i have this and it display nothing no matter what...any ideas?
<?php
include_once ("config.php");
if($_REQUEST["id"]){
	$id     = $_REQUEST["id"];
	$sql    = "SELECT * FROM papers WHERE id=$id";
	$query  = mysql_query($sql) or die(mysql_error());
	
	$desc = "";
	while($row = mysql_fetch_array($query)){
    	$desc.="<p>".$row["description"]."</p>";
	}
	if ($desc=="") {
		$desc = "Nothing to display";
	}
 
}else{
	echo "Error has occured";
}
?>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
oops

$desc = "";
while($row = mysql_fetch_array($query)){
  $desc.="<p>".$row["description"]."</p>";
}
if ($desc=="") {
  $desc = "Nothing to display";
}
echo $desc;
0
 
catonthecouchproductionsAuthor Commented:
I still get the same results..any ideas?

Thanks man!

<?php
include_once ("config.php");
if($_REQUEST["id"]){
	$id     = $_REQUEST["id"];
	$sql    = "SELECT * FROM papers WHERE id=$id";
	$query  = mysql_query($sql) or die(mysql_error());
	
	$desc = "";
	while($row = mysql_fetch_array($query)){
    	$desc.="<p>".$row["description"]."</p>";
	}
	if ($desc=="") {
		$desc = "Nothing to display";
	}
	echo $desc;
 
}else{
	echo "Error has occured";
}
?>

Open in new window

0
 
catonthecouchproductionsAuthor Commented:
0
 
Michel PlungjanIT ExpertCommented:
Where?

I get test description on the test link

I get test test test
on
http://newspapersofamerica.com/new/description.php?id=63

I get error on
http://newspapersofamerica.com/new/description.php?id=0
and on http://newspapersofamerica.com/new/description.php?id=63X



Try

$found = false;
while($row = mysql_fetch_array($query)){
  $desc.="<p>".$row["description"]."</p>";
  $found=true;
}
if ($found) echo $desc;
else echo "Nothing to display";

If that does not work, please post a new question in the php area on how to test a fetch returns something
0
 
catonthecouchproductionsAuthor Commented:
That didnt work, ill go post another question..thank you!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.