Rails and jQuery sending Ajax requests

Hi I currently have a Rails app that uses the jQuery library to run the ajax requests. However i've run into a slight problem as the ajax request that is being sent out is giving me an error:

a(this).data("draggable") is undefined

The rails program is supposed to take a draggable object and drop it in a valid container and then update the properties of the draggable object to reflect the new permissions given by dragging and dropping. So its basically a way to organize permissions but through dragging and dropping. This is the Rails code

<%= drop_receiving_element drop_id,
            :onDrop => "function(ev,ui){
          if (confirm(\"#{escape_javascript(_('This will add User to this Group, are you sure?'))}\"))
          {#{remote_function(:update => 'module_content',
          :url => {:controller => :projects,
          :action => :member_change,
          :id => @project.id},
          :with => "'u=' + encodeURIComponent($(ui.draggable).attr('id')) + '&r=' + encodeURIComponent($(this).attr('id'))"
          )};}
          }",
            :accept => '.RolesUsers开发者_JAVA百科Selection',
            :update => 'roles_edit',
            :url => {:controller => :projects, :action => :role_user_update},
            :hoverclass => "#{drop_class}_active"
        %>

And this is the JavaScript created by jrails and jquery:

<script type="text/javascript">
//<![CDATA[
jQuery('#RemoveThisMember').droppable({accept:'.RolesUsersSelection', drop:function(ev,ui){
    if (confirm("This will remove User from this Group, are you sure?"))
    {jQuery.ajax({data:'u=' + encodeURIComponent($(ui.draggable).attr('id')), success:function(request){jQuery('#module_content').html(request);}, type:'post', url:'/of/projects/11/member_delete'});}
    }, hoverClass:'ProjectRoleDropDelete_active'})
//]]>
</script>

Im guessing it's got something to do with the ($(this).attr('id')) but im not sure what else should be there... Thanks,

---

I did the same in an older project of mine. It involved dragging news panels in 3 different columns. Here is the javascript (jquery) i used for the dragging and dropping:

$(function(){
    $( ".sortable" ).sortable({
            revert: true, 
            scroll: true,
            connectWith: '.sortable',
            placeholder: 'placeholder',
            forcePlaceholderSize: true,
            handle: $('h2'),
            stop: update_user,
            zIndex: 200,
            start: start_drag,
            appendTo: $('.sortable')
    });

 });

You can check the Jquery UI API for the different options http://docs.jquery.com/UI/Sortable

So the javascript action update_user will be triggerd if the object is dropped

function update_user(){     

$.ajax({
   type: "POST",
   url: "/<controller>/<action>/",
   data: "data="+<data>",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
     });
}

At the url option you must fill in your controller and action and the data you want to process in the action. In this example we use data and in your /// you can access the data like this

raise params[:data].inspect

I hope this will help you on your way!

---

What version of jQuery (and jQueryUI) do you use? An old version of jQueryUI 1.6.x seemed to have a bug related to this.