Con Rails UJS, come inviare un modulo remoto da una funzione

Question

Sto usando Rails UJS. Ho una configurazione modulo per fare un submit remota in questo modo:

<form accept-charset="UTF-8" action="/subscriptions" class="new_subscription form-horizontal" id="new_subscription" data-remote="true" data-type="json" method="POST"> 

Sto cercando di trovare un modo per inviare questo modulo da una funzione JavaScript. Ho provato:

var form$ = $("#new_subscription"); 
form$.get(0).submit(); 

ma il problema con questo è che si invia il modulo w/o il telecomando, posta al server e aggiorna la pagina. Qualche idea del perché? C'è un modo diverso per inviare un modulo remoto?

Grazie

Answer 1

tenta di attivare l'evento submit.rails:

$("#new_subscription").trigger("submit.rails"); 

Answer 2

Prova a fare una richiesta Ajax da soli:

$('#new_suscription').submit(function(){ 
    /*do whatever you want here*/ 
    $.post('/subscriptions',$(this).serialize(),function(){},'script'); 
} 

In questo modo, si fa una richiesta POST con i dati del modulo ed esegui la risposta come una sceneggiatura.

Answer 3

Forse per coloro che utilizzano jquery-ujs (Rails 5.0 di default e sotto), come Mikhail come già risposto, innescando l'evento jQuery personalizzato funzionerà, vale a dire:

$("#new_subscription").trigger("submit.rails"); 

Per coloro che hanno inciampato su questa domanda nel 2017 e sta usando Rails 5.1, la risposta sarà diversa. Rails 5.1 ha perso jquery come dipendenza e pertanto ha sostituito jquery-ujs con un completo riscritto rails-ujs. Vedere: http://weblog.rubyonrails.org/2017/4/27/Rails-5-1-final/

Come tale, si dovrà attivare il corretto CustomEvent object in Rails-UJS:

Come del momento, non c'è pubblicato/modo consigliato di farlo nella documentazione (aka RailsGuides), ma qui ci sono una serie di opzioni che è possibile utilizzare solo guardando il codice sorgente di Rails:

1. Uso Rails.fire funzione:

   nativeFormEl = $("#new_subscription")[0] // you need the native DOM element 
   Rails.fire(nativeFormEl, 'submit') 
   

2. Si potrebbe anche a livello di codice chiamare il gestore Rails.handleRemote (quello che presenta in realtà le forme con data-remote=true via XHR:

   nativeFormEl = $("#new_subscription")[0] // you need the native DOM element 
   Rails.handleRemote.call(nativeFormEl, event); // unfortunately, you cannot reference the previously created submit CustomEvent object by rails-ujs.js 
   // ... or ... 
   Rails.handleRemote.call(nativeFormEl) // submits via XHR successfully, but throws an error after success callback at Rails.stopPropagation 
   

preferisco l'opzione 1, perché è solo un wrapper che utilizza recenti metodi più Web API cioè la creazione di a CustomEvent e lo invia allo EventTarget tramite dispatchEvent.