Sorting of page field

[Hari KT]

Hi,

I have add page field with categories to `user` template.

In the processwire admin we can sort the page field items by dragging and moving the items.

I would like to bring the same functionality to the front-end, so users can have a functionality to drag and drop. This can be saved via ajax rather than a save button.

Would be helpful if anyone have done something like this.

Thank you

[diogo]

changing the order of a page field is as easy as pushing the elements one at a time:

I prepared an example on codepen using jqueryUI "sortable widget" with the "serialize" option and get http://codepen.io/diogo-ed/pen/fgazd

On the pen I followed the instructions from the serialize method and used the ids of the pages after the underscore on the ID "page_123" http://api.jqueryui.com/sortable/#method-serialize

The code in PW is really simple:

foreach($input->get->page as $g){ //iterate all the page[] array from GET
  $p = $pages->get($g); // look for the page with this ID
  echo "<li>".$p->id."</li>";
  $page->of(false); // set output formatting of
  $page->page_field->push($p); // push it to the end of the field
  $page->save("page_field"); // save page
}

EDIT: I'm using lightning.pw for the ajax call in the demo

EDIT2: Like kongondo says, you need to sanitize the get calls. Take this only as a prof of concept.

EDIT3: Added the output formatting of and save the field (forgot before)

[Hari KT]

Hey diogo,

Thank you for the reply.

My problem is not at the front-end creating dragging stuff. My problem is at the backend how to make use of the PageArray to get sorted.

[diogo]

Hey diogo,

Thank you for the reply.

My problem is not at the front-end creating dragging stuff. My problem is at the backend how to make use of the PageArray to get sorted.

See the PHP code

[kongondo]

Of course Diogo forgot to mention you sanitize the user input first .... 

$pid = (int) $g
$p = $pages->get($pid)

My problem is at the backend how to make use of the PageArray to get sorted.

Seen this? http://processwire.com/api/arrays/

[kongondo]

@Diogo - cool idea using lightning.pw...I always forget that. But where is your demo?

[Soma]

Use pagefield->removeAll() first then add them back.

[diogo]

@Diogo - cool idea using lightning.pw...I always forget that. But where is your demo?

Hm, not that cool, my free trial will expire in 3 days

The demo is here:

$.get(
  "http://rhodium-4zp.lightningpw.com/test/", // <- there, see?
  sorted,
  function( data ) {
    $( "#result" ).html( data );
  });
}

[diogo]

No one noticed that I forgot to save the field in my code

Added it already

[Hari KT]

Thanks guys!

Will try out and mark as resolved.

[Hari KT]

Thank you guys!

I did as Soma mentioned removing all and adding back. That works with out much issues.