Rails 4.2 -链接使用Javascript创建302中的操作

I have a rails app in which I have a dynamic form. One of the fields have a "submit" button of it's own. It looks something like this:

我有一个rails应用，其中有一个动态表单。其中一个字段有自己的“提交”按钮。它看起来是这样的:

----------------
| Normal field |
----------------

-------------------------
| "Value"      | Submit |
-------------------------
List of "Values"

----------------
| Normal field |
----------------
----------------
| Submit       |
----------------

Users should be able to add "Values" either by hitting the fields submit button or the general submit button for the form, displaying a flash message if it's successful or if there was some error.

用户应该可以通过点击字段submit按钮或表单的general submit按钮来添加“值”，如果表单成功，或者出现错误，则显示一个flash消息。

The "Value" object in the example above is in my app called valid_domain.

上面示例中的“Value”对象位于我的应用程序valid_domain中。

I've got it to create the objects, but I keep getting Completed 302 Found in 8ms (ActiveRecord: 2.0ms) from the server when clicking the field's submit button.

我已经获得了创建对象的功能，但是当单击字段的submit按钮时，我仍然可以从服务器获取8ms (ActiveRecord: 2.0ms)中的302。

The relevant parts of my form looks like this:

我表格的相关部分如下:

/ My domain field 
= f.text_field :domain, placeholder: "yourdomain.com", :class => "form-control"
  %span.input-group-btn
    %button.btn.btn-default
      = link_to "Add domain", "#", class: "add-domain"

/ List of domains
- if @team.valid_domains.any?
  %ul.list-unstyled#domain-list
    - @team.valid_domains.each do |domain_model|
      = render "valid_domains/domain", domain_model: domain_model

When users clicks my Add domain button I handle it with javascript (coffee script) that looks like this:

当用户单击我的Add domain按钮时，我使用javascript(咖啡脚本)处理它，如下所示:

jQuery ->

  $(".add-domain").on "click", (event) ->
    event.preventDefault() # don't trigger default

    domain_name = $("#team_valid_domain_domain").val()
    team_id = $("#team_id_field").val()

    $.post "/teams/#{team_id}/valid_domains", domain: domain_name, team_id: team_id, (data) ->

My valid_domains create action looks like this:

我的valid_domains创建操作如下:

def create
  team = Team.find_by_id(params[:team_id])
  if params[:valid_domain].present?
    @valid_domain = team.valid_domains.create(params[:valid_domain].permit(:team_id, :domain))
  else
    @valid_domain = team.valid_domains.create(params.permit(:domain, :team_id))
  end

  respond_to do |format|
    if @valid_domain.save
      format.html { redirect_to edit_team_path(team), notice: 'Domain added' }
      format.json { respond_with_bip(@valid_domain) }
      format.js   { render action: 'create', status: :created, location: @valid_domain }
    else
      format.html { redirect_to edit_team_path(team), alert: "Couldn't create domain" }
      format.json { respond_with_bip(@valid_domain) }
    end
  end
end

As noted, clicking the Add domain button creates the object but the server returns 302.

如前所述，单击Add domain按钮将创建对象，但服务器返回302。

Any ideas on how I can solve that?

有什么办法解决这个问题吗?

In the best I would also like to update my #domain-list ul dynamically with Ajax/Javascript when the create action is successful, but I can't get it to works. Think it's because my 302 error code. I have created a create.js.erb file that looks like this:

在最好的情况下，当创建操作成功时，我还想用Ajax/Javascript动态地更新我的# domainlist ul，但我无法让它生效。因为我的302错误码。我已经创建了一个create.js。erb文件是这样的:

$('#domain-list').append("<%= j render partial: 'valid_domains/domain', locals:   {domain_model: @valid_domain } %>").children(':first').hide().slideDown('fast');
$("#flash").html("<%= j render partial: 'shared/flash' %>").slideDown('fast');

$(".close").click(function(){
  $(".alert").slideUp('fast');
});

Any ideas on how I can get it to work would be appreciated. General code improvement comments would also be welcomed.

任何关于我如何让它工作的想法都将受到感激。通用代码改进意见也会受到欢迎。

1 个解决方案

#1

The issue seems to be that your AJAX request is being processed as HTML instead of JS (take a look at your log file to confirm, check for lines like Processing by YourController#create as HTML).

问题似乎是，您的AJAX请求是作为HTML而不是JS处理的(查看日志文件以确认，检查诸如由您的controller #create作为HTML处理之类的行)。

The solution would be to update you CoffeScript as follows:

解决方案是更新您的CoffeScript，如下:

add_domain_handler = (data) ->
  # whatever you want to do
  return

jQuery ->

  $(".add-domain").on "click", (event) ->
    event.preventDefault() # don't trigger default

    domain_name = $("#team_valid_domain_domain").val()
    team_id = $("#team_id_field").val()

    $.post "/teams/#{team_id}/valid_domains", domain: domain_name, team_id: team_id, add_domain_handler, 'script'

This will tell jQuery to ask for JS instead of HTML in the Content-Type header, and will make Rails respond with the correct format.

这将告诉jQuery在Content-Type头中请求JS而不是HTML，并使Rails以正确的格式响应。

#1