jquery - Rails UJS (jQuery) 未连接数据远程链接

Question

Rails 版本:3.2.1

Ruby 版本:1.9.3p125

浏览器:Chrome 18.0.1025.162

开发操作系统:Mac OS/X Lion

服务器操作系统:CentOS 5

我正在尝试在 link_to 调用中使用 :remote ，以便我可以使用 AJAX 请求 HTML 内容，并使用返回的内容填充页面的一部分。

Rails 似乎没有正确连接链路。浏览器只是将该链接视为常规链接标记，并且似乎没有处理任何 Rails UJS 单击事件处理程序。

我有一个与正在运行的数据确认相关的链接，因此这表明 UJS 至少正在执行一些必要的连接。

我将其他点击事件监听器附加到同一链接，以隐藏/显示页面的一部分，该部分将显示 AJAX 调用返回的 HTML。

如果这是在其他地方发布的，我深表歉意，但我已经搜索了几天，但没有找到解决此特定问题的解决方案。我看过一些相关的文章，但它们都假设正在进行 AJAX 调用，并且存在一些 Rails 渲染流或路由问题，而在我的情况下，似乎根本没有任何接线。

这是一些代码:

我在 View 中的链接:

<%= link_to image_tag("icons/24x24/attachment.png"), task_notes_path(task), :class => "section-link task-notes-link", :title => "View recent notes", :remote => true, 'data-section' => "task-notes" %>

RoR生成的输出:

<a href="/tasks/7/notes" class="section-link task-notes-link" data-remote="true" data-section="task-notes" title="View recent notes"><img alt="Attachment" src="/assets/icons/24x24/attachment.png"></a>

这是/task/:task_id/notes Controller 代码:

def index
store_return_to

@project = nil
@tasks = nil

if (params.has_key?(:project_id))
  @project = Project::find(params[:project_id])

  sort = [
    { :field => 'status', :direction => 'asc'},
    { :field => 'priority', :direction => 'asc' }
  ]

  filter = { :status => Task::STATUS_ACTIVE.to_s }

  @tasks = Task::filter_sort(:project => @project, :sort => sort, :filter => filter, :per_page => 0)
else
  @task_sort = params.has_key?(:task_sort) ? params[:task_sort] : { :field => 'priority', :direction => 'asc'}
  @task_filter = params.has_key?(:task_filter) ? params[:task_filter] : { :status => Task::STATUS_ACTIVE.to_s }
  @task_search = params.has_key?(:task_search) ? params[:task_search] : ""

  @tasks = Task::filter_sort(:search => params[:task_search], :sort => @task_sort, :filter => @task_filter, :page => params[:tasks_page], :per_page => 15)      
end

respond_to do |format|
  format.html # index.html.erb
  format.js
  format.json { render json: @tasks }
end
end

最后，我在index.js.erb 文件中的代码:

<% if (!@project.nil?) %>
    $('#project-<%=@project.id%>-tasks').html('<%= escape_javascript(render(@tasks)) %>');
<% else %>
    $('#project-tasks').html('<%= escape_javascript(render(@tasks)) %>');
<% end %>

Answer 1

好吧，我明白了。

检查此 HTML 中的相关 :remote 链接:

<div class="list-item-row">
<div class="list-item-expander action-icon">
  <a href="#" title="Show/hide content pane">
    <%= image_tag "icons/24x24/plus.png", :class => "expander-image closed" %>
    <%= image_tag "icons/24x24/minus.png", :class => "expander-image opened" %>
  </a>
</div><div class="action-icon">
  <a href="#" data-section="task-description" class="section-link" title="Show details"><%= image_tag "icons/24x24/page.png" %></a>
</div><div class="action-icon">
  <%= link_to image_tag("icons/24x24/attachment.png"), task_notes_path(task), :class => "section-link task-notes-link", :title => "View recent notes", :remote => true, 'data-section' => "task-notes" %>
</div><div class="action-icon">
  <%=task_image_tag(task, 24)%>
</div><div class="action-icon">
  <div class="task-priority task-priority-<%=task.priority_str.downcase%>" title="<%=task.priority_str%> Priority"></div>
</div><div class="action-icon">
  <% unless (task.assigned_developer.nil?) %><%= link_to image_tag(task.assigned_developer.avatar.icon.url), developer_path(task.assigned_developer), :title => "Assigned to: " + task.assigned_developer.full_name %><%end%>
</div><div style="width:280px;">
  <%=link_to truncate(task.name, :length => 40, :omission => "..."), task_path(task), :title => task.name, :class => "item-show-link" %>
</div><div style="width:300px;font-size:10px;color:#777;">
  <%=truncate(task.description, :length => 50, :omission => "...")%>
</div><div style="width:90px;float:right;text-align:center;">
  <%=task.status_str%>
</div></div>

:remote 链接位于 ID 为“list-item-expander”的 DIV 中。该行有一个 onclick 事件，该事件将展开其下方当前项目的详细信息。下面是管理交互的 JS 代码:

elem.find(".list-item .list-item-row").click(function(evt) {
    evt.stopPropagation();
    $.tf.listItem.showHideItem($(this));
});

显然 evt.stopPropation() 不允许 :remote 链接的点击事件在事件链中冒泡到足够高的位置以供 UJS 处理。我通过过滤掉与 :remote 链接相关的 srcElements 解决了这个问题。代码如下:

elem.find(".list-item .list-item-row").click(function(evt) {
    if ($(evt.srcElement).not('a').not('img').size() > 0) {
        evt.stopPropagation();
        $.tf.listItem.showHideItem($(this));
    }
});

通过过滤 srcElements，允许 Img/A 点击冒泡。