Issues with adding new table's row with JQuery

Question

I follow the instruction for adding new table’s row from: Add table row in jQuery

A new row was successfully added but it didn’t get the other rows’ feature (highlight, draggable,…).

The table:

<table id="pubTab">
            <thead>
            <tr>
                <td align="center">col1</td>
                <td align="center">col2</td>
                <td align="center">col3</td>
                <td align="center">col4</td>
            </tr>
            </thead>
            <tbody>
            <tr id="1">
                <td>+++<input type="text" size="40"/></td>
                <td><input type="text" size="10"/></td>
                <td><input type="text" size="50"/></td>
                <td><input type="text" size="10" /></td>
            </tr>
            <tr id="2">
                <td>+++<input type="text" size="40"/></td>
                <td><input type="text" size="10"/></td>
                <td><input type="text" size="50"/></td>
                <td><input type="text" size="10"/></td>
            </tr>
            </tbody>
        </table>
<input id="addPubTab" type="button" value="ADD" style="background-color:green; width: 170px"/>

The jQuery script:

<script type="text/javascript">
        $(document).ready(function(){
            $("#addPubTab").click(function(){
                var id = "3";
                var value = "<tr id=\""+id+"\">"+
                            "<td>+++<input type=\"text\" size=\"40\" name=\"collection_name\""+id+"/></td>"+
                            "<td><input type=\"text\" size=\"10\" name=\"service_name\""+id+"/></td>"+
                            "<td><input type=\"text\" size=\"50\" name=\"out_fname\""+id+"/></td>"+
                            "<td><input type=\"text\" size=\"10\" name=\"service_id\""+id+"/></td>"+
                            "</tr>";
                $('#pubTab tbody').append(value);
            });
        });
    </script>

The problem Problem: It added the new row but I cannot drag it (up/down) as I drag the other tow (there are no curser for dragging).

Inspecting elements resolve with:

<table id="pubTab">
<thead>_</thead>
<tbody>
    <tr id=”1” style=”cursor: move; “ class>_</tr>
    <tr id=”2” style=”cursor: move; “ class>_</tr>
    <tr id=”3”>_</tr>
</tbody>

Please note that I am using the jQuery script (dragging/sorting):

$(function() {  $("#pubTab:not(thead)").tableDnD();   });

Please assist.

I think u might have to destroy the initial draggable, and then reassign it again, to update the new children — Val, Feb 24 '11 at 11:31

score 4 · Answer 1 · answered May 17 '12 at 07:20

4

The tableDnD plugin has a method which may have been added since this question was originally posted.

.tableDnDUpdate()

As the documentation states

cause the table to update its rows so the drag and drop functionality works if, for example, you’ve added a row.

answered May 17 '12 at 07:20

awj

7,482
10
66
120

this method is not in the current tablednd stable release. – Eduardo Rascon Jan 13 '13 at 20:59
$("...").tableDnDUpdate() was added by v0.6, which was released on 2011-12-02. – meataxe Jul 10 '13 at 21:58

score 0 · Answer 2 · answered Feb 24 '11 at 11:33

0

Try reinitialization of tableDnD plugin after you insert new row.

Other solution would be to clone one existing row and change data in it.

answered Feb 24 '11 at 11:33

Matej Baćo

1,312
2
10
12

Thanks, How to reinitialization it? – Mike Feb 24 '11 at 11:35
$("#pubTab:not(thead)").tableDnD(); – Matej Baćo Feb 24 '11 at 13:52

score 0 · Answer 3 · answered Feb 24 '11 at 11:33

Your new table rows aren't draggable because you haven't integrated them into your drag and drop object. They remain static HTML while your original rows are all fancy and interactive because you called .tableDnD() on them. See if calling .tableDnD on your new rows works, or update .tableDnD to use .live(). From the .live() page:

Description: Attach a handler to the event for all elements which match the current selector, now and in the future.

The .live() documentation page describes precisely the issue you are having, well worth a look!

Issues with adding new table's row with JQuery

3 Answers3