0

So I have 2 sql tables current and previous.

I am looking to show 2 tables and enable users to drag and drop items from the previous table into the current table.

On top of that I am looking to allow the user to edit the rows of each table/ insert and delete these as well then save the changes back the the DB.

What I have done is found 2 separate projects and merged them together. github.com/drale/DBTableViewer

github.com/dbunic/REDIPS_drag

One allows for 2 tables to interact and the other pulls data from the database generates the tables and paginates them.

I have this working so I am now moving onto the next step of inserting rows and making them editable. I have it working but whenever I insert a row I cannot move that new one I inserted. If you guys could check it out I'd appreciate it. Been looking at it and the code is the exact same...

What I am seeing Row that I can move:

<tr class='rd'>
<td class='redips-rowhandler'><div class='redips-drag redips-row'></div></td>
<td>Something</td>
<td>something else></td>
</tr>

Row I inserted and can't move:

<tr class="rd">
<td class="redips-rowhandler"><div class="redips-drag redips-row" style="border-style: solid; cursor: move;"></div></td>
<td>Data</td>
<td>Data</td>
</tr>

The only reason the 2nd one that doesn't work has :style="border-style: solid; cursor: move; in it is because in the elements container I saw that come up on the other rows. Even with it not there it doesn't work.

The function I am using to insert the rows is :

function myFunction() {
    var table = document.getElementById("tbl1");
    var row = table.insertRow(2);
    row.className = "rd";
    var cell1 = row.insertCell(0);
    console.log(cell1);
    cell1.className="redips-rowhandler";
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML= "<div class='redips-drag redips-row' style='border-style: solid; cursor: move;'></div>";
                    //<td class='redips-rowhandler'><div class='redips-drag redips-row'></div></td>

    cell2.innerHTML = "Data";
    cell3.innerHTML = "Data";
}
</script>

I also created a public github for this project so if anyone ever wants to use something like this it will be available to them! Feel free to help if you'd like.

http://www.github.com/chc200/javascript_Sql_Html_Table

wdlax11
  • 27
  • 6
  • 2
    whats the question here? –  Jun 10 '16 at 00:49
  • When I insert a row through dom/javascript why can't I move it if I have the same classes attached to it? -- see the github and index.php youll see myFunction which is inserting the row. – wdlax11 Jun 10 '16 at 00:57
  • any code required to understand the question should be posted here. –  Jun 10 '16 at 00:59
  • added. see bottom of post – wdlax11 Jun 10 '16 at 01:12
  • the problem is event binding on a dynamic element, as per the dupe –  Jun 10 '16 at 03:25
  • I am still have problems with this would it be something along the lines of $('.redips-drag redips-row').on('move', ? , function(){ // do something }); – wdlax11 Jun 10 '16 at 03:34

0 Answers0