CODEWITHSUNDEEP
jqueryruby-on-railssasscoffeescript
Jeffrey Wen
Jeffrey Wen

Reputation: 617

Coffeescript is not toggling my div

When I click on my Form Link href, I can see my webpage quickly toggle between show and hide for the name text field.

I would like the name text field to remain shown after I click on the Form Link button.

I have tried changing toggle() to show() and the same thing happens where I cannot get the name text field to remain shown.

# app/views/forms/form.html.erb
<%= link_to 'Form Link', '#', class: 'form-link' %>
<div class="form-group">
  <div class="col-sm-1"><%= form.label :name, class: 'control-label' %></div>
  <div class="col-sm-1"><%= form.text_field :name, class: 'form-control' %></div>
</div>

# app/assets/stylesheets/forms.scss
.form-group {
  display: none;
}

# app/assets/javascripts/forms.coffee
$(document).on 'turbolinks:click', ('.form-link'), ->
  $('.form-group').toggle()

Upvotes: 0

Views: 186

Answers (1)

Alex Santos
Alex Santos

Reputation: 2950

If you want to simply toggle the visibility of a div when a link is clicked, then you should be able to simply listen to clicks on the link and prevent the default behaviour to ensure that turbolinks doesn't reload the page. That should fix the issue you are seeing. As you click the link, your script shows the form, but turbolinks follows the link (which is #, so it just reloads the page).

For example:

$(document).on 'click', '.form-link', (e) ->
  e.preventDefault() # prevent link from being followed
  $('.form-group').toggle()

You can try it here: https://jsfiddle.net/u9hngeo4/1/

Upvotes: 1

Related Questions