Rails 3 Trigger AJAX Submit On Radio Button Change is rendering html response

Question

rails 3 form partial

<%= 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 %>

controller actions

  # 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

Can anyone tell me what I am doing wrong to make the javascript submit via ajax? When I use the submit button, the request is sent via ajax. If I use the onchange event for the radio button and attempt to submit the form via javascript, it thinks the request is HTML.

Any help would be much appreciated!

-J

EDIT: So when I use the form submit button, the request is slightly different:

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"}

versus using the onchange javascript to trigger a rails.submit event:

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"}}

Does anyone know why this may be occurring? Do I need to specify additional parameters when triggering the submit.rails event? Please help! :-D

EDIT 2: So I found a workaround. It works if I bind the change event for the radio buttons to actually clicking the submit button. This is not the ideal solution, but at least it works.

EDIT 3: I have decided on the following coffeescript:

$(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'

This allows the corresponding js action file to be returned as the response and be automatically executed on success.

you've asked a question about javascript, and you've not shown us your javascript code ... — Mike Campbell
– Mike Campbell, Commented Jan 8, 2013 at 14:26
The javascript is in the :onchange param for the radio button.... — jedi_batman
– jedi_batman, Commented Jan 8, 2013 at 15:23
oh snap, my bad. what is submit.rails? what's wrong with this.form.submit()? — Mike Campbell
– Mike Campbell, Commented Jan 8, 2013 at 16:05
see the highest voted answer here for a good demonstration of submit.rails. — Eddie Prislac
– Eddie Prislac, Commented Apr 4, 2015 at 6:27

Mike Campbell · Accepted Answer · 2013-01-08 16:49:16Z

0

Using onchange() bypasses Rails magic so it won't submit the form as you wish. Write your own change method, f.e.:

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

answered Jan 8, 2013 at 16:49

Mike Campbell

7,9882 gold badges42 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jedi_batman Over a year ago

I settled on this:

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

Note tha this is in coffee script, but it properly renders and corresponding JS files that I have for the action I am calling. Thanks for the info Mike!

Collectives™ on Stack Overflow

Rails 3 Trigger AJAX Submit On Radio Button Change is rendering html response

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related