Peter Csaba
2005-Sep-23 08:59 UTC
[Rails-spinoffs] Sortable list with Ajax and delete function - working example
Hi. I read most of the postings here but unfortunately I didin''t found a complete example which could be used. Of cource the ones who are professionals in javascript could implement the missing peaces from the puzzle. What I''m required to do is a tree (sortable list) where items can also be deleted and at each modification a function (ajax) is called to save the changes. For this of cource I''d need to know what elements are still in the list and in which order (parent/chield). A nice example I found at http://mir.aculo.us/stuff/test-tree/tree.html which is a nice peace of work, but would be ince if the tree is expanded by default and there would be a way somehow to delete some elements from it and to have a list with the elements from the tree. If this tree would have the delete function and a way to get the data from it, that would be nice. Another feature witch would be a valuable feature is to be able to edit the labels of the "li" nodes. It is possible to do that? If yes then with these features we''d have a completly AJAX category and subcategories managemenet. An another nice tree is located at: http://dynamiteweb.com/sorttest/test_drag_lists4.html. Here the sub items can''t be moved to an upper level (could be acceptable) but can be moved to another list at least. The problem here is still to have the list of each element from the tree in an reusable format. Does anybody have a functional sortable list I described above? A kind of tree with delete and save function of all elements in the list? Thank you in advance, Peter Csaba --------------------------------- Yahoo! for Good Click here to donate to the Hurricane Katrina relief effort. -------------- next part -------------- An HTML attachment was scrubbed... URL: http://wrath.rubyonrails.org/pipermail/rails-spinoffs/attachments/20050923/7d80e433/attachment-0001.html
Stephen Major
2005-Sep-26 05:58 UTC
[Rails-spinoffs] Sortable list with Ajax and delete function -working example
If I understand you correctly, you want a customizable menu system designed
out of lists that can be ordered and committed to the database. It is really
simple actually, check out the serialize function. The puzzle on the
script.aculo.us website is a perfect example of getting the new order when
an item is deleted. As far as committing them to a database it would depend
on how complex your menu system was. There might be a cleaner and more
efficient way of doing this but, I came up with this method:
DB Table
----------------------------------------------------
ordernumber Item Section member_id
----------------------------------------------------
0 1 list1 213
1 2 list1 213
2 3 list1 213
3 4 list1 213
0 5 list2 213
1 6 list2 213
2 7 list2 213
Mind you with this function I have a class for executing queries but this
should give you an idea to work with:
$DB->simple_construct( array( ''select'' =>
''*'',
''from'' => ''menu_layout'',
''where'' => ''member_id=''.$id,
''order'' => ''ordernumber asc''
) );
$DB->simple_exec();
while($rw = $DB->fetch_row())
{
if ($rw[''item''] == ''1'')
{
$item_out = ''<li id="item_1">I am Menu Item 1
</li>'';
if ($rw[''section''] == ''list1'') {$lefthtml
.= $item_out;}
else {$righthtml .= $item_out;}
}
elseif ($rw[''item''] == ''2'')
{
$item_out = ''<li id="item_2">I am Menu Item 2
</li>'';
if ($rw[''section''] == ''list1'') {$lefthtml
.= $item_out;}
else {$righthtml .= $item_out;}
}
And so on there might even be a cleaner way of doing it but you get the idea
this is for displaying the menu items from the order that is set in the
database.
Then for actually storing the items you would do something like this, again
you cannot copy and paste this because the queries are handled by my class:
function do_updates()
{
global $ibforums, $DB, $std, $print;
$input = $_POST[''list1''];
for($i=0;$i<count($input);$i++) {
$id = $member["id"];
$set = array( ''ordernumber'' => $i +1,
''section'' => ''list1'',
);
$DB->do_update( ''menu_layout'' , $set,
''member_id=''.$id.'' AND item=''.$input[$i]);
}
$input = $_POST[''list2''];
for($i=0;$i<count($input);$i++) {
$id = $member["id"];
$set = array( ''ordernumber'' => $i +1,
''section'' => ''list2'',
);
$DB->do_update( ''menu_layout'' , $set,
''member_id=''.$id.'' AND item=''.$input[$i]);
}
}
As far as the javascript side of things:
<td valign="top"><br clear="all" />
<ul id="list1" class="sortable boxy">
{$lefthtml}
</ul>
</td>
<td width="15px"> </td>
<td valign="top"><br clear="all" />
<ul id="list2" class="sortable boxy">
{$righthtml}
</ul>
</td>
<script type="text/javascript" language="javascript">
// <![CDATA[
Sortable.create("list1",
{constraint:
false,handle:''handle'',containment:["list1","list2"],dropOnEmpty:
true,
onUpdate:function(){
new Ajax.Request(''updates.php'',
{parameters:Sortable.serialize(''list1''), evalScripts:true,
asynchronous:true})
}});
Sortable.create("list2",
{constraint:
false,handle:''handle'',containment:["list1","list2"],dropOnEmpty:
true,
onUpdate:function(){
new Ajax.Request(''updates.php'',
{parameters:Sortable.serialize(''list2''), evalScripts:true,
asynchronous:true})
}});
// ]]>
</script>
________________________________________
From: rails-spinoffs-bounces@lists.rubyonrails.org
[mailto:rails-spinoffs-bounces@lists.rubyonrails.org] On Behalf Of Peter
Csaba
Sent: Friday, September 23, 2005 5:35 AM
To: rails-spinoffs@lists.rubyonrails.org
Subject: [Rails-spinoffs] Sortable list with Ajax and delete function
-working example
Hi.
?
I read most of the postings here but unfortunately I didin''t found a
complete example which could be used. Of cource the ones who are
professionals in javascript could implement the missing peaces from the
puzzle.
?
What I''m required to do is a tree (sortable list) where items can also
be
deleted and at each modification a function (ajax) is called to save the
changes. For this of cource I''d need to know what elements are still in
the
list and in which order (parent/chield).
?
A nice example I found at
http://mir.aculo.us/stuff/test-tree/tree.html?which is a nice peace of work,
but would be ince if the tree is expanded by default and there would be a
way somehow to delete some elements from it and to have a list with the
elements from the tree.
If this tree would have the delete function and a way to get the data from
it, that would be nice.
Another feature witch would be a valuable feature is to be able to edit the
labels of the "li" nodes. It is possible to do that? If yes then with
these
features we''d have a completly AJAX category and subcategories
managemenet.
?
An another nice tree is located at:
http://dynamiteweb.com/sorttest/test_drag_lists4.html. Here the sub items
can''t be moved to an upper level (could be acceptable) but can be moved
to
another list at least. The problem here is still to have the list of each
element from the tree in an reusable format.
?
Does anybody have a functional sortable list I described above? A kind of
tree with delete and save function of all elements in the list?
?
Thank you in advance,
Peter Csaba
________________________________________
Yahoo! for Good
Click here to donate to the Hurricane Katrina relief effort.