2

导轨版本：3.2.1

红宝石版本：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 渲染流或路由问题，在我的情况下，似乎根本没有任何连线。

这是一些代码：

我在视图中的链接：

<%= 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 控制器代码：

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

2 回答 2

2

Okay, so I figured it out.

Examining this HTML for the related :remote links:

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

The :remote links are in a DIV with the id "list-item-expander". This row had an onclick event that would expand the details of the current item below it. Here's the JS code that managed the interaction:

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

Apparently the evt.stopPropation() was not allowing the :remote link's click event to bubble up high enough in the event chain to be handled by UJS. I fixed the problem by filtering out the srcElements related to the :remote link. Here's the code:

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));
    }
});

By filtering the srcElements, the Img/A clicks are allowed to bubble up.

于 2012-04-18T04:31:47.147 回答
0

您是否已将您的内容rails.js包含在 application.js/application.coffee javascript 资产打包程序中？如果不这样做。否则，您将不得不自己在 javascript/coffee 脚本中编写事件处理程序。

此外，这段代码看起来有点脏。您的 index.js.erb 代码可能至少应该包装到 $(document).ready(function(){ / HERE / });

您在笔记控制器中的索引操作我执行、显示、搜索和过滤。比我期望的还要多:)

关于rails 3.2中的ajax /远程事物 http://guides.rubyonrails.org/ajax_on_rails.html

于 2012-04-16T23:20:37.763 回答