Question

我有一个应用程序，列出表中即将发生的事件。我希望它在单击适当的表头时对表ASC / DESC进行排序。我对link_to's remote: true的来源感到困惑。

的routes.rb

get '/admin_events', to: "events#admin_index"

events_controller.rb

def admin_index
  date = params[:date]

  @events = Event.order("date ASC, time ASC")

  if date
     @events = Event.order("date DESC, time ASC")
  end

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

admin_index.html.erb

<div class="row">
  <div class="col-xs-12 col-md-12 col-lg-12">
    <table id="admin_events_table" class="table-striped" style="width: 100%">
      <thead>
        <th><%= link_to "Date", { remote: true },  id: "date" %></th>
        <th>Time</th>
        <th>Title</th>
        <th>Venue</th>
        <th></th>
        <th></th>
      </thead>
      <tbody id="admin_events">
       <%= render @events %>
      </tbody>
    </table>
  </div>
</div>

_event.html.erb

<tr>
  <td><%= event.date.strftime('%A %B %-d') %></td>
  <td><%= event.time.strftime('%l:%M %P') %></td>
  <td><%= event.title %></td>
  <td><%= Venue.find(event.venue_id).name %></td>
  <td><%= link_to "Edit", edit_event_path(event) %></td>
  <td><%= link_to "Delete", event, method: :delete, data: { confirm: "Are you sure?" } %></td>
</tr>

admin_index.html.erb

$('#admin_events').html("<%=j render @events %>");

的application.js

$(document).ready(function(){
  $('#admin_events_table #date').on('click', function(){
    $.get(
      '/admin_events',
      { date: "true" });
  });  
});

当我点击表格标题#date时，会调用/admin_events?date=true。 30ms后调用/admin_events。效果看起来没有任何反应。在application.js中如果我将选择器切换到'body'并单击页面上的任何位置，我的表将正确使用并保持这种状态。所以我猜这与我的link_to电话有关。

Answer 1

不确定你要求的是什么:)如果你想阻止link_to电话，请在你的回调结束时添加'return false'：

<强>的application.js

  $(document).ready(function(){
    $('#admin_events_table #date').on('click', function(){
      $.get(
        '/admin_events',
        { date: "true" });

      return false; // <= this one
    });  
  });

Rails应用程序中的ajax调用进行2次调用以呈现局部

1 个答案: