Hi there,
Sorry I am quite a novice at javascript and all its lingo so this is probably just a matter of me not using the right word or what have you. What I am trying to do is make a series of sortable lists.
On the left hand side is a list of categories which can be order, and on the right are boxes with the articles (that are also sortable) for each category, in the order that they are found as on the left hand side.
When the categories list has been modified then the right hand side is updated from an external file via AJAX Request function.
The only problem that I have run into is that once updated, the <li> tags are no longer transformed into sortable lists.
This is my Javascript code:
Code:
function ajaxUpdater(id,url) {
new Ajax.Updater(id,url,{asynchronous:true});
}
/* when the DOM is ready */
window.addEvent('domready', function() {
/* create sortables */
var sb = new Sortables('tags-list', {
/* set options */
clone:true,
revert: true,
/* initialization stuff here */
initialize: function() {
},
/* once an item is selected */
onStart: function(el) {
el.setStyle('background','#add8e6');
},
/* when a drag is complete */
onComplete: function(el) {
el.setStyle('background','#ddd');
//build a string of the order
var sort_order = '';
$$('#tags-list li').each(function(li) { sort_order = sort_order + li.get('alt') + '|'; });
$('sort_order').value = sort_order;
//do an ajax request
var req = new Request({
url:'updater.php',
method:'post',
autoCancel:true,
data:'sort_order=' + sort_order + '&tags_do_submit=1&byajax=1&action=tags',
onRequest: function() {
document.getElementById('thinking').style.visibility = '';
},
onSuccess: function() {
var request = new Request({
url: 'updater.php',
method: 'post',
update: 'entries',
data:'action=entries',
onComplete: function(response) {
$('entries').set('html',response);
}
}).send();
document.getElementById('thinking').style.visibility = 'hidden';
$($'#tags-list li').each(function(li) { sortmylist(''+li.get('alt')+''); });
}
}).send();
}
});
});
function sortmylist(div){
var sb = new Sortables(div+'-list', {
/* set options */
clone:true,
revert: true,
/* initialization stuff here */
initialize: function() {
},
/* once an item is selected */
onStart: function(el) {
el.setStyle('background','#add8e6');
},
/* when a drag is complete */
onComplete: function(el) {
el.setStyle('background','#ddd');
//build a string of the order
var sort_order = '';
$$('#'+div+'-list li').each(function(li) { sort_order = sort_order + li.get('alt') + ','; });
$(div+'_sort_order').value = sort_order;
//do an ajax request
var req = new Request({
url:'updater.php',
method:'post',
autoCancel:true,
data:'sort_order=' + sort_order + '&entry_do_submit=1&byajax=1&action=update&tag='+div,
onRequest: function() {
document.getElementById('thinking').style.visibility = '';
},
onSuccess: function() {
document.getElementById('thinking').style.visibility = 'hidden';
}
}).send();
}
});
}
And this is an example of the HTML code used for the area:
Code:
<h1>Sort portfolio
</h1>
<div id="categories">
<h2>Sort tags</h2>
<form id="tags_form" action="updater.php?action=tags" method="post">
<ul id="tags-list">
<li class="sortme" alt="37">Fashion</li>
<li class="sortme" alt="39">Personal</li>
<li class="sortme" alt="43">Commercial</li>
</ul>
<input type="hidden" name="sort_order" id="sort_order" value="0|1|2" />
</form>
</div>
<div id="entries">
<div id="thinking" style="display:none;">
</div>
<h2>Sort entries</h2>
<div id="37" class="entry">
<h3>Fashion</h3>
<form id="37_form" action="updater.php?action=tags" method="post">
<ul id="37-list">
<li class="sortme" alt="100105">d_luxe jewellery</li>
<li class="sortme" alt="100110">Area 51</li>
<li class="sortme" alt="100104">twenty-seven names</li>
</ul>
<input type="hidden" name="sort_order" id="37_sort_order" value="0,1,2" />
</form>
</div>
<script language="javascript" type="text/javascript">
sortmylist('37');
</script>
<div id="39" class="entry">
<h3>Personal</h3>
<form id="39_form" action="updater.php?action=tags" method="post">
<ul id="39-list">
<li class="sortme" alt="100117">Nina’s ABC</li>
<li class="sortme" alt="100118">Cohybosis</li>
<li class="sortme" alt="100119">Expressive Typography</li>
</ul>
<input type="hidden" name="sort_order" id="39_sort_order" value="0,1,2" />
</form>
</div>
<script language="javascript" type="text/javascript">
sortmylist('39');
</script>
<div id="43" class="entry">
<h3>Commercial</h3>
<form id="43_form" action="updater.php?action=tags" method="post">
<ul id="43-list">
<li class="sortme" alt="100109">NZTA</li>
<li class="sortme" alt="100111">Marbecks</li>
<li class="sortme" alt="100112">Renovator</li>
<li class="sortme" alt="100114">YouDo</li>
<li class="sortme" alt="100108">Dulux</li>
<li class="sortme" alt="100115">Revive Espresso</li>
<li class="sortme" alt="100106">Axiom Hydraulics</li>
<li class="sortme" alt="100107">Milford Dart</li>
<li class="sortme" alt="100116">Wedding Invites</li>
</ul>
<input type="hidden" name="sort_order" id="43_sort_order" value="0,1,2,3,4,5,6,7,8" />
</form>
</div>
<script language="javascript" type="text/javascript">
sortmylist('43');
</script>
</div>
Before you post, read our: 
