How to update ruby variable from Javascript event?

Question

I'm working on a single-page Rails app with heavy Google Maps integration and having trouble with the flow of data between Rails and Javascript.

My database has a cities table. A user clicks on a Google Maps marker of a city. I'd then like to pop an overlay which makes an active records query based on the city that was clicked and displays information about the city.

Currently, I'm firing an AJAX request when a user clicks on city and creates a Javascript event:

 google.maps.event.addListener(marker,'click', function(event) {
   var latitude = event.latLng.lat();
   var longitude = event.latLng.lng();

   $.ajax({
     method: 'PUT',
     url: '/cities',
     data: { latitude: latitude, longitude: longitude },
     dataType: 'json'
   });

   popup.style.display = 'block';

  });
});

Which hits my controller's update function:

def update        
     latitude = params[:latitude]
     longitude = params[:longitude]
     @clicked_city = City.find_by(latitude: latitude, longitude: longitude) 
end

This updates the @clicked_city variable, but my view has no idea and can't make the active records query and show the info I'd like. Pretty sure I'm fundamentally not understanding how this is supposed to work in a RESTful app and hoping there's a much simpler way to do this.

You need a respond_to block on your update. and in your format.js, you need to re-render the partial you want to. — Doctor06, Nov 06 '15 at 23:40

score 0 · Answer 1 · edited May 23 '17 at 12:07

You need to render the html partial that shows the instance variable that has been updated. You can use the rails respond_with method.

Add this to the top of your controller class

respond_to :html, :xml, :json

It will tell your application to update your html xml and json when responders are called.

Add this to the end of your update method.

respond_with [@clicked_city]

It should update your html when that method is called.

Further reading

http://edgeapi.rubyonrails.org/classes/ActionController/Responder.html

http://www.gotealeaf.com/blog/the-detailed-guide-on-how-ajax-works-with-ruby-on-rails

Updating partial view with AJAX

Purpose of model variable in respond_with

Note: Depending what version of Rails you are running you may need to include responders as a gem.

https://github.com/plataformatec/responders

Why is respond_with being removed from rails 4.2 into it's own gem?

score 0 · Answer 2 · answered Nov 06 '15 at 23:44

def update
  latitude = params[:latitude]
  longitude = params[:longitude]
  @clicked_city = City.find_by(latitude: latitude, longitude: longitude)
  respond_to do |format|
    format.js
  end
end

in your update.js

$('#your_id').html('<%= j render 'your_partial' %>');

score 0 · Answer 3 · answered Dec 20 '15 at 18:53

I ended up rendering a partial, but my eventual solution was different enough from the answers posted here that I thought I should share it:

I created an HTML partial called _popup.html.erb, next I created a new method popup (maybe I should have used update or create instead but that's what I did) that renders this partial to my javascript.

def popup
    latitude = params[:latitude].to_f.round(4)
    longitude = params[:longitude].to_f.round(4)
    @clicked_city = City.find_by(latitude: latitude, longitude: longitude)
    respond_to do |format|
      format.js {render :partial => 'popup'}
    end
  end

I captured the partial into my Ajax success function, and use jquery to append it to the html element where I want it to go.

$.ajax({
         method: 'POST',
         url: '/cities/popup',
         data: { latitude: latitude, longitude: longitude },
         dataType: 'html',
         success: function(data){
          popup.style.display = 'block';
          $("#popup").empty();
          $("#popup").append(data);
          $("#darkness").addClass("darkness");
         },
         error: function(response) {
           console.log("error")
         }
      });

How to update ruby variable from Javascript event?

3 Answers3