tags:

views:

33

answers:

2
Q: 

Display JQuery UI Tooltip after table reset

All,

I am trying to get JQueryUI tooltip and Tablesorter plugin to work together. I am unable to display the JQueryUI tooltip when I hover on the names but the tooltip won't appear after I click the "Reset Sort Order" link.

How can I make sure the tooltip is displayed after I click the "Reset Sort Order" link. The tooltip should also be displayed when the table is sorted or paged.

A demo of the code can be seen at: http://jsbin.com/asaxi3/32/

The code is here:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
  <title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
  <link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
  <link rel="stylesheet" href="http://tablesorter.com/themes/blue/style.css" type="text/css" media="print, projection, screen" />
  <link rel="stylesheet" type="text/css" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css"&gt;
  <script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://tablesorter.com/jquery.tablesorter.js"&gt;&lt;/script&gt;
  <script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"&gt;&lt;/script&gt;
  <script  type="text/javascript" src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"&gt;&lt;/script&gt;
</head>
<body>
<div id="main">
<table id="table1" cellspacing="1" class="tablesorter">

  <thead>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th>Sex</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#" title="I am Student01">Student01</a></td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>

      <td><a href="#" title="I am Student02">Student02</a></td>
      <td>Mathematics</td>
      <td>male</td>

    </tr>
    <tr>
      <td><a href="#" title="I am Student03">Student03</a></td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>

      <td><a href="#" title="I am Student04">Student04</a></td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td><a href="#" title="I am Student05">Student05</a></td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>
      <td><a href="#" title="I am Student06">Student06</a></td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student07</td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student08</td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student09</td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student10</td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student11</td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student12</td>
      <td>Mathematics</td>
      <td>female</td>
    </tr>
    <tr>
      <td>Student13</td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>
      <td>Student14</td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>
      <td><a href="#" title="I am Student15">Student15</a></td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student16</td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>
      <td><a href="#" title="I am Student17">Student17</a></td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    <tr>
      <td><a href="#" title="I am Student18">Student18</a></td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student19</td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student20</td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student21</td>
      <td>Languages</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student22</td>
      <td>Mathematics</td>
      <td>male</td>
    </tr>
    <tr>
      <td>Student23</td>
      <td>Languages</td>
      <td>female</td>
    </tr>
    </tbody>
</table>
<div id="pager1" class="pager">
  <form>
    <a href="javascript:resetTableOrder(tablebackup)">Reset Sort Order</a>&nbsp;
    <img src="http://tablesorter.com/addons/pager/icons/first.png" class="first"/>
    <img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev"/>
    <input type="text" class="pagedisplay"/>
    <img src="http://tablesorter.com/addons/pager/icons/next.png" class="next"/>
    <img src="http://tablesorter.com/addons/pager/icons/last.png" class="last"/>
    <select class="pagesize">
      <option selected="selected"  value="10">10</option>
      <option value="20">20</option>
      <option value="30">30</option>
      <option  value="40">40</option>
    </select>    
  </form>
</div>
  <script type="text/javascript">
  $(function() {
    $("#table1 a").tooltip({
                showURL: false,
                fixPNG: true,
                track:true,
                delay:0
                });
    tablebackup = $("#table1").clone();
    $("#table1")
      .tablesorter({widthFixed: true, widgets: ['zebra']})
      .tablesorterPager({container: $("#pager1")});
  });


    function resetTableOrder(tablebackup) {

    tablebackup.clone().insertAfter("#table1");
    $("#table1").remove();
    $("#table1")
      .tablesorter({widthFixed: true, widgets: ['zebra']})
      .tablesorterPager({container: $("#pager1")});
          //Load Tool Tips for links inside the tab container
    $("#table1 a").tooltip({
                showURL: false,
                fixPNG: true,
                track:true,
                delay:0
                });
    }
  </script>
</div>

</body>
</html>

Thanks

+2  A: 

When you initialize tooltip the first time, it removed the title attribute from the tag. Then when the table is refreshed, it cannot find the title tag for each link and therefore skips it. I would recommend caching the title tags so when you reinitialize the tooltip, you can reinsert the original title tags. 

var tableTitles;

$(function() {
    tableTitles = $("#table1 a").attr("title");
    $("#table1 a").tooltip({
                showURL: false,
                fixPNG: true,
                track:true,
                delay:0
                });
tablebackup = $("#table1").clone();
$("#table1")
  .tablesorter({widthFixed: true, widgets: ['zebra']})
  .tablesorterPager({container: $("#pager1")});
  });


function resetTableOrder(tablebackup) {

tablebackup.clone().insertAfter("#table1");
$("#table1").remove();

$("#table1")
  .tablesorter({widthFixed: true, widgets: ['zebra']})
  .tablesorterPager({container: $("#pager1")});
      //Load Tool Tips for links inside the tab container
 $("#table1 a").attr("title", tableTitles).tooltip({
            showURL: false,
            fixPNG: true,
            track:true,
            delay:0
            });
}

Here is the working version: http://jsbin.com/asaxi3/36

Zacho  2010-06-25 15:56:26
Wow.. Nice observation !! I wonder how you knew the title tags were skipped.. Thanks for the solution !
Vincent  2010-06-25 16:02:48
I think this soluition broke another scenario. When You click on "Reset Sort Order" and go to the second page, the tooltips are gone again :( Can you please take a look?
Vincent  2010-06-25 16:10:01
I will have to glance later. It is good practice to see why that is failing. As for your first comment, I use Firefox with Firebug to debug the tool tip JS. Then by setting breakpoints I could see exactly what line it was skipping.
Zacho  2010-06-25 19:02:06
A: 

Vincent, it's looking good. Seems like you're on the right track.

I was on a similar project and found that the entire thing seemed much easier and more feature rich when I switched over go Qtip and Datatables. The switch from the exact solution you're using to the new scripts gave my app night and day difference in functionality and useability...and the changeover was quick.

Here's links to the other tools: Qtip: http://craigsworks.com/projects/qtip/ Datatables: http://datatables.net/

The sorting and searching features alone on Datatables make it a must see.

Good luck!

bpeterson76  2010-06-25 18:00:38
Wow.. thanks for the suggestion.. Datatable looks really nice... I will try it out !! :D
Vincent  2010-06-25 18:18:36

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?