2016-04-07 7 views
0

Ich verwende SimpleForm, um mein Formular zu erstellen.Rails Einfache Form Array-Texteingabe

Mit einem Modell mit zwei Arrays von Dezimalzahlen, Gewichten [] und Wiederholungen [], habe ich this Tutorial verwendet, um ein Eingabeformular für jede Zahl in diesen Arrays separat zu machen.

Mein Problem ist, ich weiß nicht, wie Sie Felder aus dem Formular mit Javascript hinzufügen/entfernen. Der Autor des Tutorials hat keinen Code geschrieben, "weil es eine eher triviale Aufgabe ist". Wo und wie muss ich Javascript setzen, um diese Aufgaben auszuführen?

Antwort

0

Nun, im Gegensatz zum Hinzufügen von verschachtelten Datensätzen, wo Sie Rails abfragen müssen, um ein new assoziiertes Objekt zu erstellen, ist dies wirklich nur über Javascript verwenden, um eine weitere Eingabe hinzuzufügen. Ich würde wahrscheinlich eine Hilfe benutzen, weil es Ihre Ansicht sauberer macht. Also müssen Sie einen Helfer erstellen, der Ihr Eingabefeld konstruiert, diesen Helfer in Ihrer Ansicht aufruft, ein paar Zeilen Javascript verwenden, um die Daten vom Helfer auf die Seite zu bringen, wo Sie sie haben wollen.

Der Helfer

module ApplicationHelper 
    def link_to_add_weights(name) 
    link_to name, '#', class: "add_weight_fields", :"data-field" => "<input class='text optional' type='text' name='yourmodelname[weights][]' id='yourmodelname_'>" 
    end 
end 

so das, was tut, ist ein einziges Argument, dass der Name, den Sie in den Link wollen und setzt das Eingabefeld als Datenattribut auf den Link erzeugt werden soll.

Die Javascript

$(document).ready(function(){ 
    $(".add_weight_fields").click(function(){ 
    $("#weights").append($(this).data("field")); 
    }); 
}); 

Der Helfer eine Verbindung mit der Klasse von .add_weight_fields erzeugt, so dass Sie Ihr Javascript auslösen soll, wenn dieser Link angeklickt wird. Sobald dies passiert, möchten Sie einfach die Daten aus dem Datenfeldattribut anhängen, in diesem Beispiel verwende ich die CSS-IDD der Gewichte.

Der Blick

<%= simple_form_for(@yourmodelname) do |f| %> 
    <%= f.input :repetitions, as: :array %> 
    <div id="weights"> 
    <%= f.input :weights, as: :array %> 
    <%= link_to_add_weights "Add New Weight" %> 
    </div> 
    <div class="actions"> 
    <%= f.submit %> 
    </div> 
<% end %> 

Dann würden Sie die gleichen Vordergrund Wiederholungen tun. Erstellen Sie einen neuen Helper, erstellen Sie eine neue js-Methode (oder Sie können es DRY und verwenden Sie die gleiche Methode für beide mit einer kleinen Bedingung), und fügen Sie einige identifizierende CSS zur Ansicht für die js zusammen mit einem anderen Link zu finden.