Slashdot It!
Digg Prototype
Extensive JavaScript library; DOM manipulation, AJAX etc.
Script.aculo.us
Builds upon Prototype and provides animation, drag-and-drop, DOM manipulation and effects.
Script.aculo.us 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>
</ul>
<script type="text/javascript">
Sortable.create
(
'sort_list',
{
constraint: false,
onUpdate: function()
{
new Ajax.Updater
(
'result', 'sort.php',
{ postBody: Sortable.serialize('sort_list') }
);
}
}
);
</script>
<?php
// 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">
Event.observe(window,'load',function(){
new Ajax.Updater('delayed-content','delayed-content.html');
});
</script>
