使用 AJAX 重新加载部分视图不起作用

Posted 2023-05-09

【中文标题】使用 AJAX 重新加载部分视图不起作用

【英文标题】：Reload partial view using AJAX not working

【发布时间】：2014-02-05 16:22:12

【问题描述】：

我想在不重新加载页面的情况下对列进行排序，我正在尝试使用 Ajax 但它不起作用。

welcome_controller.rb

def index
  @keyword = params[:keyword]
  @category = params[:category]

  @search = HrCurriculumIntern.search(params[:search])
  @hr_curriculum_interns = @search.all

  respond_to do |format|
    format.js
    format.html
  end
end

views/welcome/index.html.erb

<% title %>

<div class="container">
  <ul class="tabs" data-tabs data-toggle="tab">
<li class="active"><a href="#main"><%= t('labels.main') %></a></li>
<li><a href="#interns"><%= t('labels.interns') %></a></li>
<li><a href="#analysts"><%= t('labels.analysts') %></a></li>
</ul>  

<div class="tab-content"> 
 <div id="main" class="active">
  <%= render "search" %>
</div>

<div id="interns" >
  <%#= render "hr_curriculum_interns/hr_curriculum_interns_filter" %>
  <%= render "hr_curriculum_interns/table_hr_curriculum_interns" %>
</div>

<div id="analysts" >
  <%= render "hr_curriculum_systems_analysts/table_hr_curriculum_systems_analysts" %>
</div>

在views/welcome/index.js.erb中

$("#table_hr_curriculum_interns").html("<%=escape_javascript(render("hr_curriculum_interns/table_hr_curriculum_interns")) %>");

views/hr_curriculum_interns/_table_hr_curriculum_interns.html.erb

<%= stylesheet_link_tag "bootstrap" %>
<%= javascript_include_tag "bootstrap-tabs" %>

 <div class="container">
 <%= new_button HrCurriculumIntern.new, [:new, :hr_curriculum_intern] %>
   <table class="zebra-striped">
      <thead>
        <tr>
    <th><%= sort_link @search, :date_interview, t('attributes.date_interview') %></th>
    <th><%= sort_link @search, :name, t('attributes.name') %></th>
    <th><%= sort_link @search, :college, t('columns.college') %></th>
    <th><%= sort_link @search, :major, t('columns.major') %></th>      
    <th><%= sort_link @search, :answer_sent, t('columns.answer_sent') %></th>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</thead>
<tbody>
  <%# @hr_curriculum_interns = HrCurriculumIntern.all %>
  <% @hr_curriculum_interns.each do |hr_curriculum_intern| %>
    <tr>
      <td><%= display_date(hr_curriculum_intern.date_interview) %></td>
      <td><%= smart_truncate(hr_curriculum_intern.name) %></td>     
      <td><%= smart_truncate(hr_curriculum_intern.college) %></td>
      <td><%= smart_truncate(hr_curriculum_intern.major) %></td>
      <td><%= hr_curriculum_intern.answer_sent %></td>
      <td><%= show_icon hr_curriculum_intern, hr_curriculum_intern, "data-default-action" => true %></td>
      <td> <%= edit_icon hr_curriculum_intern, edit_hr_curriculum_intern_path(hr_curriculum_intern) %></td>
      <td><%= link_to image_tag('icons/destroy.png'), hr_curriculum_intern, method: :delete, data:  confirm: t('messages.are_you_sure')  %></td>
    </tr>
  <% end %>
</tbody>

这不是 workinks，当我单击任何列名时，页面会重新加载。 怎么了？

【问题讨论】：

在 Chrome 网络 (xhr) 选项卡中打开并查看来自服务器的响应。你在那里看到了什么？

我没用过这个：PP，很酷，是不是：请求URL：0.0.0.0:3000/?search[meta_sort]=date_interview.asc请求方法：GET？

分享sort_link辅助方法sn-p

【参考方案1】：

为什么只需要执行 AJAX 请求来重新排序数据？为什么不直接使用客户端 JS 对其进行排序并重新显示？

有几个 Railscast 将向您展示如何做到这一点：

http://railscasts.com/episodes/340-datatables

http://railscasts.com/episodes/228-sortable-table-columns

【讨论】：

我使用教程 228-sortable-table-columns \o/，我也会尝试使用 340。 o/