De PHPhulp kroeg
PHP sorteren en updaten met JQuery
Zie deze site.
Ik kan de velden sorteren mbt jquery maar nu zou het mooi zijn als de wijziging (sortering) ook meteen opgeslagen wordt. Wie heeft er een idee hoe ik dit moet doen en kan mijn hierbij helpen?
Gewijzigd op 21/12/2010 07:45:59 door Henk Jacobse
Per gebruiker opslaan in cookies of database (of gewoon in een sessie)?
Wat je zult moeten doen, is de volgorde met AJAX naar de server sturen.
Ik zal eens zien hoe dat ding precies werkt.
O, trouwens, je bent je </body> vergeten.
Hmmmm, heb helaas geen ervaring met AJAX. Kun jij mij op weg helpen?
Dan toon ik wel hoe je het met Ajax kan regelen.
Daarnaast heeft jQuery UI's sortable extensie ook nog een leuke extra method: serialize. Als je al je li's een id meegeeft, kan je ze heel gemakkelijk identificeren.
Combineer dat met je update event en jQuery.post en je bent er al.
Ik moet even weg; dat komt vandaag nog in orde.
Ik heb het voor elkaar, echter wil ik nu graag ook nog de values van de listItems meegeven aan mijn php-file?
Kan dat?
Gewijzigd op 21/12/2010 16:22:21 door Henk Jacobse
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<base href="http://www.regelmijnaankoop.nl/" />
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<link rel="stylesheet" type="text/css" href="/css/tst.css" />
<link rel="stylesheet" type="text/css" href="/css/ui.css" />
<script src="js/jquery-1.4.4.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.sortable.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<script>
$(function() {
var urlstring ="";
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
// on click => ...
$('#show_items').click(function(e) {
var items_sortable1 = Array();
var items_sortable2 = Array();
$('#message').html('<div></div>');
var datastring_sortable1 ="";
var datastring_sortable2 ="";
$("#sortable1 li").each(function (key, item) {
datastring_sortable1 += (key > 0 ? ',' : '' ) + $(item).attr('id');
});
$("#sortable2 li").each(function (key, item) {
datastring_sortable2 += (key > 0 ? ',' : '' ) + $(item).attr('id');
});
var datastring = "items_sortable1="+ escape(datastring_sortable1) +"&items_sortable2="+ escape(datastring_sortable2);
$.ajax({
url: "http://www.regelmijnaankoop.nl/response.php",
type: "POST",
data: datastring,
success: function (data) {
$('#message').html(data);
}
});
});
});
</script>
<style>
#message {clear: both;}
</style>
</head>
<body>
<div class="demo">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default" id="item_1">Item 1</li>
<li class="ui-state-default" id="item_2">Item 2</li>
<li class="ui-state-default" id="item_3">Item 3</li>
<li class="ui-state-default" id="item_4">Item 4</li>
<li class="ui-state-default" id="item_5">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" id="item_6">Item 1</li>
<li class="ui-state-highlight" id="item_7">Item 2</li>
<li class="ui-state-highlight" id="item_8">Item 3</li>
<li class="ui-state-highlight" id="item_9">Item 4</li>
<li class="ui-state-highlight" id="item_10">Item 5</li>
</ul>
</div>
<div id="message"></div>
<input type="button" id="show_items" value="klik"/>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<base href="http://www.regelmijnaankoop.nl/" />
<link rel="stylesheet" href="themes/base/jquery.ui.all.css">
<link rel="stylesheet" type="text/css" href="/css/tst.css" />
<link rel="stylesheet" type="text/css" href="/css/ui.css" />
<script src="js/jquery-1.4.4.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.sortable.js"></script>
<link rel="shortcut icon" href="favicon.ico" />
<script>
$(function() {
var urlstring ="";
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
// on click => ...
$('#show_items').click(function(e) {
var items_sortable1 = Array();
var items_sortable2 = Array();
$('#message').html('<div></div>');
var datastring_sortable1 ="";
var datastring_sortable2 ="";
$("#sortable1 li").each(function (key, item) {
datastring_sortable1 += (key > 0 ? ',' : '' ) + $(item).attr('id');
});
$("#sortable2 li").each(function (key, item) {
datastring_sortable2 += (key > 0 ? ',' : '' ) + $(item).attr('id');
});
var datastring = "items_sortable1="+ escape(datastring_sortable1) +"&items_sortable2="+ escape(datastring_sortable2);
$.ajax({
url: "http://www.regelmijnaankoop.nl/response.php",
type: "POST",
data: datastring,
success: function (data) {
$('#message').html(data);
}
});
});
});
</script>
<style>
#message {clear: both;}
</style>
</head>
<body>
<div class="demo">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default" id="item_1">Item 1</li>
<li class="ui-state-default" id="item_2">Item 2</li>
<li class="ui-state-default" id="item_3">Item 3</li>
<li class="ui-state-default" id="item_4">Item 4</li>
<li class="ui-state-default" id="item_5">Item 5</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight" id="item_6">Item 1</li>
<li class="ui-state-highlight" id="item_7">Item 2</li>
<li class="ui-state-highlight" id="item_8">Item 3</li>
<li class="ui-state-highlight" id="item_9">Item 4</li>
<li class="ui-state-highlight" id="item_10">Item 5</li>
</ul>
</div>
<div id="message"></div>
<input type="button" id="show_items" value="klik"/>
</body>
</html>
response.php (zetten op http://www.regelmijnaankoop.nl/response.php)
Sowieso nog niet wat je wil, maar zie al eens of het werkt bij jou en we zien dan wel wat je er precies mee wil doen.
Gewijzigd op 21/12/2010 16:43:50 door Kris Peeters
Alleen zou het nu mooi zijn als ik op een of andere manier de layout van het blokje ook kan veranderen.
Bijv. als ik een blokje vanuit de rechterrij naar de linkerrij verplaats is het uiterlijk verschillend. Kan dit dan ook automatisch veranderen?
Nu, wat wil je er precies mee doen?
Dan kunnen we naar die oplossing toe werken.
removeClass() en addClass()
Warning: Invalid argument supplied for foreach() in /public/sites/www.regelmijnaankoop.nl/process-sortable.php on line 5
$iets moet hier een array zijn. Daar zal iets anders dan een array staan bij jou.
aangepast, is de foutmelding nu weg?
In de linkerrij staan de items die actief zijn en dus getoond worden op een site. In de andere rij (rechts) staan de items die niet actief zijn, deze worden met een andere kleur aangegeven.
Dus als ik een blok van links naar rechts sleep zou de kleur ook meteen moeten veranderen.
http://www.regelmijnaankoop.nl/response.php = een lege array
Maar test het script nu eens:
http://www.regelmijnaankoop.nl
Verandering van de layout heb ik nu ook werkend, uiteraard na de goeie tip van Kevin en Kris. Top!!!!
Gewijzigd op 23/12/2010 07:10:28 door Henk Jacobse
Of raak je daar wel uit?
Nogmaals, bedankt voor de hulp!
Toevoeging op 23/12/2010 13:34:05:
Toch nog een vraagje:
Zie wederom http://www.regelmijnaankoop.nl
ik wil een melding krijgen wanneer ik op een edit button druk. In de melding moet ook nog het id gegeven worden van de button die ik indruk.
Ik dacht deze code te kunnen gebruiken:
$('a.menu-update-item').click(function(e) {
$msg = "U heeft edit-button = " + document.getElementsById("sortable1") + " ingedrukt";
alert($msg);
});
Helaas dit werkt niet, wie heeft er een idee.
+ this.id + lijkt beter te werken!!!
Gewijzigd op 23/12/2010 13:44:44 door Henk Jacobse