JAVASCRIPT » Ajax Tutorials

  Delicious Bookmark this on Delicious Share on Facebook SlashdotSlashdot It! Digg! Digg

AJAX sorting with


Extensive JavaScript library; DOM manipulation, AJAX etc.

Builds upon Prototype and provides animation, drag-and-drop, DOM manipulation and effects. lets create sortable lists which can be synchronized with the back-end with AJAX.

<script src="javascripts/prototype.js" type="text/javascript"></script>

<script src="javascripts/dragdrop.js" type="text/javascript"></script>
<script src="javascripts/effects.js" type="text/javascript"></script>

<div>Sort order: <span id="result">One, Two, Three, Four, Five, Six</span></div>

<ul id="sort_list">

	<li id="item_0">One</li>
	<li id="item_1">Two</li>
	<li id="item_2">Three</li>
	<li id="item_3">Four</li>

	<li id="item_4">Five</li>
	<li id="item_5">Six</li>

<script type="text/javascript">
		constraint: false,
		onUpdate: function()
			new Ajax.Updater
				'result', 'sort.php',
				{ postBody: Sortable.serialize('sort_list') }

// Sort.php
$values = array('One','Two','Three','Four','Five','Six');

$res = array();
foreach( $_REQUEST['sort_list'] as $order )
	$res[] = $values[$order];
echo join(', ',$res);
Sort order: Two, One, Three, Five, Four, Six

Here's how make a list of boxes

  • Two
  • One
  • Three
  • Five
  • Four
  • Six

Prototype javascript library used here.

Note the Event.observe construct; it's the "right" thing to avoid window.onload conflict.

<script src="javascripts/prototype.js" type="text/javascript"></script>

<div id="delayed-content"></div>

<script type="text/javascript">
	new Ajax.Updater('delayed-content','delayed-content.html');

Free   Version: n/a   Platform(s): All   Updated:  July 21, 2008

Developer:Baglan Demo Download  
Rated by: 2 user(s)  
Follow Navioo On Twitter

Submit a resource