How to make Bootstrap's Button (with drop down toggle) work properply with will_paginate in Rails

StackOverflow https://stackoverflow.com/questions/20543641

Question

I have a table with order information and am using the will_paginate gem to create pagination for the page to show 10 orders a page.

The _head.html.erb file is rendered in the application.html.erb and file contains:

<head>
  <title>fstool</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <%= stylesheet_link_tag    "application", media: "all", "data-turbolinks-track" => true %>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>

application.js contains:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

Next to every order is a Twitter Bootstrap button (with drop down toggle), this is the code:

<div class="btn-group">
    <button type="button" class="btn btn-xs btn-primary dropdown-toggle" data-toggle="dropdown">
      Action
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><%= link_to "Show", order %></li>
      <li><%= link_to "Edit", edit_order_path(order) %></li>
      <li class="divider"></li>
      <li><%= link_to "Destroy", order_path(order),
                    method: :delete, data: { confirm: 'Are you sure?' } %></li>
    </ul>
  </div>
</div>

The button works on the first page. When I click on page 2, the button does not work. It is clickable, but there is no drop down toggle. I have to reload (CMD-R) the page for the drop down button to work.

Any ideas on how to solve this?

Was it helpful?

Solution 2

As Nich pointed out, to solve this simply remove //= require turbolinks form ./app/assets/javascripts/application.js.

All working now.

OTHER TIPS

Details: For some reasons, I would not recommend turbolink, but it actually will improve your client side performance if you know how to tackle all the issues.

If you are using jquery wf turbolink

https://github.com/kossnocorp/jquery.turbolinks

This is the railscast I mentioned:

http://railscasts.com/episodes/390-turbolinks I think they have fix on it.

What are the pros and cons of Asset-Pipeline/Turbolinks from Rails 4 for a big application?

They discussed about pros and cons of turbolink

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top