pagy_bootstrap_nav_js not working - others are

[jahseng-lee]

Context

I have a Rails project that is:

• rails (7.0.8)
• pagy (6.2.0)
• bootstrap: ^5.3.2

I can use the pagy_bootstrap_nav and the pagy_bootstrap_combo_nav_js just fine - however pagy_bootstrap_nav_js doesn't work.
This is an issue as on mobile, the regular pagy_bootstrap_nav doesn't scale nicely (getting a horizontal scroll on my phone).

Screenshots:

pagy_bootstrap_nav

pagy_bootstrap_combo_nav_js

pagy_bootstrap_nav_js

However, I can see that it attempts to render a pagy nav:

<nav class="pagy-bootstrap-nav-js" data-pagy="..."></nav> <!-- Remove data-pagy for brevity -->

This element is 0x0 height/width.
(browser console does not report any errors)

---

Code

config/initializers/pagy.rb:

require 'pagy/extras/bootstrap'

app/controllers/example_controller.rb

class ExampleController < ApplicationController
  include Pagy::Backend

  skip_before_action :authenticate_user!

  def index
    @pagy, @locations = pagy(
      Location.all.ordered_for_search_results,
      items: 18
    )
  end
end

app/views/example/show.html.erb

  <div class="pagination-nav-container">
    <%== pagy_bootstrap_nav_js(@pagy) %>
  </div>

---

Wondering why the basic bootstrap nav AND the combo js nav for bootstrap is working, but not the nav_js one?
(Similar issue with the non-bootstrap version too).

Thanks all

[ddnexus]

You may have a javascript error before the init of the helper that doesn't print out anything.

Please, try to remove all your javascripts from a test page and load only the helper in order to check that pagy works at least on its own.

[ddnexus]

@jahseng-lee I converted the issue to a Q&A.

A "bug" report should supply a runnable code that demonstrates that it is actually a pagy bug: a few snippets are not runnable code.

Please, refer to the accepted supports listed in the New Code issue template.

[benkoshy]

further to what ddnexus has said:

it is likely that the JS is not being initialized. If you're using rails, why not use a stimulus controller to do it? Reference: https://ddnexus.github.io/pagy/docs/api/javascript/setup/#3-initialize-pagy

[jahseng-lee]

@benkoshy

it is likely that the JS is not being initialized. If you're using rails, why not use a stimulus controller to do it? Reference:

I can't seem to get the Rails with assets pipeline part configuring correctly. I've tried both Sprockets and Importmaps but I'm still getting the following error:

✘ [ERROR] Could not resolve "pagy-module"

[benkoshy]

look at one of the demo apps: https://github.com/stars/benkoshy/lists/rails-demo-apps-for-pagy

btw if you find a better solution, please post a PR.

[jahseng-lee]

Thanks all, not sure if it's my lack of understanding on how front end bundlers work, but I seem to have a working pagy_js nav with the following:
config/initializers/pagy.rb:

require 'pagy/extras/bootstrap'
# ...
Rails.application.config.assets.paths << Pagy.root.join('javascripts')

package.json:

  "scripts": {
    "build": "NODE_PATH=\"$(bundle show 'pagy')/lib/javascripts\" esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --loader:.js=jsx",

app/javascript/controllers/pagy_controller.js:

import { Controller } from "@hotwired/stimulus"
import Pagy from "pagy-module";

export default class extends Controller {
  connect() {
    Pagy.init(this.element)
  }
}

I didn't need to do any of the Rails with assets pipeline section, which is the part that confused me.

In any case, it seems to be working 🙂 thanks all for the help.
(Unfortunately, pagy_bootstrap_nav_js doesn't seem to scale well on the mobile screen still 🙁 will try to find a way to resize pagy nav for mobile)

EDIT: I see that I need to define steps in the initializer

[ddnexus]

Depending on your particular usage, you may want to match the bootstrap own steps values (adapted to your container), so everything will snap in sync at the same widths.