mutliple jquery sortables on a page

[generic]

I'd like to be able to have several jquery UI sortable lists (dynamically populated from mySQL) on one page but so far I've been unable to get anything past the first list to actually be sortable. I don't need to sort items between the different lists, only within a parent ul.

Right now, this is what my jquery looks like:

$(function() {
 $("#sortable").sortable({
 opacity: 0.8,
 axis: 'y',
 stop: function(i) {
  $.ajax({
  type: "GET",
  url: "includes/updatedb_dishes.php",
  data: $("#sortable").sortable("serialize")});
 }
 });
 $("#sortable").disableSelection();
});

Am I doing something wrong or are multiple sortable lists not supported using jquery 'sortable'?

[subexpression]

generic,

Since you're referencing the sortable ul by id, jQuery can only locate one unique element with that id.

Id's are different than classes in the sense that only one element on the page can have that distinct and unique id. Multiple elements can share the same class.

If you want another sortable, you'll need to give it a unique id.

[pre]$("#second-sortable").sortable(
 {
  // PARAMETERS GO HERE
 }); [/pre]

[generic]

Hi subexpression, thanks for the reply. I can get that far as well but the problem is that the lists are dynamically generated so I'd need to be able to dynamically generate the unique id's in the jquery as well.

[generic]

Let me clarify a bit more.

The jquery itself is set up so that I can change out the AJAX url based on what page we're on. So...

$(function() {
$("#sortable").sortable({
opacity: 0.8,
axis: 'y',
stop: function(i) {
$.ajax({
type: "GET",
<?php
if (basename($_SERVER['PHP_SELF']) == 'menus.php') {
echo 'url: "includes/updatedb_menu.php",';
}
if (basename($_SERVER['PHP_SELF']) == 'categories.php') {
echo 'url: "includes/updatedb_cats.php",';
}
if (basename($_SERVER['PHP_SELF']) == 'dishes.php') {
echo 'url: "includes/updatedb_dishes.php",';
}
?>
data: $("#sortable").sortable("serialize")});
}
});
$("#sortable").disableSelection();
});

So it should just be a matter of looping through the database and parsing the entries in as new sortables right?

[generic]

Okay, I think I got it figured out here using a bit of php to manipulate and route data. So now I can have multiple lists on a page, each allowing sorting within itself and routing the AJAX update to the appropriate db connector. If anyone spots anything, please let me know otherwise I hope this can help someone else out.

<script type="text/javascript">
// first sortable, for sorting one list on one page and routing data to appropriate update file
// ie, <ul id="sortable">
$(function() {
$("#sortable").sortable({
opacity: 0.8,
axis: "y",
cursor: "move",
stop: function(i) {
$.ajax({
type: "GET",
<?php
if (basename($_SERVER['PHP_SELF']) == 'menus.php') {
echo 'url: "includes/updatedb_menu.php",';
}
if (basename($_SERVER['PHP_SELF']) == 'categories.php') {
echo 'url: "includes/updatedb_cats.php",';
}
if (basename($_SERVER['PHP_SELF']) == 'dishes.php') {
echo 'url: "includes/updatedb_dishes.php",';
}
?>
data: $("#sortable").sortable("serialize")});
}
});
$("#sortable").disableSelection();
});

<?php
$query = "SELECT menu_cat_name FROM menu_category";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result)){

// clean and match output to unique <ul> id's
$category = $row['menu_cat_name'];
$category = strtolower($category);
?>
// second sortable for more than one sortable list on one page, routing to a single update script
// ie, <ul id="CATEGORY_list">
$(function() {
$("#<?php echo $category.'_list'; ?>").sortable({
opacity: 0.8,
axis: "y",
cursor: "move",
stop: function(i) {
$.ajax({
type: "GET",
url: "includes/updatedb_dishes.php",
data: $("#<?php echo $category.'_list'; ?>").sortable("serialize")});
}
});
$("#<?php echo $category.'_list'; ?>").disableSelection();
});

<?php
}
?>
</script>

[subexpression]

Is it necessary to echo $category at all?
It seems like the MySQL query is unnecessary.

Wouldn't "list" be enough for the id, since there's only two sortables on the page: #sortable, #list?

[pre]
$($function(){
 $("#sortable").sortable({...});
 $("#sortable").disableSelection();
 $("#list").sortable({...});
 $("#list").disableSelection();
});[/pre]

The only thing differentiating your two sortables are id's and the url's. Other than that, they are identical.

So, why query the db for the string "category" if it's only for the id of the second sortable?

[generic]

Actually, there are several lists on that page. The whole setup is for a menu system for a restaurant. There would only be one list of menus (lunch, dinner, etc) on the menus.php page, but I needed to sort dishes.php by menu and surther, by a category (ie, soups, appetizers, mains, etc). So this implementation will allow for any number of categories to be dynamically built and still sortable with unique id's.

[subexpression]

generic,

I see. Well, it looks like you got it under control.

good luck!