4

I have a draggable table with preloaded "new items" - sorta like the Power Edit feature of the menu_editor module. Everything works perfect.

However, I want to have a button that adds a new row via jquery. I was able to do this via the following code. However, the new rows added by jquery are not draggable. What can i do to make it work? Is it even possible?

var preloaded_items_count = '.$preloaded_items_count.';
$("#edit-add-new-item").click(function(){
  var append_tr = $("#guide-pages-table tr:last").clone();
  var replace_pattern = new RegExp("new-" + preloaded_items_count, "g");
  var new_item_id = "new-" + (preloaded_items_count + 1);

  //append_tr.find("a.tabledrag-handle").remove();
  append_tr.html(append_tr.html().replace(replace_pattern,new_item_id));
  preloaded_items_count = preloaded_items_count + 1;

  //Drupal.tableDrag.prototype.makeDraggable(append_tr);
  $("#guide-pages-table > tbody:last").append(append_tr);
  return false;
});

enter image description here

0

As I can not reproduce your case, this answer just is a suggestion:

look at misc/tabledrag.js:

Drupal.tableDrag.prototype.makeDraggable = function (item) {

So you need re-running necessary javascript after adding new row.

Drupal.attachBehaviors($('#guide-pages-table > tbody:last'));
3
  • Yes, this is where I got the Drupal.tableDrag.prototype.makeDraggable(append_tr); idea. However, i still cannot make it work. I tried the makeDraggable function on my table, instead of the row, to no avail. Thanks btw.
    – Bibokid
    Feb 21 '13 at 14:33
  • Drupal.attachBehaviors($(this)); Feb 21 '13 at 14:34
  • I am not entirely sure what .attachBehaviors will do. I tried adding Drupal.attachBehaviors($('#guide-pages-table > tbody:last')); at the bottom of my code but it still won't work :P
    – Bibokid
    Feb 21 '13 at 14:43
0

This is how you can do it:
(For D7, I hope it is the same or similar in D6)

var $table = $('<table>').appendTo($container);
var $tbody = $('<tbody>').appendTo($table);
var drupalTableDrag = new Drupal.tableDrag($table[0], {});
var $newRow = $('<tr>').appendTo($tbody);
drupalTableDrag.makeDraggable($tr[0]);

The essential thing to learn is that Drupal.tableDrag acts as a class constructor, and you are supposed to call makeDraggable() from the constructed object.

If Drupal already created this object for you, you will find it in Drupal.tableDrag[base], where base is whatever key was used in the settings.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.