无法使用rails 3在javascript函数中执行ajax调用答案

【问题标题】：Cannot perform ajax call inside javascript function using rails 3无法使用rails 3在javascript函数中执行ajax调用
【发布时间】：2015-07-03 10:50:34
【问题描述】：

我有一个表单，我想仅使用 JavaScript 函数中的 ajax 调用来调用 rails 控制器方法。但未能做到这一点。请检查我下面的代码。

payment.html.erb：

<script type="text/javascript">
function check_dropdown(){
   $.ajax({
    url: "/payments/check_type",
    type: 'GET'
  });
}
</script>

 <%= form_for :payment,:url => {:action => "check_type" },remote: true do |f| %>
    <div class="totalaligndiv">
      <div class="input-group bmargindiv1 col-md-6 pull-left"><span class="input-group-addon text-left"><div class="leftsidetextwidth">Type :</div></span>
      <%= f.select(:s_catagory,options_for_select([['Wood','Wood'],['Puja Samagree','Puja Samagree'],['Sweeper','Sweeper'],['Photo Grapher','Photo Grapher'],['Burning Assistant','Burning Assistant']],selected: "Type"),{},{:class => 'form-control',:onchange => 'check_dropdown();'}) %>
      </div>
      <div class="input-group bmargindiv1 col-md-6 pull-left"><span class="input-group-addon text-left"><div class="leftsidetextwidth">Select Vendor :</div></span>
      <div id="name-option">
      </div>
      </div>
      <div class="clearfix"></div>
      <div class="tbpaddingdiv1 text-center">
        <button type="submit" class="btn btn-success">Submit</button>
      </div>
    </div>
    <% end %>

application.html.erb：

<!DOCTYPE html>
<html>
<head>
  <title>SwargadwaraPuri</title>
  <script src="/assets/moment-with-locales.js"></script>
  <%= stylesheet_link_tag    "application", :media => "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
  <script src="/assets/bootstrap.min-2.0.js"></script>
   <script src="/assets/bootstrap-datetimepicker.js"></script>
   <link rel="icon" href="/assets/favicon.png" type="image/x-icon" />
  <link rel="stylesheet" href="/assets/bootstrap-2.0.css">
<link rel="stylesheet" href="/assets/plugins-2.0.css">
<link rel="stylesheet" href="/assets/main-2.0.css">
<link rel="stylesheet" href="/assets/themes-2.0.css">
<link rel="stylesheet" href="/assets/bootstrap-datetimepicker.css">
</head>
<body class="login no-animation" >
<%= yield %>
<footer>
<div class="pull-right">
Maintained <i class="fa fa-pencil text-danger"></i> by <strong><a href="http://www.oditeksolutions.com" target="_blank">Oditek Solutions</a></strong>
</div>
<div class="pull-left">
<span id="year-copy"></span> &copy; <strong><a href="javascript:void(0)" target="_blank">Swargadwar, Puri Municipality</a></strong>
</div>
</footer>
</div>
<a href="#" id="to-top"><i class="fa fa-chevron-up"></i></a>
<script type="text/javascript" src="/assets/bootstrap-filestyle.min.js"></script>
<script src="/assets/plugins-2.0.js"></script>
<script src="/assets/main-2.0.js"></script>
</body>
</html>

routes.rb:

 get "payments/check_type" => "payments#check_type"

payments_controller.rb：

class PaymentsController < ApplicationController
    def payment
        @payment=Vendor.new
        respond_to do |format|
            format.html
            format.js
        end
    end
    def check_type
        if params[:payment][:s_catagory]
            @payment=Vendor.find_by_s_catagory(params[:payment][:s_catagory])
            @v_name=Vendor.where(:s_catagory =>params[:payment][:s_catagory] ).pluck(:v_name)
        end
    end
end

我想在onchange 事件触发时调用check_type 方法。

【问题讨论】：

如果您查看生成的 html，可能会更容易找到此问题的原因。
@Kevin：你能帮我解决这个问题吗？
首先我们必须弄清楚问题是什么。如果我无法将服务器端代码转换为 html 输出，那么将一堆服务器端代码转储到问题中也无济于事。

标签： jquery ruby ajax ruby-on-rails-3.2

【解决方案1】：

我想在 onchange 事件触发时调用 check_type 方法。

app/controllers/payments_controller.rb：

