【问题标题】:How to Use Ajax in ruby on rails如何在 ruby​​ on rails 中使用 Ajax
【发布时间】:2016-10-21 14:28:36
【问题描述】:

我想通过 ajax 将选定的下拉菜单值发送到 控制器

panel_controller.rb

class PanelController < ApplicationController

      def insert
         @city_ids = params[:city]
      end
end

panel.js.erb

$(document).ready(function() {
    $('#f_city_id').change(function() {
        var city_js_id = this.value
        $.ajax({
            url: '/panel/insert',
            type: 'GET',
            data: {"city": city_js_id},
            success: function (data,status)
            {
                alert(this.url);
            }
        });
        return false;
    });
});

routes.rb

get '/panel/insert' => 'panel#insert'

views/panel/insert.html.erb

<%= @city_ids %>

@city_ids 在 chenge 下拉菜单后不响应值

【问题讨论】:

  • data: {"city": city_js_id} 应该是data: {city: city_js_id}
  • @Emu 我改成 {city: city_js_id} 但不工作

标签: ruby-on-rails ruby ajax ruby-on-rails-3


【解决方案1】:

您需要从您的insert 方法回复。

尝试这样做

class PanelController < ApplicationController
  def insert
    @city_ids = params[:city]
    respond_to do |format|
      format.html { render partial: 'insert.html.erb' }
    end
  end
end

使用新内容_insert.html.erb创建部分文件

<%= @city_ids %>

在您的 panel.js.erb 中尝试捕获响应并在必要时将其附加到您的 DOM 中。您的更新值将显示在页面上。

$(document).ready(function() {
  $('#f_city_id').change(function() {
    var city_js_id = this.value
    $.ajax({
        url: '/panel/insert',
        type: 'GET',
        data: {"city": city_js_id},
        success: function (res){
            $("#somediv").html(res);
            //You will get the partial's content with the new data and you'll only need to append it to your page.
        }
    });
    return false;
  });
});

【讨论】:

  • 我试试这个但不起作用 ==> 错误 {模板丢失}
  • 可以给出完整路径。假设您的部分位于views/panel/_inser.html.erb 内。做render partial: 'panel/insert.html.erb'
  • 看看错误,它一定是给你它没有找到的路径。你将能够修复它。 :)
  • 我想在我的视图中显示而不是部分显示,我修复了路径但有错误
  • 是的。部分将使用来自服务器的更新信息呈现,因此新信息将显示在您的视图中。你得到什么错误?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-07-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多