使用动态展开文本框创建表单
问题描述:
我是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表单 是在做。
并建议/指导?谢谢!
答
你会想要分开你的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)
)
当我尝试这样做时,类似乎没有正确加载 - 我得到的行为没有展开文本框。这可能是因为我不太了解$('。expand')。autoGrow();部分。我是否仅仅使用该行中的文件创建文件,或者将该行添加到呈现可展开文本框的JavaScript文件中? – ineedahero
我正在假设'.autoGrow()'是一个调用DOM对象来调整它的大小的函数。考虑到这一点,它可以放在'app/assets/javascripts'中的自己的.js文件中。我忘了立即调用它,所以我编辑了我原来的回应。如果它仍然不起作用,我将不得不在家里做一个项目,以便在大约2个小时内尝试。 –
嗯。那么我从这里的第一个答案复制Javascript。 http://*.com/questions/9784547/jquery-textarea-auto-grow-plugin-cross-browser-compatible因此,我只是创建了一个名为'jquery.autogrow.js'的文件,并将其放入我的应用程序/集合/ javascripts目录和它的工作,虽然我还不得不包括一个“JavaScript链接标记”来链接它。 – ineedahero