Get dimension of widgets after resize in gridster serialize data as JSON

[aasimkhan1410]

I am trying to get serialize JSON data after changing the size and position of widgets. But I get the on load details only. How to get serialize data after resizing the widgets . And I also want to get the text(value in the box) of the box.

This is my code:

$(function() {

var gridster = $(".gridster > ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [230, 160], helper: 'clone', resize: { enabled: true,

  },
  serialize_params: function($w, wgd) {
      return {
          text: $($w).attr('.drop'),
          col: wgd.col,
          row: wgd.row,
          size_x: wgd.size_x,
          size_y: wgd.size_y
      };
  }

}).data('gridster');

//serialization//

var gridster = $(".gridster > ul").gridster().data('gridster'); gridData = gridster.serialize(); /alert(gridData.toSource())/

$('.js-seralize').on('click', function() { alert(gridData.toSource()); });

//delete//

$(".del_img").click(function() { gridster.remove_widget($(this).parent()); }); });

Please Help.

Thanks in advance.

[aasimkhan1410]

I used this code, and got the solution:

var gridster = $(".gridster > ul").gridster().data('gridster'); gridData = gridster.serialize();
$('.js-seralize').on('click', function() { // alert(gridData.toSource()) var finalserializer="["; $('.re_boxes').each(function(){ var xaxisval = $(this).attr("data-sizex"); var yaxisval = $(this).attr("data-sizey"); var colval = $(this).attr("data-col"); var rowval = $(this).attr("data-row"); var coltitle = $(this).find("a").text(); var currentfinal = "{'col':"+colval+",'row':"+rowval+",'size_x':"+xaxisval+",'size_y':"+yaxisval+",'text:'"+coltitle+"}"; finalserializer = finalserializer+currentfinal; }); finalserializer=finalserializer+"]"; alert(finalserializer); });