class PaymentsController < ApplicationController
  def payment
    @vendor = Vendor.new  
  end

  def check_type
    puts "*****Execution has reached here"  #This will appear in the window where you typed: rails server
    render plain: "Good" #Return something in response to the ajax request
  end

  def create  #Submit the form to here?
  end
end

app/views/payments/payment.html.erb：

<script>

function check_dropdown(){

  $.get("/payments/check_type", function(data_from_server) {
    alert("The server responded with: " + data_from_server);    
  });

}

</script>

<%= form_for(@vendor, url: {action: "create" }, method: "post") do |f| %>

  <%= f.select(
        :s_category,
        options_for_select([
            ['Wood','Wood'],
            ['Puja Samagree','Puja Samagree'],
            ['Sweeper','Sweeper'],
            ['Photographer','Photographer'],
            ['Burning Assistant','Burning Assistant'] ], "Sweeper"),
        {},
        {  
            :class => 'form-control',
            :onchange => 'check_dropdown()'
        }
  )%>

  <%= f.submit %>

<% end %>

生成这个 html：

<!DOCTYPE html>
<html>
<head>
  ...
  ...
  <meta charset="ISO-8859-1">
  <title>Whatever</title>
  <meta name="csrf-param" content="authenticity_token" />
  <meta name="csrf-token" content="hvSXeSTq8PL8F6xOjzPlqWF1VGD9nANbKmjBJM/u6swmoee4F5zpfIMfc3iKP415/IuUJhQ+D0yXVyxfvvu7sg==" />
</head>
<body>

<div>Application Layout</div>

<script>

function check_dropdown(){

  $.get("/payments/check_type", function(response_from_server) {
    alert("The server responded with: " + response_from_server);    
  });

}

</script>

<form class="new_vendor" 
      id="new_vendor" 
      action="/payments/create" 
      accept-charset="UTF-8" 
      method="post">

  <input name="utf8" 
         type="hidden" 
         value="&#x2713;" />
  <input type="hidden" 
         name="authenticity_token" 
         value="ZHPNwGmYHBfR5ay7ikXSMjcoJSfKd4eQP72I6bTfiI/EJr0BWu4Fma7tc42PSbriqtblYSPVi4eCgmWSxcrZ8Q==" />

  <select class="form-control" 
          onchange="check_dropdown()" 
          name="vendor[s_category]" 
          id="vendor_s_category">

    <option value="Wood">Wood</option>
    <option value="Puja Samagree">Puja Samagree</option>
    <option selected="selected" value="Sweeper">Sweeper</option>
    <option value="Photographer">Photographer</option>
    <option value="Burning Assistant">Burning Assistant</option>

  </select>

  <input type="submit" name="commit" value="Create Vendor" />
</form>

</body>
</html>

如果您不想内联 html 中的 javascript onchange，这曾经被认为是不好的做法，您可以这样做：

app/views/payments/payment.html.erb：

<%= form_for(@vendor, url: {action: "create" }, method: "post") do |f| %>

  <%= f.select(
        :s_category,
        options_for_select([
            ['Wood','Wood'],
            ['Puja Samagree','Puja Samagree'],
            ['Sweeper','Sweeper'],
            ['Photographer','Photographer'],
            ['Burning Assistant','Burning Assistant'] ], "Sweeper"),
        {},
        {:class => 'form-control'}
  )%>

  <%= f.submit %>

<% end %>

<script>

function check_dropdown(){

  $.get("/payments/check_type", function(data_from_server) {
    alert("The server responded with: " + data_from_server);    
  });

}

$("#vendor_s_category").on("change", check_dropdown);

</script>

config/routes.rb:

Test1::Application.routes.draw do
  get 'payments/check_type'
  get 'payments/payment'
  post 'payments/create'

end

db/migrate/20150424194916_create_vendors.rb：

class CreateVendors < ActiveRecord::Migration
  def change
    create_table :vendors do |t|
      t.string :s_category
      t.string :location

      t.timestamps null: false
    end
  end

在<select> 中选择与默认选项不同的选项后，您将在服务器窗口中看到类似以下内容：

Started GET "/payments/check_type" for ::1 at 2015-04-24 22:03:45 -0600
Processing by PaymentsController#check_type as */*
*****Execution has reached here
  Rendered text template (0.0ms)
Completed 200 OK in 3ms (Views: 2.2ms | ActiveRecord: 0.0ms)

网页会启动一个alert()显示文字：

服务器回复：好

【讨论】：

@satya，如果你能告诉我为什么这个答案对你不起作用，也许我可以帮忙。您不必多次发布相同的问题。