【问题标题】:Rails 3 Trigger AJAX Submit On Radio Button Change is rendering html responseRails 3 Trigger AJAX Submit On Radio Button Change正在呈现html响应
【发布时间】:2013-01-07 22:15:53
【问题描述】:

rails 3 形成部分

<%= form_for(answer, :remote => true) do |f| %>
  <% if answer.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(answer.errors.count, "error") %> prohibited this answer from being saved:</h2>
      <ul>
        <% answer.errors.full_messages.each do |msg| %>
            <li><%= msg %></li>
        <% end %>
      </ul>
    </div>
  <% end %>
  <div class="field">
    <%= f.hidden_field :conduct_evaluation_id, :value => conduct_evaluation.id %>
  </div>
  <div class="field">
      <%= f.hidden_field :question_id, :value => question.id %>
  </div>
  <div class="field">
    <%= f.hidden_field :program_block_id, :value => conduct_evaluation.program_block_id %>
  </div>
  <div class="field">
    <%= f.radio_button :answer, true, :onchange => "$(this.form).trigger('submit.rails');" %>yes<br/>
    <%= f.radio_button :answer, false, :onchange => "$(this.form).trigger('submit.rails');" %>no<br/>
  </div>
  <div class="actions">
    <%= f.submit "Answer" %>
  </div>
<% end %>

控制器操作

  # POST /answers
  # POST /answers.json
  def create
    @answer = Answer.new(params[:answer])
    @answer.user = current_user
    @answer.conduct_evaluation = ConductEvaluation.find(params[:answer][:conduct_evaluation_id])

    respond_to do |format|
      if @answer.save
        format.js { }
        format.html { redirect_to @answer, notice: 'Answer was successfully created.' }
        format.json { render json: @answer, status: :created, location: @answer }
      else
        format.js { }
        format.html { render action: "new" }
        format.json { render json: @answer.errors, status: :unprocessable_entity }
      end
    end
  end

  # PUT /answers/1
  # PUT /answers/1.json
  def update
    @answer = Answer.find(params[:id])

    respond_to do |format|
      if @answer.update_attributes(params[:answer])
        format.js { }
        format.html { redirect_to @answer, notice: 'Answer was successfully updated.' }
        format.json { head :no_content }
      else
        format.js { }
        format.html { render action: "edit" }
        format.json { render json: @answer.errors, status: :unprocessable_entity }
      end
    end
  end

谁能告诉我我做错了什么让 javascript 通过 ajax 提交?当我使用提交按钮时,请求是通过 ajax 发送的。如果我对单选按钮使用 onchange 事件并尝试通过 javascript 提交表单,它会认为请求是 HTML。

任何帮助将不胜感激!

-J

编辑: 所以当我使用表单提交按钮时,请求略有不同:

Processing by AnswersController#create as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"IcJkV1GnIOEGRs7kaRuVQsp0sTNtHQw0Q+HMM7m/mV0=", "answer"=>{"conduct_evaluation_id"=>"15", "question_id"=>"1", "program_block_id"=>"1", "answer"=>"true"}, "commit"=>"Answer"}

相对于使用 onchange javascript 来触发 rails.submit 事件:

Processing by AnswersController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"IcJkV1GnIOEGRs7kaRuVQsp0sTNtHQw0Q+HMM7m/mV0=", "answer"=>{"conduct_evaluation_id"=>"15", "question_id"=>"1", "program_block_id"=>"1", "answer"=>"true"}}

有谁知道为什么会发生这种情况?触发 submit.rails 事件时是否需要指定额外的参数?请帮忙! :-D

编辑 2: 所以我找到了一个解决方法。如果我将单选按钮的更改事件绑定到实际单击提交按钮,它会起作用。这不是理想的解决方案,但至少可行。

编辑 3: 我决定使用以下咖啡脚本:

$(document).ready ->
    $('#my_form input:submit').hide()
    $('#my_form input:radio').change ->
        $.ajax
            type: $(this.form).attr('method')
            url: $(this.form).attr('action')
            data: $(this.form).serialize()
            dataType: 'script'

这允许相应的js动作文件作为响应返回并在成功时自动执行。

【问题讨论】:

  • 您问了一个关于 javascript 的问题,但您没有向我们展示您的 javascript 代码...
  • javascript 在单选按钮的 :onchange 参数中......
  • 哦,我的错。 submit.rails 是什么? this.form.submit() 怎么了?
  • 查看投票最高的答案 here 以获得 submit.rails 的良好演示。

标签: javascript ruby-on-rails ajax forms


【解决方案1】:

使用onchange() 绕过Rails 魔法,因此它不会按照您的意愿提交表单。编写自己的更改方法,f.e.:

$('input.radio_button_selector').change( function() {
    $.ajax({
        url: $('#my_form').attr('action'),
        data: $('#my_form').serialize()
    });
});

【讨论】:

  • 我解决了这个问题:$('#my_form input:radio').change -&gt; $.ajax type: $(this.form).attr('method') url: $(this.form).attr('action') data: $(this.form).serialize() dataType: 'script' 请注意,这是在咖啡脚本中,但它正确地呈现了我为我正在调用的操作而拥有的相应 JS 文件。感谢迈克的信息!
猜你喜欢
  • 2017-01-17
  • 2018-10-31
  • 2011-01-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-08-02
  • 2011-05-19
相关资源
最近更新 更多