2011-01-10 123 views
1

您好我目前有一个Rails应用程序,它使用jQuery库来运行ajax请求。但是我碰到的是Ajax请求一个小问题正在发送出去是给我的错误:Rails和jQuery发送Ajax请求

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

导轨程序应该采取拖动对象,并在有效的容器中删除它,然后更新可拖动对象的属性以反映通过拖放给出的新权限。所以它基本上是一种组织权限但通过拖放的方式。这是Rails代码

<%= 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" 
     %> 

这是jrails和jQuery创建JavaScript的:

<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> 

即时猜测它有事情做与($(this).attr('id'))但林不知道应该有什么。 .. 谢谢,

回答

2

我在我的老项目中做过同样的事情。它涉及拖动3个不同栏目的新闻小组。下面是我用拖动的JavaScript(jQuery的),并丢弃:

$(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') 
    }); 

}); 

您可以检查jQuery UI的API为不同的选项http://docs.jquery.com/UI/Sortable

因此,如果对象是JavaScript动作update_user将triggerd丢弃

function update_user(){  

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

在url选项中,您必须填写您的控制器和操作以及您要在操作中处理的数据。在这个例子中,我们使用数据,并在你的///你可以像这样访问

raise params[:data].inspect 

我希望这将帮助你在你途中的数据!

0

你使用什么版本的jQuery(和jQueryUI)?旧版本的jQueryUI 1.6.x似乎有一个与此相关的错误。

+0

我正在使用:jQuery UI 1.7.2和jQuery 1.4.4,所以不能成为问题。 – TheRealVayne 2011-01-10 09:18:15

+0

刚刚更新到jQuery UI 1.8.x和IM仍然有相同的问题。 – TheRealVayne 2011-01-11 02:54:13