Rails - 如何在Ajax GET方法请求之后重新呈现部分

时间:2016-05-09 12:09:39

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

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上选择日期

控制台:

enter image description here

3 个答案:

答案 0 :(得分:2)

添加控制器索引

   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') %>');

答案 1 :(得分:0)

该版本有效 - 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') ');

但是,重新渲染我的订单信息时仍然没有发生任何事情。

答案 2 :(得分:0)

我弄清楚如何用params获取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'