views:

21

answers:

0

I have a page with ten sortable lists that properly save the order of list items(divs) as they are moved inside their list. Each list itself is generated with a separate php file that basically iterates content based on its boxid #. So all content with a boxid of 5 gets output to list 5. All content with boxid of 3 gets output to list 3 etc. They are all 'connected' with the same class....so visually it works until the user refreshes the page :(

The problem is that I want to use connectWith and the 'receive' event to accept list items from all lists. So if I move an item from list 1 to list 3 it should trigger the receive event and check the list its been moved to (So that it can change the contents boxid variable to match in the DB! Hence saving its position!)

the DB looks like so:

id | content | order | boxid
1  | Bananas | 0     | 1
2  | Coconuts| 1     | 1
3  | Books   | 0     | 2

Here is a function example for one of my lists (Also using editable to change the contents text on the fly)

function eighthboxlist() 
{

$.ajax({
url: "eighthboxlist.php",
success: function(feedback)
{
 if(feedback != "") //Verifies if the list contains at least one element
{
// Which div the particular list prints to - each mylist number is in its own iteration page
$('#myList8').html(feedback); // Displays new elements in this list 
$(".lol").editable
("editinplace.php", 
{ // all lol elements use edit in place    
 event: "dblclick",
 style: 'inherit',
 tooltip: 'Double-Click to edit ...',     
 indicator : "<img src='images/loading.gif' /> Submitting ...",  // Does a neat little animation here with a 16x16 gif
 callback : function(value, settings)
 { 
 // settings involing plugin parameters
 $('#data').html('Element Changed : '+value);
 //alert(settings.cssclass);
 }
}
);
$(".names").editable
("editinplacenames.php",  
{ // all lol elements use edit in place 
 method: "PUT",
 event: "dblclick",
 style: 'inherit',
 tooltip: 'Double-Click to edit ...',     
 indicator : "<img src='images/loading.gif' /> Submitting ...",  // Does a neat little animation here with a 16x16 gif
 callback : function(value, settings)
 { 
 // settings involing plugin parameters
 $('#data').html('Element Changed : '+value);

 //alert(settings.cssclass);
 }
}
);   
 $('#myList8').sortable({ // Renders items as "sortable"
 connectWith: $('.biglist'),
 placeholder: 'help',  // css class for the final position of the element if I wanted to re-add .help to the style page
 revert: true,  // seems to work well     
 axis: 'vertically',
 opacity: 0.4,
 containment: 'parent',
 update : function (sorted) 
 { 
  // Callback Function, modifies the list
  serial = $('#myList8').sortable('serialize'); // Time to serialize that mofo
  $.ajax({
   url: "sort.php",
   type: "POST",
   data: serial,
   success: function(feedback)
   { 
    $('#data').html(feedback); 
   } 
  });      
 }    
});


$('#myList8').sortable("refresh");
}
}
});
}

Any and all help is super appreciated, I hit this big obstacle and can't figure out a good way to give each list a # for the receive function to check and update.