How to Dragging and dropping HTML table row to another position(In Jsp) and save the new position (values) also in database(MySql)?

Question

1.00/5 (1 vote)

See more:

, +

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/2007/07/dragging-and-dropping-table-rows-in-javascript/#demo[^]). 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 this javascript function is calling.

C#

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<br>'+debugStr;
   }

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

Posted 20-Mar-12 23:57pm

jitendra BABA

Updated 26-Mar-12 1:55am

v8

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

TorstenH. · Answer 1 · 2012-03-21T05:02:00

Solution 1

you need a mouse event for "mouseup". in that moment you can figure the new row number and work with that one.

http://www.w3schools.com/jsref/event_onmouseup.asp[^]

Posted 21-Mar-12 5:02am

TorstenH.

Comments

jitendra BABA 21-Mar-12 23:07pm

Thank you for your answer.I am using this website (http://www.isocra.com/2007/07/dragging-and-dropping-table-rows-in-javascript/#demo ) code for Dragging and droppping .It is working fine but the problem is that how to save this new row position in database.

TorstenH. 22-Mar-12 2:27am

...so it is NOT about JSP, the table or the event. You just don't know how to handle a database.

Do you have a SQL database?

Here is a simple tutorial on how to store something in a database.
Insert data in mysql database through jsp using prepared statement @orseindia

jitendra BABA 22-Mar-12 2:41am

I know how to insert any values or records in database but problem is that how to send new position on row(html table after dragging) to java Class(code).for this they(http://www.isocra.com/2007/07/dragging-and-dropping-table-rows-in-javascript/#demo ) are using a function

/** This function is called when you drop a row, so redefine it in your code
to do whatever you want, for example use Ajax to update the server */
this.onDrop = function(table, droppedRow) {

// Do nothing for now
}

in javascript code. So I have to sent this droppedRow id to javaCode.please share with me your views.

TorstenH. 26-Mar-12 6:18am

Don't push your question.

You should probably address the server and tell him about your client's decision to change the row numbering. I would suggest a POST Request

jitendra BABA 27-Mar-12 1:23am

@TorstenH. Thank you for given me a such good link.It is really a nice tutorial for AJAX.