Tijden veranderen
Leuk tooltje voor "drag and Drop" maar nu de nieuwe waarden naar een database krijgen ...
Ik heb een leuk tooltje gevonden om blokken te kunnen slepen tussen verschillende div's : http://devheart.org/articles/jquery-customizable-layout-using-drag-and-drop/
Hiermee kan je blokken zelf verplaatsen tussen allerlei kolommen en / of div's.
Een voorbeeld is te vinden op http://devheart.org/examples/jquery-customizable-layout-using-drag-and-drop/2-saving-and-loading-items/index.html#ex-2-2
In dit voorbeeld 2.3 en 2.4 is te zien dat je deze waarden kunt opslaan in een cookie.
Maar hoe kan ik deze waarden automatisch na het verslepen aanpassen in een MySQL tabel? Zodat na elke versleping de nieuwe waarde vastgelegd wordt in de tabel?
Hopelijk kan iemand mij hiermee verder helpen.
Met vriendelijke groeten,
Arie
Hier een gevonden voorbeeld met PDO:
http://freewebmentor.com/2014/03/drag-drop-menu-mysql.html
Bedankt voor je reactie maar dit is volgens mij niet helemaal wat ik bedoel (zal vast aan de onduidelijke vraagstelling liggen ;-) )
Hiermee kan je de volgorde aanpassen en opslaan in een database maar ik wil ze verslepen naar een andere div en dan de daarbij behorende ID opslaan.
Ik heb een voorbeeld gemaakt op http://www.familiekant.nl/toernooimaker/club/drag.php
Daar heb ik dus een aantal in te delen gebruikers welke onderverdeeld moeten worden in poule 1 of poule 2.
Nu kan ik ze daar heen slepen maar hoe leg ik dan de poule ID vast in de tabel van de desbetreffende gebruiker?
Ik heb een gebruiker tabel met daarin o.a. ook kolom poule waar dus de ID van de desbetreffende poule moet komen te staan. Daarnaast heb ik een tabel met daarin alle poules (nu dus 2, incl. bijbehorende ID's)
De javascript is
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
$(document).ready(function () {
$('#poule-indeling .sortable-list').sortable({
connectWith: '#poule-indeling .sortable-list',
placeholder: 'placeholder',
update: function() {
var order = $(this).sortable("serialize") + '&update=update';
$.post("drag-updatedata.php", order, function(theResponse) {
});
}
});
});
</script>
$(document).ready(function () {
$('#poule-indeling .sortable-list').sortable({
connectWith: '#poule-indeling .sortable-list',
placeholder: 'placeholder',
update: function() {
var order = $(this).sortable("serialize") + '&update=update';
$.post("drag-updatedata.php", order, function(theResponse) {
});
}
});
});
</script>
En de code voor drag-updatedata.php is
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
$array = $_POST['arrayorder'];
if ($_POST['update'] == "update") {
global $dbh;
$count = 1;
foreach ($array as $idval) {
$query = $dbh->query("UPDATE deelnemers SET poule = " . $count . " WHERE user_id = " . $idval) or die('Error, insert query failed');
$count ++;
}
}
if ($_POST['update'] == "update") {
global $dbh;
$count = 1;
foreach ($array as $idval) {
$query = $dbh->query("UPDATE deelnemers SET poule = " . $count . " WHERE user_id = " . $idval) or die('Error, insert query failed');
$count ++;
}
}
Enig idee of en hoe dit gedaan moet worden?
Met vriendelijke groeten,
Arie