Mit Rails UJS, wie ein Remote-Formular von einer Funktion übergeben

Question

Ich verwende Rails UJS. Ich habe ein Formular-Setup ein Remote zu tun einreichen etwa so:

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

Ich versuche, einen Weg zu finden, diese Form von einer JavaScript-Funktion zu unterwerfen. Ich habe versucht:

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

aber das Problem dabei ist, dass es die Form w/o der Fernbedienung macht geltend, sie an den Server und aktualisiert die Seite. Irgendeine Idee warum das ist? Gibt es eine andere Möglichkeit, ein Remote-Formular einzureichen?

Dank

Answer 1

Versuchen Sie, die submit.rails Ereignis auszulösen:

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

Answer 2

Versuchen Sie, eine Ajax-Anfrage von selbst zu tun:

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

Auf diese Weise Sie tun, um eine POST-Anfrage mit dem Formulardaten und führen Sie die Antwort als Skript aus.

Answer 3

Vielleicht für diejenigen mit jquery-ujs (Rails 5.0 Standard und unten), als Mikhail wie bereits beantwortet, die Auslösung der benutzerdefinierten Jquery Ereignis funktionieren wird, das heißt:

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

Für diejenigen, die im Jahr 2017 auf diese Frage gestolpert und verwendet Rails 5.1, die Antwort wird anders sein. Schienen 5.1 hat jquery als Abhängigkeit fallen gelassen und hat deshalb jquery-ujs durch eine komplette umgeschriebene rails-ujs ersetzt. Siehe: http://weblog.rubyonrails.org/2017/4/27/Rails-5-1-final/

Als solche werden Sie die richtigen CustomEvent object in Schienen-UJS auszulösen haben:

Ab dem Moment gibt es keine veröffentlichten/empfohlen, wie es in der Dokumentation zu tun (auch bekannt als RailsGuides), aber hier ist eine Reihe von Optionen, die Sie gerade durch einen Blick auf Rails' Quellcode verwenden:

1. verwenden Rails.fire Funktion:

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

2. Sie könnten auch die Rails.handleRemote Handler programmatisch nennen (die, die tatsächlich Formen mit data-remote=true über XHR übermittelt:

   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 
   

Ich ziehe Option 1, da es nur ein Wrapper, der neueren Web-API-Methoden, dh die Erstellung verwendet a CustomEvent und sendet es an die EventTarget über dispatchEvent.