Question

I am posting this question for a second time. and i still didn’t get any answer. Its been like four days and i have been stuck into this problem. draggable() is not working in dynamically created tables i have compared the DOM of manually created table and dynamic table every thing is same, but it works in manually created table and not in dynamic table. It means in manually i can move the table columns like reordering and not in dynamic. Please i need help in this. below is my code.

function addTab() {
        var tab_title = $tab_title_input.val() || 'Tab '+tab_counter;
        //alert(tab_title);
        $tabs.tabs('add', '#tabs-'+tab_counter, tab_title);                 

        var newTableDiv = $("<div />",{id: 'dialog'+tab_counter});          
        newTableDiv.appendTo("body");           
        alert("div appended to body"+" "+'dialog'+tab_counter);
        var setCSS = {
            'width' : '100%',
            'cellspacing' : '1px',
            'cellpadding' : '2px'
        }

        var newTable = $('<table class="ui-widget" width="100%" border="0"  cellspacing="1" cellpadding="2">'+
                    '<thead id="myTableHead'+tab_counter+'" class="ui-widget-header" style="display: table-header-group;">'+
                    '<tr><th><strong>Symbol</strong></th>'+
                    '<th><strong>Price</strong></th>'+
                    '<th><strong>Volume</strong></th>'+
                    '<th><strong>Buy</strong></th>'+
                    '<th><strong>Sell</strong></th></tr></thead>'+
                    '<tbody id="sortable'+tab_counter+'" class="ui-widget-content" style="display: table-row-group;">'+ 
'<tr><td>PSO</td><td>100.00</td><td>12</td><td>120.00</td><td>130.00</td></tr>'+
'<tr><td>ASO</td><td>200.00</td><td>11</td><td>120.00</td><td>130.00</td></tr></tbody></table>').attr('id', 'myTable'+tab_counter);
        $(newTableDiv).append(newTable);

        $('#myTable'+tab_counter).tablesorter(); 
        $('#myTable'+tab_counter).draggable(); //**not working**

        $( '#sortable'+tab_counter).sortable();         

        if ( $("#myTable"+tab_counter).length > 0 ) {
            alert("id exists");
        }
        alert("#myTable"+tab_counter);


        var myDiv = $("<div />", { "class":"ui-tabs-panel ui-widget-content ui-corner-bottom",id: 'tabs-'+tab_counter});
        myDiv.append("#tabs");

        $("#sortable"+tab_counter).show();
        $("#myTableHead"+tab_counter).show();

        $('#dialog'+tab_counter).prependTo('#tabs-'+tab_counter);           
        tab_counter++;
        //alert(tab_counter);
    }

I need help in this.

Answer 1

Your using .draggable which is a jQuery UI method but it won’t work to drag around the columns simply by attaching it to the table header. You’ll need to ultilise a helper function:

For dragtable, although the documentation says to:

Add class=”draggable” to any table you might like to reorder.

This is a bit simplistic to say because the developer should realise things can be created dynamically in Javascript!

In other words, just simply adding the class draggable to the dynamically created table will NOT work. This is because draggable has already add event listeners after executing the init for all the tables when the DOM is ready. Changing the class will not automatically add an event listener. If this was a jQuery plugin, it could of used .live to attach event listeners to any dynamically created table now and in the future, but unfortunately it’s not.

You’ll need to attach a dragtable onto the newly created table, try:

dragtable.makeDraggable(newTable);

---

Edit:

Make sure your acting on the table element itself, not a jQuery object i.e.:

dragtable.makeDraggable(newTable[0]);

Fiddle: http://jsfiddle.net/garreh/64pyb/