jQuery sortable - hvordan gemmes den nye sortering

Anders And

unread,

Apr 11, 2012, 5:01:35 AM4/11/12

to

Hvis I ser på denne, http://jqueryui.com/demos/sortable/#connect-lists
- dette er hvad jeg gerne vil kunne - at have nogle elementer som jeg
kan sortere som jeg vil.

Men brugeren skal jo have en knap ala "Opdater min rækkefølge"
således, at deres sortering gemmes uanset hvilken computer de er
logget ind på, men hvordan gemmer jeg det nye layout? Kan den have en
"input type=hidden" og så ændre værdien i disse eller hvordan vil I
gøre det?

Martin Larsen

unread,

Apr 11, 2012, 5:47:39 AM4/11/12

to

Anders And wrote:

> Men brugeren skal jo have en knap ala "Opdater min rækkefølge"
> således, at deres sortering gemmes uanset hvilken computer de er
> logget ind på, men hvordan gemmer jeg det nye layout? Kan den have en
> "input type=hidden" og så ændre værdien i disse eller hvordan vil I
> gøre det?

Du skal fx via et ajaxkald opdatere sorteringsrækkefølgen på serveren og
gemme resultatet i en database.

Her er noget kode jeg bruger på klientsiden:

$("#content_container").sortable({
update: function(event, ui) {
var IDs = new Array();
$(".line").each(function() {
IDs.push(this.id.substr(-2))
})
$.ajax({
type: "POST",
url: "index.php?action=reorder",
data: "order=" + IDs.join(","),
});
}
})

Når man opdaterer rækkefølgen, kaldes funktionen update hvor ID'er fra
de enkelte DIV kædes sammen og postes via et ajaxkald.

På serversiden har jeg så en funktion som tager parametrene og opdaterer
databasen:

public function set_media_sort_order($order) {
$medias = explode(",", $order);
$i = 0;
foreach($medias as $media) {
$i++;
$sql = "update user_media set sortorder = $i where id_user =
$this->id_user and id_media = ". intval($media);
mysql_query($sql) or die(mysql_error() . "\n\n$sql");
}
}

Koden er naturligvis taget ud af en kontekst, men det kan formentlig
give dig en ide.

Anders And

unread,

Apr 11, 2012, 7:02:23 AM4/11/12

to

Mange tak. Vil du fortælle lidt mere om hvad der skal til for at
"POST" bliver udført? Jeg ved det er taget ud af kontekst men når jeg
kører ovenstående (sammen med min kode), så sker der (naturligvis)
ikke noget. Mangler den en jQuery include for at Ajax kaldet fungere?

Anders And

unread,

Apr 11, 2012, 7:50:10 AM4/11/12

to

> Mange tak. Vil du fortælle lidt mere om hvad der skal til for at
> "POST" bliver udført? Jeg ved det er taget ud af kontekst men når jeg
> kører ovenstående (sammen med min kode), så sker der (naturligvis)
> ikke noget. Mangler den en jQuery include for at Ajax kaldet fungere?

OK, jeg fandt ud af, at hvis jeg undlod "ConnectedWith" og indsatte
din kode, så POST'ede den. Jeg lavede din POST om til en GET, så jeg
kunne se hvad den lavede men jeg får ikke "order" sat til noget? Det
er jo selvfølgelig denne funktion:

$(".line").each(function() {
IDs.push(this.id.substr(-2))
})

Men jeg kan ikke gennemskue denne, hvis ikke den burde tage navnet på
ID'en? Jeg har denne kode:

$(function() {
$( "#sortable1, #sortable2" ).sortable({

update: function(event, ui) {
var IDs = new Array();
$(".line").each(function() {
IDs.push(this.id.substr(-2))
})
$.ajax({

type: "GET",
url: "./?action=reorder",

data: "order=" + IDs.join(","),
});
}

}).disableSelection();
});
</script>
</head>
<body>
<div class="demo">

<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default" id='1111'>Item 1</li>
<li class="ui-state-default" id='2222'>Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight">Item 10</li>
<li class="ui-state-highlight">Item 20</li>
<li class="ui-state-highlight">Item 30</li>
<li class="ui-state-highlight">Item 40</li>
[CUT]

Hvis jeg bytter om på linie 1 og 2 (i første kolonne) burde jeg vel
som minimum få to ID'er i "order"?

Anders And

unread,

Apr 11, 2012, 8:17:53 AM4/11/12

to

> Hvis jeg bytter om på linie 1 og 2 (i første kolonne) burde jeg vel
> som minimum få to ID'er i "order"?

En gang imellem skal man lige trække vejret og søge lidt på nettet før
man spørger.
Jeg fandt løsningen her:
http://stackoverflow.com/questions/2509801/jquery-connected-sortable-lists-save-order-to-mysql

Martin Larsen

unread,

Apr 11, 2012, 8:33:26 AM4/11/12

to

Anders And wrote:

> En gang imellem skal man lige trække vejret og søge lidt på nettet før
> man spørger.
> Jeg fandt løsningen her:
> http://stackoverflow.com/questions/2509801/jquery-connected-sortable-lists-save-order-to-mysql

Ja, det er grundlæggende samme metode. Min er dog mere specialiseret
fordi de flytbare elemeneter er indlejret i en masse DIV blokke, så en
serialize() ville få en masse forstyrrende data med.

> $(".line").each(function() {
> IDs.push(this.id.substr(-2))
> })
>
> Men jeg kan ikke gennemskue denne, hvis ikke den burde tage navnet på
> ID'en? Jeg har denne kode
>

Selv om du har fundet en løsning, vil jeg lige forklare ovenstående.

IDs er et array som fra starten er tomt. For hver DIV af klassen "line"
gemmes de sidste to karakterer i dens ID i arrayet (pushes).

Så har vi altså en ordnet rækkefølge af de id'er som skal gemmes i
databasen. De bliver i ajaxkaldet lavet om til en kommasepareret strenge
i linjen

data: "order=" + IDs.join(",")

Dvs. POST strengen bliver fx "order=04,01,02,03,05"

Det kunne lige så godt være GET som du selv er inde på.

Serialize() i øvrigt gør noget tilsvarende.

Rune Jensen

unread,

Apr 11, 2012, 11:20:52 AM4/11/12

to

On 11 Apr., 14:33, Martin Larsen <martin+spamfree+lar...@bigfoot.com>
wrote:

> Det kunne lige så godt være GET som du selv er inde på.

http://stackoverflow.com/questions/1376369/get-vs-post-ajax-requests-when-and-how-to-use-either

...kan måske give et hint om, hvornår hvad bør bruges.

MVH
Rune Jensen