0

In /views/layouts/_navigation.html.erb I have this piece of code where drop-down menu is populated on click:

<div class="dropdown profile-element">
  <span>
    <img alt="image" class="img-circle" src="<%= image_url 'profile_small.jpg' %>"/>
  </span>
     <a data-toggle="dropdown" class="dropdown-toggle" href="#">
       <span class="clear">
         <span class="block m-t-xs">
         <strong class="font-bold"><%= current_user.name %></strong><b class="caret"></b>
         </span>
       </span>
     </a>
     <ul class="dropdown-menu animated fadeInRight m-t-xs">
       <li><%= link_to t('.settings'), edit_user_path(current_user), remote: true %></li>
       <li class="divider"></li>
       <li><%= link_to t('.logout'), logout_path %></li>
     </ul>
</div>

link_to t('.settings') populate AJAX modal window where user settings are shown. In /javascripts/layouts/navigation.coffee I have this piece of code:

$(document).click (event) ->
  clickover = $(event.target)
  $navbar = $('.dropdown profile-element')
  _opened = $navbar.hasClass('in')
  if _opened == true and !clickover.hasClass('dropdown-toggle')
    $navbar.collapse 'hide'
  return

which should close drop-down menu when link_to t('.settings') is clicked, however it is not working.

How to make drop-down close when settings is clicked? Thank you for any help.

Update on solution

If anyone needs here is final solution, which appeared to be the simplest in my case. I added $("#dialog").trigger('click'); to my users/edit.js.erb which made drop-down in background disappear when modal was populated.

matiss
  • 747
  • 15
  • 36
  • What have you done to debug? If you log your variables, you can confirm if they are set to what you expect them to be e.g. are you sure the event.target is what you expect it to be? is _opened set to a truthy value, what class(es) does clickover have? – margo Mar 05 '17 at 11:30
  • @margo I did not do any debug by now. So far I tried to implement [answer from here](http://stackoverflow.com/a/25409035) as it seemed my case. I suppose I don't understand correctly something in JS code above. – matiss Mar 05 '17 at 11:37
  • I would suggest you add some logging to the code and check in the console that your variables are what you expect them to be e.g. console.log($(event.target)) – margo Mar 05 '17 at 11:41

1 Answers1

1

You have wrong selector of navbar. It should be rather:

$navbar = $('.dropdown.profile-element')

or in other words you forgot "." before "profile-element".

M. Stavnycha
  • 433
  • 3
  • 9
  • Thank you, it works. I found another way as well - I had to just add `$('#profile_dropdown').hide();` to my `views/users/edit.js.erb` and add `id='profile_dropdown` to `_navigation.html.erb` – matiss Mar 05 '17 at 14:29