Question

我有这种令人难以置信的简单形式：

<%= form_tag("/portal/search", method: 'get', remote: true ) do %>

  <%= label_tag(:query, 'Search for:') %>
  <%= text_field_tag(:query) %>
  <%= submit_tag("Find") %>

<% end %>
<div id="results"></div>

我从文档中了解到，我可以通过远程选项使用AJAX：

<%= form_tag("/portal/search", method: 'get', remote: true ) do %>

然后我卡住了。我知道如何在视图/部分中生成结果，但是如何在div元素中获得该部分？我知道一些JQuery，所以我可以选择元素。我发现了很多结果，但他们似乎错过了我的灯泡时刻。我正在使用Rails 4.1.6

我的结果只是来自模型的简单记录，例如Book（标题，作者）

感谢您的帮助！

修改

我因为远射而错过了杯赛，赢得了比赛。我必须在视图文件夹中添加search.js.erb而不是资源。

Answer 1

假设您从搜索方法中获得@results。

在控制器中，搜索方法：

respond_to do |format|
  format.html {render or redirect_to wherever you need it}
  format.js 
end

然后您需要的是一个名为search.js.erb的文件，以便在请求结束时运行所需的js。它可能看起来像：

$('#results_div').html("<%= j @results.pluck(:title).join('<br/>') %>")

Answer 2

当您添加remote：true jquery-ujs将为您提供ajax请求（默认情况下，app / assets / javascripts / application.js中需要此javascript lib。）

ajax调用将请求'text / javascript'响应。因此，您的服务器代码应回复：

# action
def search_query
  respond_to do |format|
    format.js { 
      # additional code
    }
  end
end

如果您在视图中（search_query.js.erb）提供了javascript，则会执行该操作。这就是为什么每个人都用$('#my_div_id').html('my html text')建议回复你，在执行时会用新的HTML替换你的div内容。

如果由于某种原因你想要返回一个json数据结构，那么你应该提供一个不同的数据类型：

form_tag("/jquery_ujs/search_query", remote: true, 'data-type' => :json) do
  # ....
end

你应该回复：

# action
def search_query
  respond_to do |format|
    format.json { render json:  @my_object }
  end
end

处理成功事件：

<script>
  $(document).ready(function(){
    $("form#my_form").on('ajax:success', function(event, data, status, xhr) {
      console.log("Great!");

      // use data to access to your json data structure
    });

    $("form#my_form").on('ajax:error', function(event, xhr, status, error) {
      console.log("sorry mate!");
    });

    // ....
  })
</script>

您还可以:'data-type' => :html和format.html { render layout: false }

请求html回复（例如，如果您想要返回一个表格）

Answer 3

<强>的Ajax

首先，Rails UJS (unobtrusive javascript)驱动程序只是为您提供了一种“罐装”方式来向您的浏览器发送ajax请求。为避免混淆，最好不要理解您将发送Ajax请求，无论您使用的是Rails UJS还是标准的Ajax方法

这意味着从Ajax捕获response的过程仍然相同 - 您需要确保必须从系统中捕获响应

要么： -

#app/assets/javascripts/application.js
$(document).on("ajax:success", ".element", function(status, data, xhr) {
   // do something here
});

或

#app/controllers/portal_controller.rb
class PortalController < ApplicationController 
  def search
     respond_to do |format|
        format.js #-> app/views/portal/search.js.erb
        format.html
     end
  end
end

#app/views/portal/search.js.erb
//something here

<强>修正

如何在div元素中获得部分

你将能够使用JS：

#app/controllers/portal_controller.rb
class PortalController < ApplicationController
   def search
      @results = ...
      respond_to do |format|
         format.js
         format.html
      end
   end
end

#app/views/portal/search.js.erb
$(".div").html("<%=j render @results %>");

Rails form_tag远程示例

3 个答案: