Rails remote form and select on change not working

Question

I was trying to follow: Rails: submit (via AJAX) when drop-down option clicked

However none of these options appear to work (onsubmit, submit)

This is what I currently have that is refreshing the page:

= simple_form_for task, :remote => true, :format => :js do |f|`
    = f.association :status, :label => false, :include_blank => false, :input_html => {:onchange=>'this.form.submit();' }`

This simply posts the form regularly and causes the page to refresh.

How can I get it to post via ajax so the page won't refresh?

Answer 1

Just change your onchange to this instead:

{:onchange=>'$(this.form).submit();' }

Answer 2

Although rails overrides the default action and submits via AJAX when you add :remote => true, you are forcing the form to post the regular what in your onchange event.

You need to make your own function to submit via AJAX and call that from your onchange, using $.post() $.post() to send the form to the server.

Answer 3

I ended up making a event bind as per Marc's suggestion

= simple_form_for task, :remote => true, :format => :js, :html => {:id => "task_#{task.id}_status"} do |f|
            = f.association :status, :label => false, :include_blank => false, :input_html => {:id => "task_#{task.id}_status_select" }

:javascript
        jQuery(function($) {
          $(document).ready(function() {
            $("#task_#{task.id}_status_select").bind("change", function() {
              $.ajax({
                type: "PUT",
                url: '#{project_story_type_story_task_path(@project, @story_type, @story, task)}',
                data: 'task[status_id]=' + $('#task_#{task.id}_status_select').val(),
                complete: function() {
                  $('#task_#{task.id}_status').prepend("<span id='task_#{task.id}_success' class='label success right'>SAVED</span>");
                  $('#task_#{task.id}_success').delay(500).fadeOut();

                }
              });