Question

在我的Ruby-on-Rails应用程序中，用户可以填写他们的邮政编码和门牌号码。当他们点击提交时，其他两个字段将填充正确的街道名称和城市名称。

我希望当我点击提交按钮时，Ajax会从我的数据库中检索正确的街道名称和城市，并将其填入正确的字段，这样它只会刷新页面的这一部分，而不是整个网页。

<%= form_tag(zipcodes_path, :method => 'get', action: "/", :id => "zipcodes_search", remote: false) do %>
<%= text_field_tag 'zipcode', params[:zipcode], placeholder: "Postcode", data: {zipcode: true}, :class => "must_be_filled"%>
<%= text_field_tag 'house_number', params[:house_number], placeholder: "Huisnummer", :class => "must_be_filled" %>
<%= submit_tag "Search", :name => nil, :id => "submit_button" %>

<div id="zipcode_results">
  <%= text_field_tag 'street_name', @street_name, :id => "street_name", placeholder: "Straatnaam", readonly: true %>
  <%= text_field_tag 'city', @city, :id => "city", placeholder: "Woonplaats", readonly: true %> 
</div>

如果需要，我可以使用gon检索街道名称和城市。

我想我需要使用.load（）函数，但我刚开始使用ajax，所以我有点迷失。

如果您需要更多代码或希望了解其他任何内容，请与我们联系。

Answer 1

在ajax成功函数中使用它

$('#divid').html(result);

它将刷新ajax成功时提到的div刷新

Answer 2

试试这个，在表单视图文件中：

<%= form_tag(zipcodes_path, :method => 'get', :action => '/zipcodes/search', :remote => true) do %>
<%= text_field_tag 'zipcode', params[:zipcode], placeholder: "Postcode", data: {zipcode: true}, :class => "must_be_filled"%>
<%= text_field_tag 'house_number', params[:house_number], placeholder: "Huisnummer", :class => "must_be_filled" %>
<%= submit_tag "Search", :name => nil, :id => "submit_button" %>

<div id="zipcode_results">
<%= text_field_tag 'street_name', @street_name, :id => "street_name", placeholder: "Straatnaam", readonly: true %>
<%= text_field_tag 'city', @city, :id => "city", placeholder: "Woonplaats", readonly: true %> 
</div>

请注意，操作已更改，并且：remote =＆gt;真正。检查您的assets / javascripts / application.js文件。应该有字符串：

//= require jquery
//= require jquery_ujs

我认为zipcodes是资源，所以检查你的config / routes.rb文件：

resources :zipcodes do
  collection do
    get :search
  end
end

app / controllers / zipcodes_controller.rb中的

添加操作：

def search
  # something magical to find a street name and a city by zipcode and put it into @address var
  # for example: @address = { :street_name => 'Lake Shore Dr', :city => 'Chicago' }
  respond_to :js
end

创建一个文件app / views / zipcodes / search.js.erb并将其放在下一个js-code：

$('#street_name').val('<%= @address[:street_name] %>');
$('#city').val('<%= @address[:city] %>');

希望它有所帮助。

搜索后刷新部分网页

2 个答案: