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?

Bound

Answer 1

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.

Pent

Answer 2

Just change your onchange to this instead:

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

Neruda

This works fantastically without the need to code a manual handler or jump through additional hoops. – Pesthole

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();

                }
              });

Bound

Answer 4

You can use data: remote on the select directly to submit the change to the defined url.

= form_with model: task do |f|
  = f.label :status
  = f.select :status, collection, {}, data: {remote: true, method: 'PUT', url: task_path(task)}

Engineman