如何让Bootstrap的按钮(带下拉切换)与Rails中的will_paginate一起正常工作

时间:2021-07-12 12:21:07

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.

我有一个包含订单信息的表,并使用will_paginate gem为页面创建分页,以显示每页10个订单。

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

_head.html.erb文件在application.html.erb中呈现,文件包含:

<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:

每个订单旁边都有一个Twitter Bootstrap按钮(带下拉切换),这是代码:

<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.

该按钮适用于第一页。当我点击第2页时,该按钮不起作用。它是可点击的,但没有下拉切换。我必须重新加载(CMD-R)页面才能使用下拉按钮。

Any ideas on how to solve this?

关于如何解决这个问题的任何想法?

2 个解决方案

#1


1  

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.

详细信息:由于某些原因,我不建议使用turbolink,但如果您知道如何解决所有问题,它实际上会提高您的客户端性能。

If you are using jquery wf turbolink

如果你正在使用jquery wf turbolink

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

This is the railscast I mentioned:

这是我提到的railscast:

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

http://railscasts.com/episodes/390-turbolinks我认为他们已经解决了这个问题。

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

Rails 4的Asset-Pipeline / Turbolinks对于大型应用程序的优缺点是什么?

They discussed about pros and cons of turbolink

他们讨论了turbolink的优缺点

#2


0  

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

正如Nich所指出的,要解决这个问题,只需删除// = require turbolinks形式./app/assets/javascripts/application.js。

All working now.

一切正常。

#1


1  

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.

详细信息:由于某些原因,我不建议使用turbolink,但如果您知道如何解决所有问题,它实际上会提高您的客户端性能。

If you are using jquery wf turbolink

如果你正在使用jquery wf turbolink

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

This is the railscast I mentioned:

这是我提到的railscast:

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

http://railscasts.com/episodes/390-turbolinks我认为他们已经解决了这个问题。

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

Rails 4的Asset-Pipeline / Turbolinks对于大型应用程序的优缺点是什么?

They discussed about pros and cons of turbolink

他们讨论了turbolink的优缺点

#2


0  

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

正如Nich所指出的,要解决这个问题,只需删除// = require turbolinks形式./app/assets/javascripts/application.js。

All working now.

一切正常。