如何从 Javascript 事件更新 ruby 变量？答案

【问题标题】：How to update ruby variable from Javascript event?如何从 Javascript 事件更新 ruby 变量？
【发布时间】：2015-12-21 02:53:12
【问题描述】：

我正在开发一个单页 Rails 应用程序，该应用程序集成了大量的 Google 地图，并且在 Rails 和 Javascript 之间的数据流方面遇到了问题。

我的数据库有一个城市表。用户点击一个城市的谷歌地图标记。然后，我想弹出一个叠加层，根据点击的城市进行活动记录查询并显示有关城市的信息。

目前，当用户点击城市并创建 Javascript 事件时，我正在触发 AJAX 请求：

 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';

  });
});

这会影响我的控制器的更新功能：

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

这会更新@clicked_city 变量，但我的视图不知道，无法进行活动记录查询并显示我想要的信息。很确定我根本不了解这应该如何在 RESTful 应用程序中工作，并希望有一种更简单的方法来做到这一点。

【问题讨论】：

您的更新需要一个 respond_to 块。在你的 format.js 中，你需要重新渲染你想要的部分。

标签： javascript ruby-on-rails google-maps-api-3

【解决方案1】：

您需要渲染显示已更新的实例变量的 html 部分。您可以使用 rails respond_with 方法。

将此添加到控制器类的顶部

respond_to :html, :xml, :json

它会告诉您的应用程序在调用响应者时更新您的 html xml 和 json。

将此添加到更新方法的末尾。

respond_with [@clicked_city]

它应该在调用该方法时更新您的 html。

进一步阅读

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

注意：根据您运行的 Rails 版本，您可能需要将响应程序作为 gem 包含在内。

https://github.com/plataformatec/responders

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

【讨论】：

【解决方案2】：

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

在你的 update.js 中

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

【讨论】：

【解决方案3】：

我最终渲染了一个部分，但我的最终解决方案与此处发布的答案有很大不同，我认为我应该分享它：

我创建了一个名为 _popup.html.erb 的 HTML 部分，接下来我创建了一个新方法 popup（也许我应该使用 update 或 create 代替，但这就是我所做的），它将这个部分呈现给我的 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

我将部分捕获到我的 Ajax 成功函数中，并使用 jquery 将其附加到我想要它去的 html 元素中。

$.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")
         }
      });

【讨论】：