Come posso utilizzare jQuery UJS per inviare un modulo tramite AJAX dopo che l'evento di modifica di una casella di selezione viene attivato in Rails?

Question

Come posso utilizzare jQuery UJS per inviare un modulo dopo che l'evento di modifica di una casella di selezione viene attivato in Rails?

mio punto di vista è simile al seguente:

<% for perm in @permissions %> 
    <%= form_for [@brand,perm], { :remote => true } do |f| %> 
    <tr id="permission_<%= perm.id %>"> 
     <td><%= perm.configurable.name %></td> 
     <td><%= f.select :action, ['none', 'read', 'update', 'manage'] %></td> 
    </tr> 
    <% end %> 
<% end %> 

piuttosto semplice. Il mio controller è in questo modo:

class PermissionsController < ApplicationController 

    before_filter :authenticate_user! 

    respond_to :html, :js 

    load_and_authorize_resource :brand 
    load_and_authorize_resource :permission, :through => :brand 

    def index 
    end 

    def update 
     @permission = Permission.find(params[:id]) 
     @permission.update_attributes(params[:permission]) 
    end 

end 

E nei miei application.js:

// Place your application-specific JavaScript functions and classes here 
// This file is automatically included by javascript_include_tag :defaults 
$(function() { 
    $("#permission_action").change(function() { 
    this.form.submit(); // This needs to be an AJAX call, but how? 
    }); 
}) 

prega di notare che il modulo di presentazione fuochi bene. Ma sta facendo un post normale piuttosto che un invio AJAX. Quando inserisco un pulsante di invio nel modulo e lo utilizzo, l'invio AJAX funziona correttamente. Devo cambiare:

this.form.submit(); 

per una chiamata AJAX, ma non so come. Qualcuno può aiutare?

Answer 1

Vedo che stai già usando jQuery, va bene. Il seguente codice è stato preso da qui: http://railscasts.com/episodes/136-jquery

Si consiglia vivamente di familiarizzare con queste schermate che aiutano una tonnellata (eufemismo).

// public/javascripts/application.js 
jQuery.ajaxSetup({ 
    'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript")} 
}) 

jQuery.fn.submitWithAjax = function() { 
    this.submit(function() { 
    $.post(this.action, $(this).serialize(), null, "script"); 
    return false; 
    }) 
    return this; 
}; 

$(document).ready(function() { 
    $("#new_review").submitWithAjax(); 
}) 

Answer 2

Guardando attraverso le fonti jQuery-UJS, ho pensato che questo potrebbe essere il modo più sicuro:

// in application.js 
jQuery.fn.ajaxSubmit = function() { 
    this.trigger('submit.rails'); 
}; 

solo genera l'evento come sarebbe .submit(), ma in un sapore UJS, quindi chiamereste

$('.my_form').ajaxSubmit();