Capturing the updated content from text are in JSON variable

Answer 1

Looking at gridster's docs, you can add a serialize_params to your gridster initialization to customize what the serialization does.

You can then add a value field that will get serialized as $w.find(':input').val() which retrieves the up-to-date value of the input field within each cell of the grid.

gridster = $('.gridster ul').gridster({
  widget_base_dimensions: [100, 55],
  widget_margins: [5, 5],
  serialize_params: function($w, wgd) { 
    return { 
      value: $w.find(':input').val(), 
      col: wgd.col, 
      row: wgd.row, 
      size_x: wgd.size_x, 
      size_y: wgd.size_y 
    } 
  }
}).data('gridster');

Fiddle Demo