Thursday, April 7, 2011

jquery w/ rails : ajax update of drag & drop item

A script added to my html.erb file, at page load it establishes sortable columns, and ajax call to automatically update an item when it is dragged from one column to another:

$(function() {
$(".sortcol").sortable({
connectWith: ".sortcol",
receive: function(event, ui) {
$.ajax({
url: "<%= drop_url() %>",
type: 'PUT',
data: $.param({id : ui.item.attr('id'), state : ui.item.parent().attr('id')}),
success: function(d) { ui.item.effect("pulsate", {} , 500 ) }
})//end get
} //end receive function
}); //end sortable
}); // end function



The drop_url references as routes.rb entry /board/drop to a specific board_controller method. Upon retrospect, I'm thinking this ought to work with the default update method on my :story resource. Note to self, if your update method doesn't update... check that you haven't forgotten your parameter naming conventions. status != state no matter how you write the method to update.

1 comment:

  1. Getting this working was an interesting exercise, the erb templates feel so natural at first I completely forgot I was writing code for two different worlds - server side + client side...

    a link of <%= store_path(ui.item.attr('id') %> sadly will not work, ui variable not having been created yet!

    Luckily for me my next attempt to hand craft the URL for a $get call failed due to some syntax errors in general, 'cause it was just plain silly in comparison to the $ajax solution.

    ReplyDelete