jquery drag and drop script and problem in reading json array

Posted by Mac Taylor on Stack Overflow See other posts from Stack Overflow or by Mac Taylor
Published on 2010-04-25T13:44:22Z Indexed on 2010/04/25 13:53 UTC
Read the original article Hit count: 213

Filed under:
|
|

i made a script , exactly like wordpress widgets page and u can drag and drop objects

this is my jquery script :

<script type="text/javascript" >$(function(){
    $('.widget')
    .each(function(){
        $(this).hover(function(){
            $(this).find('h4').addClass('collapse');
        }, function(){
        $(this).find('h4').removeClass('collapse');
        })
        .find('h4').hover(function(){
            $(this).find('.in-widget-title').css('visibility', 'visible');
        }, function(){
            $(this).find('.in-widget-title').css('visibility', 'hidden');
        })
        .click(function(){
            $(this).siblings('.widget-inside').toggle();
            //Save state on change of collapse state of panel
            updateWidgetData();
        })
        .end()
        .find('.in-widget-title').css('visibility', 'hidden');
    });

    $('.column').sortable({
        connectWith: '.column',
        handle: 'h4',
        cursor: 'move',
        placeholder: 'placeholder',
        forcePlaceholderSize: true,
        opacity: 0.4,
        start: function(event, ui){
            //Firefox, Safari/Chrome fire click event after drag is complete, fix for that
            if($.browser.mozilla || $.browser.safari)
                $(ui.item).find('.widget-inside').toggle();
        },
        stop: function(event, ui){
            ui.item.css({'top':'0','left':'0'}); //Opera fix
            if(!$.browser.mozilla && !$.browser.safari)
                updateWidgetData();
        }
    })
    .disableSelection();
});

function updateWidgetData(){
    var items=[];
    $('.column').each(function(){
        var columnId=$(this).attr('id');
        $('.widget', this).each(function(i){
            var collapsed=0;
            if($(this).find('.widget-inside').css('display')=="none")
                collapsed=1;
            //Create Item object for current panel
            var item={
                id: $(this).attr('id'),
                collapsed: collapsed,
                order : i,
                column: columnId
            };
            //Push item object into items array
            items.push(item);
        });
    });
    //Assign items array to sortorder JSON variable
    var sortorder={ items: items };

    //Pass sortorder variable to server using ajax to save state
$.post("blocks.php"+"&order="+$.toJSON(sortorder), function(data){
$('#console').html(data).fadeIn("slow");
 });

}

</script>

main part is saving object orders in table and this is my php part :

function stripslashes_deep($value) {
$value = is_array($value) ? array_map('stripslashes_deep', $value) :
stripslashes($value);
return $value; }


$order = $_GET['order'];
$order = sql_quote($order);
if(empty($order)){
echo "Invalid data";
exit;
}

global $db,$prefix;
if (get_magic_quotes_gpc()) {

$_POST = array_map('stripslashes_deep', $_POST);
$_GET = array_map('stripslashes_deep', $_GET);
$_COOKIE = array_map('stripslashes_deep', $_COOKIE);
$_REQUEST = array_map('stripslashes_deep', $_REQUEST);
}
$data=json_decode($order);
foreach($newdata->items as $item)
{
    //Extract column number for panel
    $col_id=preg_replace('/[^\d\s]/', '', $item->column);
    //Extract id of the panel
    $widget_id=preg_replace('/[^\d\s]/', '', $item->id);
    $sql="UPDATE blocks_tbl SET bposition='$col_id', weight='".$item->order."' WHERE id='".$widget_id."'";
    mysql_query($sql) or die('Error updating widget DB');
}
print_r($order);

now forexample the output is this :

items\":[{\"id\":\"item26\",\"collapsed\":1,\"order\":0,\"column\":\"c\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":0,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":1,\"column\":\"i\"},{\"id\":\"item1\",\"collapsed\":1,\"order\":2,\"column\":\"i\"},{\"id\":\"item3\",\"collapsed\":1,\"order\":3,\"column\":\"i\"},{\"id\":\"item16\",\"collapsed\":1,\"order\":4,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":5,\"column\":\"i\"},{\"id\":\"item6\",\"collapsed\":1,\"order\":6,\"column\":\"i\"},{\"id\":\"item17\",\"collapsed\":1,\"order\":7,\"column\":\"i\"},{\"id\":\"item19\",\"collapsed\":1,\"order\":8,\"column\":\"i\"},{\"id\":\"item10\",\"collapsed\":1,\"order\":9,\"column\":\"i\"},{\"id\":\"item11\",\"collapsed\":1,\"order\":10,\"column\":\"i\"},{\"id\":\"item0\",\"collapsed\":1,\"order\":0,\"column\":\"l\"},{\"id\":\"item5\",\"collapsed\":1,\"order\":1,\"column\":\"l\"},{\"id\":\"item8\",\"collapsed\":1,\"order\":2,\"column\":\"l\"},{\"id\":\"item13\",\"collapsed\":1,\"order\":3,\"column\":\"l\"},{\"id\":\"item21\",\"collapsed\":1,\"order\":4,\"column\":\"l\"},{\"id\":\"item28\",\"collapsed\":1,\"order\":5,\"column\":\"l\"},{\"id\":\"item7\",\"collapsed\":1,\"order\":0,\"column\":\"r\"},{\"id\":\"item20\",\"collapsed\":1,\"order\":1,\"column\":\"r\"},{\"id\":\"item15\",\"collapsed\":1,\"order\":2,\"column\":\"r\"},{\"id\":\"item18\",\"collapsed\":1,\"order\":3,\"column\":\"r\"},{\"id\":\"item14\",\"collapsed\":1,\"order\":4,\"column\":\"r\"}]}

question is how can i find out column_id or order

im a little bit confused

© Stack Overflow or respective owner

Related posts about JSON

Related posts about php