Как мне показать div в моем шаблоне Rails, используя CoffeeScript?

Question

У меня есть следующий код на моей странице индекса.

<button id= 'form-show' class= 'btn btn-primary form-btn'> Add Transaction</button
<div class='row'>
  <%=render 'form'%>
</div>

И следующий CoffeeScript:

$('#form-show').click ->
  $('#form-section').slideDown()

Кнопка должна показывать частичную форму, которая уже загружена в DOM, но скрыта через:

#form-section{
  display: none;
}

Однако, когда я нажимаю эту кнопку, ничего не происходит. Форма не отображается. Я не знаю, что может быть не так. Это такая простая вещь.

Answer 1

Add Transaction</button

Что-то не хватает... Посмотри еще раз... Закрытие >...

Answer 2

Я создал фрагмент. Я конвертировал CoffeeScript в javascript, так как редактор здесь не поддерживает его. Кажется, все работает.

Поэтому я думаю, что следующие причины могут быть проблемой.

• Отрисованная форма от rails не имеет того же идентификатора, т.е. form-section

• Ваш JavaScript загружается без document на ready функция. Поэтому убедитесь, что ваш код внутри $(document).ready функционировать так:

  $(document).ready(-> $('#form-show').click(-> $("#form-section").slideDown() ) )

• Ваш jquery не определен правильно. Проверьте наличие ошибок консоли. И разместите это здесь.

$('#form-show').click(function(){
  $('#form-section').slideDown()
})

#form-section{
  display: none;
  background: #de9a44;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<button id='form-show' class= 'btn btn-primary form-btn'> Add Transaction</button
<div class='row'>
  <form id="form-section">
    <h3>Form</h3>
    <input type="text" />
  </form>
</div>