Drag and drop reorganizing works! But how can I save the item order to my DB?

[gragland]

I'm using a script I found that allows me to create lists that can be reorganized by dragging and dropping the list items (http://tool-man.org/examples/sorting.html)

After the items are reorganized I can click a button underneath wich pops up an alert box showing the current order of the list items (5|3|4|1|2).

I need some help altering the javascript code so that when this button is pressed it instead calls a php function which saves the order of the items to a MYSQL database.

The button's code is:
<input class="inspector" type="button" value="Inspect" onclick="junkdrawer.inspectListOrder('phoneticlong')"/>

And I believe these are the relavent javascript functions that would need to be altered:

ToolMan._junkdrawer = {
serializeList : function(list) {
var items = list.getElementsByTagName("li")
var array = new Array()
for (var i = 0, n = items.length; i < n; i++) {
var item = items[i]

array.push(ToolMan.junkdrawer()._identifier(item))
}
return array.join('|')
},


inspectListOrder : function(id) {
alert(ToolMan.junkdrawer().serializeList(document.getElementById(id)))
},


_identifier : function(item) {
var trim = ToolMan.junkdrawer().trim
var identifier

identifier = trim(item.getAttribute("id"))
if (identifier != null && identifier.length > 0) return identifier;

identifier = trim(item.getAttribute("itemID"))
if (identifier != null && identifier.length > 0) return identifier;

// FIXME: strip out special chars or make this an MD5 hash or something
return trim(item.innerHTML)
},


Any help would be greatly appreciated!

[glowdot]

So now you need to do some AJAX. Look at Prototype: http://www.prototypejs.org/ which will allow you to make the call to your PHP script.

[gragland]

Could anyone provide a bit more help with passing info from the javascript functions I posted above to a php function that saves the order to my database. It doesn't need to be ajax, it could just redirect to a php page and pass the order variables over to it if that's easier. I just don't completely understand the javascript code im using... Thanks!

[glowdot]

If you want to post the info to another script, you will need to have a form with a bunch of hidden elements. Use the output from your sorting function to populate the hidden field(s) and then post that to the script.

Just use JavaScript to update the value of the hidden field or fields once you get the order string.

[byron3@earthlink]

1.) Use a session variable to hold the array. Use session.setAttribute(name, value) to store the array.
2.) Go to a form handler page, you can use a javascript function that opens a Url which contains a form handler script.
3 Reorder the array with php.

$reordered_r = array();
$tmp = $_SESSION['Order_array'];
$i = 0;

foreach( $tmp as $K => $V ) {
    $reordered_r[$i] = $V;
    $i++;
}

$_SESSION['Order_array'] =& $reordered_r;
header("Location:Where_ever_I_came_from.php"); 

[franco714]

how would i be able to do that with this script

http://www.dhtmlgoodies.com/index.ht...rrange-nodes-2

sorry for stealing the thread

[gragland]

how would i be able to do that with this script

http://www.dhtmlgoodies.com/index.ht...rrange-nodes-2

sorry for stealing the thread

Yeah, that looks like a good script. If anyone can help us use that script to save the order to a MYSQL database that would be great. I don't understand the last part of the instructions, the part about putting the string into a hidden field. And then also how would I pass the hidden field value to a php function that would insert them into the DB?

Thanks,
Gabe

[franco714]

anyone?

[spikeZ]

Hi guys,
in the script there are some instructions on saving to a database:

/* The saveData function creates a string containing the ids of your dragable elements.

The format of this string is as follow

id of item 1;id of item 2;id of item 3

i.e. a semi colon separated list. The id is something you put in as "id" attribute of your dragable elements.

*/

function saveData()
{
var saveString = "";
for(var no=0;no<dragableObjectArray.length;no++){
if(saveString.length>0)saveString = saveString + ';';
ref = dragableObjectArray[no];
saveString = saveString + ref['obj'].id;
}

alert(saveString); // For demo only

/* Put this item into a hidden form field and then submit the form

example:

document.forms[0].itemOrder.value = saveString;
document.forms[0].submit;

On the server explode the values by use of server side script. Then update your database with the new item order

*/

What this basically suggests is that you have a hidden field, so you would have something like

    <!-- END DRAGABLE CONTENT -->
    <form name="myForm" action="" method="post">
    <input type="hidden" name="listhere" />
    <input type="submit" value="Save" onclick="saveData();">
    </form> 

at the bottom.
and change the javascript saveData function to:

function saveData()
	{
		var saveString = "";
		for(var no=0;no<dragableObjectArray.length;no++){
			if(saveString.length>0)saveString = saveString + ';';
			ref = dragableObjectArray[no];
			saveString = saveString + ref['obj'].id;
		}	
		
		// alert(saveString);	// For demo only
		document.forms[0].listhere.value = saveString;
		document.forms[0].submit;
		/* 	Put this item into a hidden form field and then submit the form 
		On the server explode the values by use of server side script. Then update your database with the new item order
		*/
		
		
		
	}

This collects the script output and sends it through the post array in a comma delimited format.

Then on the server side, explode the data using explode(";", $_POST['listhere']); to get the values you can then use to update your database.

Hope that made sense, if you want me to post the full script I will.

[franco714]

i got it, thank bro