www.webdeveloper.com
Results 1 to 1 of 1

Thread: Expanding my Sort function (Need foreach help badly)

  1. #1
    Join Date
    May 2010
    Posts
    43

    Expanding my Sort function (Need foreach help badly)

    I feel like a total novice and should for not properly understanding how this works but here is what I'm working with.

    I have a simple way of sorting a list of divs to save/maintain their state upon each change thats made via 'dragging' one element above or below another.

    I handle it like so:

    PHP Code:
    <?php

    $toSort 
    $_POST['drag'];

    // Connect to the DB
    include("config.php");

    // Re-organize the order of the elements
    for ($i 0$i count($toSort); $i++) {  
        
    mysql_query("UPDATE `Items` SET `Order` = ".$i." WHERE `itemid` = ".$toSort[$i]."");
    }
    echo 
    "<pre>";
    print_r($toSort);
    echo 
    "</pre>";

    mysql_close($cfg['connexion']);

    ?>
    To give some understanding to the framework itself, one list for example is generated like so to produce the content for #myList1(each list is generated by its boxid matching the list number, so #myList2 takes all instances where boxid = 2 etc):

    PHP Code:
    <?php

    // Connect to the DB
    include("config.php");

    $result mysql_query('SELECT itemid,content,rating,boxid FROM `Items` WHERE boxid = 1 ORDER BY `Order`');  //How to generate contents for box 1


        
    while($row mysql_fetch_array($result))
    {
        

        
        
        
    $content .= '<div id="drag_' $row{'itemid'} . '" class="fudge list_element">
        <span id="' 
    $row{'itemid'} . '" rating='.$row{'rating'}.'><span class="names" id="' $row{'itemid'} . '">'.$row{'content'}.'</span> (<span id="' $row{'itemid'} . '" class="lol">' $row{'rating'} . '</span>)</span>
        </div>'
    ."\n";
        



    }




    // return list of elements
    echo $content;
    ?>
    So you can see where the element is assigned an ID of drag_itemid and now we get to the problem. Each individual list will save its order just fine but I wanted to connect them. I have...Each myList# has a class of 'biglist'. The problem is devising a way to save the order based on WHICH list there are now in as well since content is being dragged between them (About 10 lists).

    Inside my page where I've pre-built these boxes I call a javascript file to handle the edit-in-place functionality as well as sorting based on the 'event' it detects when somethings order is changed.

    It looks like so:

    Code:
    $(function()
    {
    	// I know this is all my fault and looks really silly 
    	// connectWith doesnt work properly when certain boxes are init after others but this seems to work
    
    	firstbox();
    	firstboxList();
    	
    	
    	
    });
    
    function firstboxList() // List of Employees off or vacation
    {
    
    	$.ajax({
    		url: "list.php", //where the order and content of the items themself are iterated
    		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
    				$('#myList1').html(feedback); // Displays new elements in a list
    				$(".lol").editable // lawl
    				("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",  //file to handle where to save the boxes title when edited
    				{ // 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);
    					}
    				}
    				);
    			
    			
    				/*
    				$(".boxtitles").editable('save.php', 
    				{
    					indicator : "<img src='images/loading.gif' /> Submitting ...",  // Does a neat little animation here with a 16x16 gif
    					event: "dblclick",
    					style: 'inherit',
    					submitdata : function(value, settings) 
    					{
    					return {name: $(this).attri('id'), id: <?php echo $id; ?>};
    					}
    					
    				});
    				*/
    				
    					$('#myList1').sortable({ // Renders items as "sortable"
    					connectWith: $('.biglist'), //each list has this class
    					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,
    					update : function (sorted) 
    					{ 
    						// Callback Function, modifies the list
    						serial = $('#myList1').sortable('serialize'); // Time to serialize that mofo						
    						$.ajax({
    							url: "sort.php",
    							type: "POST",
    							data: serial,
    							success: function(feedback)
    							{ 
    								$('#data').html(feedback); 
    							} 
    						});      
    					}				
    				});
    				
    				
    				$('#myList1').sortable("refresh"); 
    			}
    		}
    			
    	});
    }
    I saw a solution on stackoverflow that I think will handle my conundrum but I'm too thick to explain it to myself.

    Something along the lines of

    PHP Code:
    $(function() {
     $(
    ".biglist").sortable(
    {
        
    connectWith'.biglist'Not sure if this part works or if it needs to be ul or ol
        stop 
    : function () 
        { 
            $.
    ajax(
            {
                
    type"POST",
                
    url"sort.php"// Might need a new one for this
                
    data
                {
                    
    sort1:$("#myList1").sortable('serialize'),
                    
    sort2:$("#myList2").sortable('serialize'),
                    
    sort3:$("#myList3").sortable('serialize'),
                    
    sort4:$("#myList4").sortable('serialize'),
                    
    sort5:$("#myList5").sortable('serialize'),
                    
    etc,etc,etc,etc since I have like 12 lists.

                },
                
    success: function(html)
                {

                    
    alert(html);

                }
            });
        } 
    }).
    disableSelection();
    }); 
    Could I just get some explanation as to how to iterate the results? Because I had a function for each list I'm wondering how to combine them with this method using the sort function I posted first.
    Last edited by Sodascript; 07-19-2010 at 12:18 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles