Question

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 value 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

Answer 1

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"