PHP array_push doesn't work with jquery $_REQUEST object

At http://maureenmoore.com/momp_112412/112412.html I am trying to make an array of the divs that were dragged into the droppable box. Please see the view source.


I use $.post to send the divs to the php file process.php and it gives me 1 to 3 arrays depending on how many divs I dragged instead of just one combined array. I want to push the $_REQUEST object (i.e., the dropped div) into an array using

$stack = array();
foreach ($_REQUEST as $key => $value) {
            array_push($stack,$value);
          }
print_r($stack);

Code (markup):

but it gives me 1 to 3 arrays each with the key of zero. How do I get one array out of for example 3 dragged divs?

 

This is more of a JS issue than PHP.

In your code, you are attaching a click event EVERY time you move a box into the right grid. If you move it out then move it again, then when you click submit, it will make two post calls.

The other problem is that before you make the click() function, data gets reset to the current box value, thus never sending all the data.

Here is a possible solution:

var selectedBoxes = new Array();
$(document).ready(function(){
    $( "#draggable1" ).draggable({ grid: [ 20,20 ] });
    $( "#draggable2" ).draggable({ grid: [ 20,20 ] });
    $( "#draggable3" ).draggable({ grid: [ 20,20 ] });	 
    $( "#droppable_box" ).droppable({
        drop: function( event, ui ) {
            var data = $(ui.draggable).attr('id');
            if ($.inArray(data , selectedBoxes ) >= 0) {
                 // if data not in selectedBoxes , add it
                 selectedBoxes[selectedBoxes.length] = data;
            }
         });
       },
       // Dropped out, remove it
       out: function( event, ui ) {
           var data = $(ui.draggable).attr('id');
           var sub;
           sub = $.inArray(data , selectedBoxes )
           if (sub >= 0) {
               selectedBoxes.splice(sub, 1);
           }
       }
    });
    $('#myId').click(function(event){
        $.post("process.php",({data: selectedBoxes}),function(data,status){	
        alert("Data: " + data);
    });
});

PHP:

Not tested, so you might have to fix some issues.

 

My advice -- swing an axe at the jquery bloat and stop pissing on accessibility, and use checkboxes instead. Latch an onchange to do a class swap on the parent, forgetting the whole drag and drop nonsense. There's a reason you don't see this type of stuff on 'real' websites.

 

I implemented your suggested code at maureenmoore.com/momp_112412/121712.html but it didn't work. I also tried putting the click function outside of the drop function at maureenmoore.com/momp_112412/121712_900.html but that didn't work either. Thanks for the help anyway.

 

The winning code was from adeneo at stack overflow You can view the source here: maureenmoore.com/momp_112412/121712_1400.html

 

Thanks to ThePHPMaster for the out code for when the draggable is taken out of the droppable box. I ended up using it after all.