storing data back to mysql when data changed using Javascript

firstly bear with me this might not come out the way i intend it to :p

I am working on a little personal project. I have a web page with 3 lists on it in seperate divs. on the load of the page there is a php script which reads from the database table and puts data in these lists depending on the a valu开发者_如何学Pythone in a column in the resultset.

Then on the page the user is able to drag and drop the data from one list to another using some javascript html 5 stuff.

What i would like to happen is a save button or something which will then update the database so that the next time the page is loaded the lists will be in the same state as after the user dragged them about

problem is i can not work out any way in which to store the data back to the database - the whole server side client side thingy!

Any suggestions? i am open to all if i need to learn a new coding language to make it happen then so be it :)

Vade

---

You simply have to send the new order back to the server using AJAX.

Assuming your HTML looks like that:

<div id="FirstList"><ul>
  <li>Item 2</li>
</ul></div>
<div id="SecondList"><ul>
  <li>Item 1</li>
  <li>Item 4</li>
</ul></div>
<div id="ThirdList"><ul>
  <li>Item 3</li>
</ul></div>
<input type="button" id="save_btn" value="save"/>

Using jQuery it's quite simple:

function saveStuff() {
    var data = {};
    // for each list
    for(var name in {'FirstList':1,'SecondList':1,'ThirdList':1}) {
        data[name] = [];
        // for each li in the list
        $('#'+name+' li').each(function() {
            // fill data with item text content (you can change that)
            data[name].push($(this).text());
        }
    }
    // then send the new order to the server (with AJAX in JSON)
    $.post('save.php',
           {data: JSON.stringify(data)}, 
           function(){ alert('Data saved!'); }, 
           'json');
}

$(function(){
    // register the handler on the button
    $('#save_btn').click(saveStuff);
});

In save.php:

$data = json_decode($_POST['data']);
$data['SecondList'][1]; // contains "Item 4"

---

add a select list to each of the row [store an index which must be primary key in a hidden field], with javascript make sure that they are unique (1 can be selected once). On save button submit the form using jQuery.post

---

There are a couple of solutions.

1. Using cookies. (don't...)

2. Using AJAX. (can get mildly difficult depending on how you handle this)

3. Using Web Storage that's being added with HTML 5. (might be easiest to implement)

Take note. If you want persistent changes to the database, you need to use AJAX, basically make a request via JavaScript with some data to a PHP page that updates your database.

Cookies and Web Storage can be deleted by the browser the end-user is... using. But still. A table structure for your project seems difficult to implement for your level. That's why I highly recommend Web Storage.

Later Edit

Take note, all of your AJAX needs can be handled by jQuery.ajax(), which can be a highly useful library in all of your endeavours.