Создание формы с динамически расширяющимися текстовыми полями

Я полный noobie для Rails, HTML, CSS и Javascript.Создание формы с динамически расширяющимися текстовыми полями

Я создаю форму, и у меня есть два требования:

1) Я хочу, чтобы текстовые поля, которые расширяются, поскольку текст расширяется в них (см: http://jsfiddle.net/gLhCk/5/)

2.) Я хочу, чтобы тот текст чтобы быть частью формы, которая обновляет объекты в базе данных при представлении.

У меня оба эти произведения работают отдельно - я могу создать текстовое поле, которое будет расширяться, но не устанавливает значения в базе данных, и я могу создать форму, которая обновляет базу данных, но не имеет текста которые автоматически расширяются.

Сложность заключается в объединении этих двух вещей - включение этого текстового окна в мою форму, которая обновляет базу данных.

Это моя форма, которая обновляет базу данных (со статическими текстовыми полями):

<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 form обновить значения в моей базе данных, как, например, указанная выше форма .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, чтобы изменить его при вызове. Имея это в виду, его можно поместить в свой собственный .js-файл в 'app/assets/javascripts'. Я забыл сделать это немедленно, поэтому я отредактировал свой оригинальный ответ для этой цели. Если он все еще не работает, мне придется сделать проект дома, чтобы попробовать, который будет через 2 часа. –

Хм. Ну, я скопировал Javascript из первого ответа здесь. http://stackoverflow.com/questions/9784547/jquery-textarea-auto-grow-plugin-cross-browser-compatible Итак, я только что создал файл с именем jquery.autogrow.js и поместил его в мое приложение/assests/javascripts, и это сработало, хотя мне также пришлось включить «тег javascript link», чтобы связать его. – ineedahero

Создание формы с динамически расширяющимися текстовыми полями

ответ

Смежные вопросы