AzzyDude AzzyDude - 1 year ago 101
Javascript Question

not sure how to use gridster.serialize() with Gridster jQuery plugin

I've just started using the Gridster jQuery plugin and I'm having trouble using
gridster.serialize(). According to the site, it is supposed to create a JavaScript array of objects with positions of all the widgets, ready to be encoded as a JSON string.

I just have some basic code:

$(function(){ //DOM Ready
$(".gridster ul").gridster({
widget_margins: [10, 10],
widget_base_dimensions: [140, 140]

With corresponding HTML:

<div class="gridster">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">1</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">1</li>
<li data-row="3" data-col="1" data-sizex="1" data-sizey="1">1</li>

<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">2</li>
<li data-row="2" data-col="2" data-sizex="3" data-sizey="2">2</li>

<li data-row="1" data-col="4" data-sizex="1" data-sizey="1">3</li>
<li data-row="2" data-col="4" data-sizex="2" data-sizey="1">3</li>
<li data-row="3" data-col="4" data-sizex="1" data-sizey="1">3</li>

And it's not entirely clear to me how the gridster.serialize() function is suppose to work. I'm just trying to record the current size/position of all the tiles in my grid and put it into an array of some kind. Anyone have any ideas?

EDIT: Here's the site.

Answer Source

Got it.

        var gridster = $(".gridster ul").gridster().data('gridster');
        $(function(){ //DOM Ready
            $(".gridster ul").gridster({
                widget_margins: [10, 10],
                widget_base_dimensions: [140, 140],
                serialize_params: function($w, wgd) { 
                    return { 
                           id: $w.attr('id'), 
                           col: wgd.col, 
                           row: wgd.row, 
                           size_x: wgd.size_x, 
                           size_y: wgd.size_y 
            var gridster = $(".gridster ul").gridster().data('gridster');
            gridData = gridster.serialize();
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download