動的にテキストボックスを展開するフォームを作成する

私は、Rails、HTML、CSS、Javascriptの完全なnoobieです。動的にテキストボックスを展開するフォームを作成する

は、私は、フォームを作成していますし、私は2つの要件があります。

1）テキストは、彼ら（参照に拡大するよう、私は拡張テキストボックスをしたい：http://jsfiddle.net/gLhCk/5/）を

2）私は、これらのテキストをしたいですボックスは、提出時にデータベース内のオブジェクトを更新するフォームの一部になります。

これらの部分は別々に動作しています。テキストボックスを展開することはできますが、データベースに値を設定することはできません。また、データベースを更新してもテキストはありません自動的に展開するボックス

難しいのは、この2つのことを組み合わせることです.Javascriptテキストボックスを自分のフォームに組み込んでデータベースを更新しています。

これは（静的なテキストボックス付き）データベースを更新し、私のフォームです：

<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>

そして、これが自動拡張するテキストボックスのために働くJavascriptコードです：私のよう

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

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

私はこのすべてのことについて完全なnoobieだと言っていましたが、私がオンラインで閲覧して得た印象は、.erbフォームとmake a pure Javascript formを放棄する必要があるということですが、私はまだJavascriptフォームは上記の.erb形式のように私のデータベースの値を更新しますやっている。

アドバイス/指導？ありがとう！

出典

2016-08-16 ineedahero

参照：Unobtrusive Javascript。

あなたはあなたのhtml.erbからあなたのJavascriptを分離したいと思うでしょう。このJavascriptをapp/assets/javascriptsフォルダの関連ファイルに追加することができます。したがって、たとえば：

# 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>

私は現時点で上記のテストはできませんので、もちろん、テストされていません。（また、あなたのjQueryのセレクタは引用符例えば$('#txtInput')はなく$(#txtInput)に包まれていることを確認してください）

出典

2016-08-16 14:15:01

私は、クラスが適切にロードされていないようだということを試みるとき - 私は拡張せずに同じ動作を取得していますテキストボックス。 $（ '。expand'）を実際に理解していないからかもしれません。autoGrow（）;部。その行だけでファイルを作成するのですか、またはその行をjavascriptファイルに追加して展開可能なテキストボックスをレンダリングしますか？ – ineedahero

'.autoGrow（）'はDOMオブジェクトを操作して、呼び出されたときにサイズを変更するという前提のもとで働いています。そのことを念頭に置いて、それは 'app/assets/javascripts'のそれ自身の.jsファイルに入れられます。私はそれを即座に呼び出すことを忘れていたので、私はその目的のために私の元の応答を編集しました。それでも動作しない場合、私は約2時間後にそれを試して自宅でプロジェクトを作らなければならないでしょう。 –

Hmm。さて、最初の答えからJavascriptをコピーしました。 http://stackoverflow.com/questions/9784547/jquery-textarea-auto-grow-plugin-cross-browser-compatibleしたがって、私は 'jquery.autogrow.js'という名前のファイルを作成し、それを私のapp/assests/javascriptsディレクトリとそれが働いたが、私はリンクするために "javascript link tag"も含めなければならなかった。 – ineedahero

動的にテキストボックスを展開するフォームを作成する

答えて

関連する問題