Rails and jQuery sending Ajax requests

Question

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 => '.RolesUsersSelection',
            :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,

Daniël Zwijnenburg · Accepted Answer · 2011-01-11 18:18:09Z

2

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!

answered Jan 11, 2011 at 18:18

Daniël Zwijnenburg

2,5602 gold badges22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CatNip44 Over a year ago

I'm actually using the Rails Helper methods to create my Javascript, so there's pretty much no way I can directly change the Javascript Code. But thanks for your help anyway.

CatNip44 Over a year ago

I just added the code ui.draggable.remove(); after the remote function and it worked. thanks for your help btw

James Chen · Accepted Answer · 2011-01-10 08:56:37Z

0

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.

answered Jan 10, 2011 at 8:56

James Chen

10.9k1 gold badge44 silver badges38 bronze badges

2 Comments

CatNip44 Over a year ago

I'm using: jQuery UI 1.7.2 and jQuery 1.4.4 so that can't be the issue.

CatNip44 Over a year ago

Just updated to jQuery UI 1.8.x and im still having the same issue.

Collectives™ on Stack Overflow

Rails and jQuery sending Ajax requests

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related