Rails odd :delete behaviour with twitter-bootstrap-rails

Question

I'm having trouble with an odd :delete method behaviour for links. I configured a devise sign_out route, which is linked in a dropdown box. When clicking that link, it leads to a route error (No route matches [GET] "/users/sign_out").

The strange thing is, that when I copy that link to another position in the navigation bar, it works perfectly.

The RoR navbar code is:

<div class="container nav-collapse">
<ul class="nav">
  <li class="active">
    <%= link_to t('activeview.navigation.home'), home_index_path %>
  </li>
  <li>
    <%= link_to t('activeview.navigation.sign_in'), new_user_session_path %>
  </li>
  <li>
    <%= link_to t('activeview.navigation.sign_up'), new_user_registration_path %>
  </li>
  <li><%= link_to t('activeview.navigation.sign_out'), destroy_user_session_path, :method => :delete %></li>
  <li class="dropdown">
    <% if user_signed_in? %>
      <%= link_to (current_user.email + ' <span class="caret"></span>').html_safe, '#', {
        :class => 'dropdown-toggle',
        'data-toggle' => 'dropdown' } %>
      <ul class="dropdown-menu">
        <li><%= link_to t('activeview.navigation.settings'), edit_user_registration_path(current_user) %></li>
        <li class="divider"></li>
        <li><%= link_to t('activeview.navigation.sign_out'), destroy_user_session_path, :method => :delete %></li>
    <% else %>
      <%= link_to (t('activeview.navigation.not_connected') + ' <span class="caret"></span>').html_safe, '#', {
        :class => 'dropdown-toggle',
        'data-toggle' => 'dropdown' } %>
    <% end %>
    </ul>
  </li>
</ul>
</div><!--/.nav-collapse -->

My application.js looks as follows:

//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require_tree .

Below is my navigation bar. The case is that sign_out_1 works perfectly, but sign_out_2 uses the GET method instead of DELETE.

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
    <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </a>
    <a class="brand" href="#">Brand</a>
    <div class="container nav-collapse">
    <ul class="nav">
      <li><a href="/users/sign_out" data-method="delete" rel="nofollow">sign_out_1</a></li>
      <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">[email protected] <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/users/edit.2">Configuración</a></li>
            <li class="divider"></li>
            <li><a href="/users/sign_out" data-method="delete" rel="nofollow">sign_out_2</a></li>
        </ul>
      </li>
    </ul>
    </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

My destroy route is:

destroy_user_session     DELETE /users/sign_out(.:format)    devise/sessions#destroy

Finally, the .js loading section is:

<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-affix.js?body=1" type="text/javascript"></script>

OliverS · Accepted Answer · 2012-08-24 11:27:41Z

2

A quick workaround is to change sign_out to use HTTP GET instead of HTTP DELETE in ./config/initializers/devise.rb

# The default HTTP method used to sign out a resource. Default is :delete.
config.sign_out_via = :get

And then change calls to sign_out to send GET as well:

<%= link_to t('activeview.navigation.sign_out'), destroy_user_session_path, :method => :get %></li>

answered Aug 24, 2012 at 11:27

OliverS

361 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

M. Zwanzger Over a year ago

Thanks a lot, that's a good solution. Anyways, the problem is very strange.

Jake Smith Over a year ago

Would you have another idea for those of us not using devise?

tsechingho · Accepted Answer · 2012-09-05 08:47:58Z

2

it's js bug of twitter bootstrap, and it's fixed at https://github.com/twitter/bootstrap/commit/3568146b28e3eb22e4347062b1e4f923f87daeb8

also see https://github.com/trimentor/foundation/commit/f5ab92cdcc536032f7f6bd7abf991efc92781005

answered Sep 5, 2012 at 8:47

tsechingho

211 bronze badge

Collectives™ on Stack Overflow

Rails odd :delete behaviour with twitter-bootstrap-rails

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related