Question

Hi all: I met a problem like this. Here is the scenario: if I have a database table A, which contains several columns, for example. Once the sever pass the database to web client, it’s rendered into a HTML table. Now, here is some requirements for the client side. The user will be able to add/delete several rows from the HTML table, in addition, they will also be able the change the row order. If we could finish the client side with the help from some jquery plugin (for example: http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/). Now, my question is, how could I pass this information back to server? Because there are new rows and deleted rows, the original table row order (like the plugin tableDnD.serialize function is not sufficient) is not enough.
How to do this?Please let me know if anyone have idea about that.I got stuck in it since 5 days.Thanking you in advance.

on drop row this javascript function is calling.

    this.onDrop = function(table, droppedRow) {
   // alert("ondrop1");
   var rows = this.table.tBodies[0].rows;
   var debugStr = "rows now: ";
   for (var i=0; i<rows.length; i++) {
       debugStr += rows[i].id+" ";
   //  alert(debugStr);
   }

// document.getElementById(‘debug’).innerHTML = ‘dropped
‘+debugStr;
}

now i have to send new position of row to server side.How to do this?

Answer 1

Hi i think its better to use jquery ui to drag and drop purposes, they are very handy you can get details from this link

i cant implement it right now but i think try using thse codes from thier site may give you some idea

<script type="text/javascript">
  var table = document.getElementById('table-1');
  var tableDnD = new TableDnD();
  tableDnD.init(table);
</script>

try to use some alert in side this function may be more helpfull

tableDnD.onDrop = function(table, row) {
    var rows = this.table.tBodies[0].rows;
    var debugStr = "rows now: ";
    for (var i=0; i<rows.length; i++) {
        debugStr += rows[i].id+" ";
    }

    document.getElementById('debug').innerHTML = 'row['+row.id+'] dropped<br>'+debugStr;
}

if you got the desired data from this writa an ajax operation in a function and call it from this function or call it on a buttons click event to save data

here is a link to ajax tutorial of w3 schools have a refrence,

suppose your function is ajaxcall() then

function ajaxcall(readedValue)  { 
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function()  {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)  { 
            var returnreslut=xmlhttp.responseText;
            if(returnreslut==true){
                alert("Sucess");           
            } else  {
                alert("failed");
            }
        }
    }

    xmlhttp.open("POST","insertQueryPage.jsp",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("value="+readedValue);
}