使用動態展開文本框創建表單

我是Rails，HTML，CSS和Javascript的完全noobie。使用動態展開文本框創建表單

我創建一個形式，我有兩個要求：

1）我想是擴大文本框的文本（請參閱擴展：http://jsfiddle.net/gLhCk/5/）

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。

你會想要分開你的Javascript和你的html.erb。您可以將此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個小時內嘗試。 –

嗯。那麼我從這裏的第一個答案複製Javascript。 http://stackoverflow.com/questions/9784547/jquery-textarea-auto-grow-plugin-cross-browser-compatible因此，我只是創建了一個名爲'jquery.autogrow.js'的文件，並將其放入我的應用程序/集合/ javascripts目錄和它的工作，雖然我還不得不包括一個「JavaScript鏈接標記」來鏈接它。 – ineedahero

使用動態展開文本框創建表單

回答

相關問題