Question

我是一个遇到特殊问题的中级Rails开发人员。我试图执行一个控制器方法，使用jquery ajax在模型的列中搜索不同的属性，例如大小和颜色，并遇到此堆栈错误。它只在我在方法中声明一个数组并且我不知道如何解决它时才这样做。控制台多次显示。请注意，我在不同于路线的视图中渲染了我的局部和ajax，我这样做，因此在文件夹中导航更容易

  Rendered arts/colors.js.erb (496.7ms)
  Rendered arts/colors.js.erb (497.4ms)
  Rendered arts/colors.js.erb (498.2ms)
  Rendered arts/colors.js.erb (499.1ms)
  Rendered arts/colors.js.erb (501.6ms)
  Completed 500 Internal Server Error in 543ms (ActiveRecord: 2.4ms)

的Ajax

$(document).ready(function(){

    $(".item").change(function(){
      var gender = $(".gender").val();
      var shirt_size = $(".item").val();
    //  var color = $("#colors").val();

      $.ajax({
        url: "/variants/display_colors",
        type: "GET",
        dataType: "js",
        data: {shirt_size, gender},

      });


    /*  $.ajax({
        url: "/variants/display_price",
        type: "GET",

        data: {shirt_size, color, gender},

      });*/
    });
  });

我的方法

def display_colors
  respond_to do |format|
    @colors = Variant.color_search(params).distinct.pluck(:color_code).first
    format.js{render template: "/arts/colors.js.erb"}
  end
end

模型

def self.color_search(search={})
  where("shirt_size = ? AND gender = ?", "#{search[:shirt_size]}", "#{search[:gender]}")
end

路线

Rails.application.routes.draw do
  match '/variants/display_colors' => "variants#display_colors", :via => :get
end

我的观点

<div class="container">
  <div class="design-image" style="margin: auto">
    <%= image_tag @design.image.url %>
  </div>
  <hr>
  <div>

    <h2 style="text-align: center">
      <%= @design.name %>
    </h2>
    <script>
      $(document).ready(function() {

        $(".item").change(function() {
          var gender = $(".gender").val();
          var shirt_size = $(".item").val();
          var color_code = $("#color").val();

          /* $.ajax({
            url: "/variants/display_colors",
            type: "GET",
            dataType: "js",
            data: {shirt_size, gender},

          });*/


          $.ajax({
            url: "/variants/display_price",
            type: "GET",

            data: {
              shirt_size,
              color_code,
              gender
            },

          });
        });
      });
    </script>
    <div>
      <div class="product-options" style="color: white;">
        <%= form_for @order_item, remote: true do |f| %>
          <%= f.select :gender, ["Male", "Female"], {}, {class: "gender"} %>
            <%= f.select :shirt_size,
              @sizes,
              {},
              {class: "item"}
          %>
              <div class="price" style="color: white">

              </div>
              Quantity:
              <%= f.number_field :quantity, min: 1, max: 100, style: "max-width: 150px;" %>
                <div class="color_codes" style=" padding: 10px; ">
                  <% @color_codes.each do |t| %>
                    <div style="border: 3px solid white; margin: 2px; display: inline-block; background-color: <%= t %>; width: 50px; border-radius: 10px;">
                      <%= f.radio_button :color_code, t, class: "item", id: "color"%>
                    </div>
                    <% end %>

                </div>
                <%= f.hidden_field :art_url, value: @design.image.url %>
                  <%= f.button :submit %>
                    <% end %>
      </div>
    </div>
  </div>
</div>

Answer 1

你可以查看页面上的项目类吗？

我认为有不止一个item类。

尝试添加id属性，然后执行更改事件。

Answer 2

哦，我的！我从没想过要查看实际的javascript。这是我的colors.js.erb！当我渲染局部时，我误将模板。我改变了

$(".product-options").html("<%= escape_javascript(render template: '/arts/colors') %>");

要

$(".product-options").html("<%= escape_javascript(render partial: '/arts/colors') %>")

现在谁会想到检查一下！

SystemStackError（堆栈级别太深）Ajax

2 个答案: