Rails - 如何在 Ajax GET 方法请求后重新渲染部分答案

【问题标题】：Rails - How to re-render partial after Ajax GET method requestRails - 如何在 Ajax GET 方法请求后重新渲染部分
【发布时间】：2016-05-09 12:09:39
【问题描述】：

Rail4,jQuery Ajax

我需要显示在 - jQuery Datepicker 上选择的一天的订单。

我设置了 Ajax 请求并在我的控制器中添加了一些人员，但我无法使其正常工作。需要建议。

Order_controller

def index
  @order = params[:date] ? Order.where(date: params[:date]) : Order.get_order_today
  respond_to do |format|
    format.html # render index.html.haml 
  end

结束

order.js.coffee

$ ->
  $('#datepicker').datepicker dateFormat: 'yy-mm-dd', onSelect: (dateStr) ->
     $.ajax ->
        type: "GET",
        url: "orders/index",
        dataType: "html",
        data: {date: dateStr}
        success: ->
           # Should i do something here for render default index view?
           console.log("everything is ok ;)")

查看/订单/索引

     #order.col-xs-12.col-sm-6.col-md-8
        = render 'orders/order'
     #datepicker.col-xs-6.col-md-4.date-picker-div

查看/订单/_order

%h3 Order info
%table.table.table-striped
  %tr
   %th Meal
   %th Price
 - if (!@order.nil?)
   - @order.products.each do |one_order|
     %tr
      %th=one_order.product_name
      %th=one_order.product_price
- else
     %tr
      %th no order yet
      %th
 - if (!@order.nil?)
    .col-md-8
       %span=link_to "Cancel order", delete_order_path(id: @order.id), method: :delete, :data => {:confirm => "You Sure?"},
                                          class: "btn btn-primary"
 - else
   .col-md-8
      %span=link_to "Create order", new_order_path , class: "btn btn-primary"
  .col-md-4.total-price-div
  %h4 Order coast: #{get_order_coast}

- 控制台告诉我在 datepicker 上选择日期的时间

控制台：

【问题讨论】：

标签： jquery ajax ruby-on-rails-3 ruby-on-rails-4

【解决方案1】：

添加你的控制器索引

   def index
     @order = params[:date] ? Order.where(date: params[:date]) : Order.get_order_today
    respond_to do |format|
      format.html # render index.html.haml 
      format.js # render for the js request 
    end
  end

然后您将在 AJAX 成功时获得响应，或者您也可以创建 index.js.erb 以获取响应

$("#activity_detail").html('<%= escape_javascript(render :partial => 'orders/order') %>');

【讨论】：

我创建了 index.js.haml - 但它仍然不起作用.. :javascript $("#order").html('= escape_javascript(render :partial => 'orders/order' ) ');
你收到 index.js.haml 的响应了吗

【解决方案2】：

那个版本工作 - order.coffee

$(document).ready ->
  $('#datepicker').datepicker dateFormat: 'yy-mm-dd', onSelect: (dateStr) ->
    $.get("orders", {dateStr})

现在我需要渲染顺序部分：

def index
  @order = params[:date] ? Order.where(date: params[:date]) : Order.get_order_today
  respond_to do |format|
  format.html # render index.html.haml
  format.js
 end
end

index.js.haml：

:javascript
  $("#order").html('= escape_javascript(render :partial => 'orders/order') ');

但是，重新呈现我的订单信息仍然没有发生任何事情。

【讨论】：

【解决方案3】：

我弄清楚如何使用参数获取 ajax 并重新渲染视图。终于 =)

我的咖啡：

$(document).ready ->
  $('#datepicker').datepicker( dateFormat: 'yy-mm-dd', onSelect: (dateStr) ->
    $.ajax(
     url: "orders",
     data: {date: dateStr},
     cache: false,
     dataType: "html",
     success: (response) ->
       $('#order-block').html(response)
    )
   )

index.js.haml

:javascript
  $("#order").html("#{escape_javascript(render :partial => 'orders/order', locals: { orders: @order } )}");

order_controller：

def index
if (!params[:date].nil?)
  @order = Order.find_by(date: params[:date])
else
  @order = Order.get_order_today
end
respond_to do |format|
  format.html # render index.html.haml
  format.js   # default render - index.js.haml
 end
end

我重新整理了一下自己的观点：

 #order-block
  = render 'orders/order'

【讨论】：