rvdb86 Posted March 3, 2009 Share Posted March 3, 2009 Hi, i am quite new to ajax so i apologise for any obvious mistakes! I am trying to build a file system that has several categories and within each category several pages, and i want the user to be able to change the order of the pages and categories by draging them above or below the others. The system gets all the categories from a MySql database (mysite_categories) and the same for the pages (mysite_pages) through PHP. I found a drag and drop tutorial on the internet which worked great for ordering the categories. But because the script created a javascript function specific to the id of the <ul> i ran into problems with the pages that reside within the <ul> of the categories. here is my script: index.php <?php require_once('database.php'); require_once('categories.php'); if (!dbConnect()) { echo 'Error connecting to database'; exit; } $categories = getCategories(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html> <head> <title>phpRiot Sortable Lists</title> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" src="scriptaculous/lib/prototype.js"></script> <script type="text/javascript" src="scriptaculous/src/scriptaculous.js"></script> </head> <body> <h1>phpRiot Sortable Lists</h1> <ul id="movies_list" class="sortable-list"> <?php $query = "select category_id, category_name from mysite_categories order by ranking, lower(category_name)"; $result = mysql_query($query) or die(mysql_error()); // Print out the contents of each row into a table while ($row = mysql_fetch_array($result)) { extract($row); ?> <li id="movie_<?= $category_id ?>"><?= $category_name ?> <ul id="page_list<?= $category_id ?>" class="sortable-list"> <?php $query2 = "select page_id, page_name from mysite_pages WHERE page_category ='$category_id' order by ranking, lower(page_name)"; $result2 = mysql_query($query2) or die(mysql_error()); // Print out the contents of each row into a table while ($row2 = mysql_fetch_array($result2)) { extract($row2); ?> <li id="page_<?= $page_id ?>"><?= $page_name ?></li> <?php } ?> </ul> </li> <?php } ?> </ul> <script type="text/javascript"> function updateOrder() { var options = { method : 'post', parameters : Sortable.serialize('movies_list') }; new Ajax.Request('processor.php', options); } Sortable.create('movies_list', { onUpdate : updateOrder }); </script> <script type="text/javascript"> function updateOrder() { var options = { method : 'post', parameters : Sortable.serialize('page_list') }; new Ajax.Request('processor.php', options); } Sortable.create('page_list', { onUpdate : updateOrder }); </script> </body> </html> I hope someone can explain to me how to do the drag and drop effect for the pages across the categories and at the same time being able to sort the categories. Or if anyone knows of a tutorial that would be great! Thanks in advance! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.