Storing gridster in database

Question

I am using jQuery gridster and saving the positions in database. I also have a general add new button for adding new gridster and a delete button in each gridster to delete it. I am using ajax call when user moves, adds or deletes. In database there is a user_id and a jsonstring field. When user drags or click delete/add, I am taking all the gridsters, create a json string and save it to database.

Add new code:

$(document).on('click', '.add-new', function(){
   gridster.add_widget(html); // html code for GS is saved in html variable
   savegs(); 
})

Delete code

$(document).on('click', 'a.ak-delete', function(){
   gridster.remove_widget($(this).parents('li.gs_w'));
    // I am calling the same save function for delete
    savegs();
})

save gridster code:

function savegs(){
var saveJson = "";
$('.gridster > ul > li.gs_w').each(function (){
   var $item = $(this);
   var col  = $item.data('col');
   var row  = $item.data('row');
   var sizex = $item.data('sizex');
   var sizey = $item.data('sizey');
   var saveJson += -------- -------;// generate json
});
// then i generate a json string in the loop above
}

The add new functionality works just fine. but delete has a problem. It is destroying the item but still getting it in each function. So it is saved in the database. Can anyone tell whats the problem is?

Thanks.

Answer 1

Ok.. after some tweaking, I found a solution. In the delete function, I am adding a class (deleted) to the li (gs_w). Then in savegs function, I am checking if there is a class named (deleted) there. If so, then exclude it from saving. Its funny; but works!

$(document).on('click', 'a.ak-delete', function(){
   $(this).parents('li.gs_w').addClass('deleted');
   gridster.remove_widget($(this).parents('li.gs_w'));
   savegs();
})

function savegs(){
var saveJson = "";
$('.gridster > ul > li.gs_w').each(function (){
   if (!$(this).hasClass("deleted")) {
      var $item = $(this);
      var col  = $item.data('col');
      var row  = $item.data('row');
      var sizex = $item.data('sizex');
      var sizey = $item.data('sizey');
      var saveJson += -------- -------;// generate json
   }
});
}