Erstellen eines Formulars mit dynamisch expandierenden Textfeldern

Ich bin ein komplettes noobie zu Rails, HTML, CSS und Javascript.Erstellen eines Formulars mit dynamisch expandierenden Textfeldern

Ich erstelle eine Form und ich habe zwei Anforderungen:

1) Ich möchte Textfelder, die erweitern, wie der Text in ihnen erweitert (siehe: http://jsfiddle.net/gLhCk/5/)

2.) Ich möchte diejenigen, Text Felder, die Teil eines Formulars sein sollen, das Objekte in einer Datenbank bei der Übergabe aktualisiert.

Ich habe beide Teile separat arbeiten lassen - ich kann ein Textfeld erstellen, das erweitert, aber keine Werte in einer Datenbank setzt, und ich kann ein Formular erstellen, das eine Datenbank aktualisiert, aber keinen Text hat Felder, die automatisch erweitert werden.

Die Schwierigkeit besteht darin, diese beiden Dinge zu kombinieren - das Javascript-Textfeld in mein Formular einzufügen, das die Datenbank aktualisiert.

Dies ist meine Form, die die Datenbank (mit statischen Textfeldern) aktualisiert:

<div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 

    <%= form_for(@user) do |f| %> 

    <div class="row"> 
     <h3> Background </h3> 

     <div class="row"> 
     <%= f.label :hobbs, 'Hobbies' %> 
     <%= f.text_field :hobbies, class: 'fcdzfform-control' %> 
     </div> 
    </div> 
    </div> 
</div>

Und das ist der Javascript-Code, der für eine Auto-Erweiterung Textbox funktioniert:

<body> 
    <textarea id="txtInput"></textarea> 
<script src="jquery.autogrow-textarea" type="text/javascript"></script> 

<script> 
    $(#txtInput).autoGrow(); 
</script>

Wie ich sagte, ich bin ein kompletter Anfänger zu all dem Zeug, aber der Eindruck, den ich vom Surfen im Internet bekommen habe ist, dass ich das .erb-Formular insgesamt und make a pure Javascript form aufgeben muss, aber ich sehe immer noch nicht, wie man das Javascript hat form aktualisieren Sie die Werte in meiner Datenbank, wie das obige .erb-Formular macht.

Und Beratung/Anleitung? Vielen Dank!

Quelle

2016-08-16 ineedahero

Siehe: Unobtrusive Javascript.

Sie möchten Ihr Javascript von Ihrer html.erb trennen. Sie können dieses Javascript in eine relevante Datei in Ihrem Ordner app/assets/javascripts hinzufügen. So zum Beispiel:

# app/assets/javascripts/sitewide/field-expand.js 
(function(){ 
    $('.expand').autoGrow(); 
}()); 

# app/views/product/_form.html.erb 
<div class="row"> 
    <div class="col-md-6 col-md-offset-3"> 

    <%= form_for(@user) do |f| %> 

    <div class="row"> 
     <h3> Background </h3> 

     <div class="row"> 
     <%= f.label :hobbs, 'Hobbies' %> 
     <%= f.text_field :hobbies, class: 'fcdzfform-control expand' %> 
     </div> 
    </div> 
    </div> 
</div>

Ich bin nicht in der Lage, die oben in dem Moment zu testen so, natürlich, es ist nicht getestet. (Stellen Sie außerdem sicher, dass Ihre jQuery-Selektoren in Anführungszeichen eingeschlossen sind, z. B. $('#txtInput') statt $(#txtInput))

Quelle

2016-08-16 14:15:01

Wenn ich das versuche, scheint die Klasse nicht richtig geladen werden - ich bekomme das gleiche Verhalten ohne die erweiterbar Textfeld. Es kann sein, weil ich das $ ('. Expand') nicht wirklich verstehe. AutoGrow(); Teil. Mache ich eine Datei mit genau dieser Zeile, oder füge ich diese Zeile meiner JavaScript-Datei hinzu, die das erweiterbare Textfeld rendert? – ineedahero

Ich arbeite unter der Annahme, dass '.autoGrow()' ist eine Funktion, die ein DOM-Objekt manipuliert, um die Größe zu ändern, wenn sie aufgerufen wird. In diesem Sinne kann es in seine eigene .js Datei in 'app/assets/javascripts' gestellt werden. Ich habe vergessen, es sofort aufzurufen, also habe ich meine ursprüngliche Antwort für diesen Zweck bearbeitet. Wenn es immer noch nicht funktioniert, muss ich ein Projekt zu Hause machen, um es zu versuchen, das in ungefähr 2 Stunden sein wird. –

Hmm. Nun, ich habe das Javascript von der ersten Antwort hier kopiert. http://stackoverflow.com/questions/9784547/jquery-textarea-auto-grow-plugin-cross-browser-compatible Also habe ich gerade eine Datei namens 'jquery.autogrow.js' erstellt und diese in meine App/assests/Javascripts Verzeichnis und es funktionierte, obwohl ich auch ein "Javascript Link-Tag" enthalten musste, um es zu verknüpfen. – ineedahero

Erstellen eines Formulars mit dynamisch expandierenden Textfeldern

Antwort

Verwandte Themen