View Full Version : getting script.aculo.us sortable in PHP

11-29-2006, 10:15 PM
Hi everyone-
I'm wondering if anyone has any experience getting the serialized output from a scriptaculous sortable into a PHP array.
I'm not using SQL as my database. Instead, I'm using FileMaker.
However, I think I could figure out how to transfer the new sort into FileMaker if I could only get this serialized javascript array into a php array.
Does anyone have any experience with this? Or, does anyone know a good place to start?
Here is a link:

11-30-2006, 10:49 AM
your js will look something like:

var s_string=Sortable.serialize('element_id',{name:'items'});
var options = {
postBody: s_string
new Ajax.Request(url,options);

your php will be:

foreach($_POST['items'] as $position=>$id) {
//update table set position=$position where id=$id

Sortable.serialize() doesn't actually create a javascript array, but a string intended to be sent as a HTTP request (POST or GET).
The 'name' option passed to Sortable.serialize() is the index of $_POST to iterate through (it defaults to something, but I forget what so I always define it).
As the scriptaculous documentation says, the ids of the items that you can sort (the <li> tags perhaps?) need to have ids of the form: string_id (for example: <li id="item_12">), the number after the _ is what gets put in the request-string.

11-30-2006, 04:20 PM

Thanks for the tip.
I read and reread and reread your response. I thought I made some sense out of it... but I ended up doing something a little different.
Basically, I figured if I could get that text string as a php variable then I could explode it and build a new array that I'd use to loop through and edit my database records.
I'm using FileMaker - so this adds a degree of strangeness to people that aren't familiar with the fx.php class that communicates via XML to FileMaker's Web Publishing Engine.
On top of that, I'm only a beginner - so I have a hard time with some very simple concepts.

I've successfully constructed my list of "categories" from a FileMaker query and gave each a unique ID with php:

foreach( $lookupResult['data'] as $key =>$searchData){
echo "<li class=\"green\" id=\"categories_name" . $i ."\">" . $searchData['Category'][0] . "</li>";

This puts all my found "categories" in the nice sortable list.

Then, I modified one of the scriptaculous examples. It properly displays the string when I use "<pre id="categories_debug"></pre>"
This is my JS code

<script type="text/javascript">
// <![CDATA[
onChange:function(){$('categories_debug').innerHTML = Sortable.serialize('categories',{name:'sort'}) }});
var options = {
postBody: s_string

// ]]>

I am not good with javascript (just started reading a new book "Javascript and AJAX" but I'm not so far into it and I have a deadline coming up) so I'm not sure if the JS is OK. (like I said, it prints the string correctly, so it must be close).

I havent used AJAX and am completely unfamiliar with AJAX requests. I figured it would be fine enough to have a submit button below my sortable list and allow the user to submit the new desired sorting.
This is what I tried:

<form method="post" action="testsort3.php" />
<input type="hidden" name="sortpost" value="<pre id='categories_debug'></pre>" />
<input type="submit" name="Submit" value="Change" />

Of course, that simply passes "<pre id='categories_debug'></pre>" - and when I set my variable on the next page, it is only "<pre id='categories_debug'> </pre>" and not the value of "<pre id='categories_debug'></pre>" that I had on the last page.

So, I suppose if I could only get the value of "<pre id='categories_debug'> </pre>" passed into php, I could explode that string and come up with a method to modify the records in my database.

Does this make sense?

I realize I'm all over the place here - but essentially I'm stuck on passing the real value of <pre id='categories_debug'></pre> to php.

If I'm way off here, let me know. Don't worry about hurting my feelings. I still have A LOT to learn.