Refresh part of webpage after a search

Question

In my Ruby-on-Rails application, a user can fill in their zipcode and house number. When they click submit, the two other fields will be filled with the correct street name and city name.

I want that when I click the submit button, Ajax retrieves the correct streetname and city from my database and fills it in the correct fields so it will only refresh this part of the page, not the entire web page.

<%= 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>

I can retrieve the streetname and city using gon if it is needed.

I think I need to use the .load() function, but I just started using ajax so I am a bit lost.

Let me know if you need more code or wish to know anything else.

What are you using for AJAX? so that I can give you solution accordingly. Which library? — Jinal Shah, Feb 11 '14 at 13:47
You can refer to this post http://stackoverflow.com/questions/1960240/jquery-ajax-submit-form I can help you if you have specific question. You can use http://jsfiddle.net/ to show your code and even test your code. — Jinal Shah, Feb 11 '14 at 13:58

score 0 · Answer 1 · answered Feb 11 '14 at 14:17

0

Use this in ajax success function

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

It will refresh the mentioned div refresh on ajax success

answered Feb 11 '14 at 14:17

Anil Sharma

2,942
4
27
44

Anton Grigoryev · Answer 2 · 2014-02-11T17:17:59.537

Try this, in the form view file:

<%= 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>

Note that action's been changed and :remote => true. Check your assets/javascripts/application.js file. There should be strings:

//= require jquery
//= require jquery_ujs

I suppose that zipcodes are resources, so check your config/routes.rb file:

resources :zipcodes do
  collection do
    get :search
  end
end

in app/controllers/zipcodes_controller.rb add action:

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

create a file app/views/zipcodes/search.js.erb and put there next js-code:

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

Hope it helps.

Refresh part of webpage after a search

2 Answers2