Question

当我点击在文本字段中输入文本时，我的某个表单自动创建了一个get请求时遇到问题。发送get请求后，我无法输入任何文本。我搜索了很多，没有发现任何类似的问题/问题。有谁知道这里会发生什么？

_new.html.erb

<%= form_for @category do |f| %>
        <%= f.text_field :name %>
    <%= f.submit "Create Category", id: :create_category %>
<% end %>

index.html.erb

<%= render 'layouts/header' %>
<h1>Award Categories</h1>
<div id="categories">
    <% if @categories %>
        <% @categories.each do |c| %>
            <div><h2><%= link_to c.name, category_path(c) %></h2>
      </div>
      </div>
        <% end %>
    <% end %>
</div>

<button class="btn btn-default" id="addCategory" data-url="<%= new_category_path %>">Add new category</button>

<div id="newCategory"></div>

new.js.erb

$("#addCategory").html('<%= j render "categories/new" %>');
$("#new_category").submit(function(event) {
    event.preventDefault();
    var name = $('#category_name').val();
    var params = $(this).serialize();
    if ( name === ""){
        $('#name .help-block').remove();
        $('#name').prepend(`<div class="help-block">Please enter a name.</div>`);
    }else {

        $.ajax({
          type: "POST",
          url: '/categories',
          data: params
        }).done(function(data) {
            var newCategory = new Category(data);
            var categoryHtml = newCategory.formatDisplay();
            $("#newCategory").remove();
            $('#categories').append(categoryHtml);
        });
    };
});

function Category(category) {
    this.name = category.name
    this.url = '/categories/' + category.id
}

Category.prototype.formatDisplay = function() {
    var categoryHtml = `<div><h2><a href="${this.url}">${this.name}</a></h2></div>`
    return categoryHtml;
};

categories.js

$(document).ready(function () {
  $('#addCategory').on('click', function () {
    $.ajax({
      type: "GET",
      url: $(this).data("url")
    }).done(function() {
    });
  });
});

从终端

获取

Started GET "/categories/new" for 127.0.0.1 at 2018-03-12 12:59:13 -0600
Processing by CategoriesController#new as */*
  Rendering categories/new.js.erb
  Rendered categories/_new.html.erb (1.7ms)
  Rendered categories/new.js.erb (8.9ms)
Completed 200 OK in 38ms (Views: 32.2ms | ActiveRecord: 0.0ms)

categories_controller＃新

def new
    @category = Category.new
    respond_to do |format|
      format.js
    end
end

点击索引页面上的“添加新类别”后，问题就出现了。一旦发生这种情况，弹出_new.html.erb表单，我在文本字段内单击，一旦我点击该字段就立即触发get请求，不允许我键入任何文本。有谁知道可能导致这种情况发生的原因是什么？如果还有其他任何有用的代码，请告诉我。提前谢谢！

Answer 1

单击您的按钮将触发同步获取请求。这是链接和按钮的默认行为

<button class="btn btn-default" id="addCategory" data-url="<%= new_category_path %>">Add new category</button>

为避免在get上执行同步click请求，您需要event.preventDefault();

$(document).ready(function () {
  $('#addCategory').on('click', function (event) {
    event.preventDefault();
    $.ajax({
       //... etc

您可能已经忘记了这一点，如果您event.preventDafault()，您将能够找到$.ajax()并创建asyncronous获取请求

您还可以设置断点以在categories.js

中对此进行测试

无法单击进入文本字段

1 个答案: