Geek asks and answers

Using jQuery Tablesorter with a prototype

I'm having problems adding jQuery tablesorter functions in an old application using Prototype.js. I would use TableKit, but the table I want to sort is built + cleared dynamically in the AJAX callback, something that TableKit does not handle. Works great, except when I try to call the tablesorter cache update:

// Clear the list view
$$('#scrollingList tr.dataRow').each(function(e) { 
    e.remove();
});

addMapMarkers(); // This function rebuild the sortable table

// triggering update to clear tablesorter cache
jQuery('#soundTable').trigger('update');

When the callback "update" produces an error table. tBodies [0] - undefined.

I shot down a simplified test case and it worked fine if I didn't include the prototype.js library, so I'm pretty sure it's compatible between jQuery and Prototype. I really don't want to rewrite all this in jQuery just for using tablesorter, so any help would be well received. Thank.

Here is a simple example code ...

<script type="text/javascript" src="../jquery-latest.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js" type="text/javascript"></script>
<script type="text/javascript">

    jQuery(document).ready(function() {
    jQuery("table").tablesorter(); 
    jQuery("#append").click(function() {

    // add some html
    var html = "<tr id='deltest' class='data'><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>";
    html += "<tr class='data'><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>";
    html += "<tr class='data'><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>";        
    html += "<tr class='data'><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>";

    var sorting = [[2,1],[0,0]];

   // append new html to table body 
    jQuery("table tbody").append(html);

    jQuery('tr').click(function(){  
    jQuery(this).remove();
    jQuery('table').trigger('update');
    jQuery("table").trigger("sorton",[sorting]) 

   }) 
  return false;
    });
});
</script>

I have a table that is dynamically created, attached a click handler to the first row. Clicking on the first row after building the table deletes the row and starts the update. As I say, it works fine without prototype.js, it gets the same error if enabled, which, I think, indicates a jQuery / Prototype conflict.

+5
source share
1 answer

. : , Prototype update DOM, .

, , :

:

  • |
  • |

100%, , , , Prototype , , Prototype . , , table.tbodies[0] is undefined, , .

, : . script , jQuery('table').trigger(...). - , tablesorter. trigger, ( ).

: , jQuery('table').trigger('update'). , . , ; , .

? , trigger: , , "" DOM, , . , 'click', "domelement.click(event) to call any old-style DOM0 handlers on the element. Similarly if you trigger an 'update' event, eventually it will call 'domelement.update(event), DOM ​​.

, Prototype : Prototype update DOM. jQuery html: , . , tbody. jQuery Prototype update , .

, Prototype, :

jQuery(function($) {

  var p = document.createElement('p');
  p.innerHTML = "Hi there";
  p.update = function() {
    display("<code>update</code> called on paragraph");
  };

  document.body.appendChild(p);

  $("#theButton").click(function() {
    $("p").trigger("update");
  });

  function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }
});

|

, , , , update .

jQuery('table').trigger('update'). tablesorter, , "update", ( ). , tablesorter Prototype, , , , , "" (, "tableupdate" ).

+5

More articles:


All Articles