搜索后刷新部分网页

时间:2014-02-11 13:44:10

标签: jquery ruby-on-rails ajax

在我的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,所以我有点迷失。

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

2 个答案:

答案 0 :(得分:0)

在ajax成功函数中使用它

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

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

答案 1 :(得分:0)

试试这个, 在表单视图文件中:

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

希望它有所帮助。