I'm using Pagy gem for pagination in my rails 5 project. Pagination itself works fine, but when I add a UI widget (provided by pagy: pagy_items_selector(#pagy)) above pagination(pagy_nav(#pagy)) chunk in my view file, it's breaking the page links. Example: http://www.localhost:3000/articles?page=5¤t_param=-pagy-2370055651028177601--items-
Instead if I place pagination(pagy_nav) above items selector (pagy_items_selector), the url is neat and works like a charm. Example: http://www.localhost:3000/articles?page=4¤t_param=4
Here's my html code -
<div class="items_per_page">
<!-- Pagy UI widget for users to select items per page -->
<%= pagy_items_selector(#pagy).html_safe %>
</div>
<!-- displaying a list of article titles -->
<% #articles.each do |article| %>
<div class="row justify-content-md-center newsbox">
<div class="article-content">
<div class=" panel-title">
<%= link_to article.title, article_path(article) %>
</div>
</div>
</div>
<% end %>
<!--Pagy Nav links -->
<div class="pager">
<!-- Pagination nav links -->
<%= pagy_nav(#pagy).html_safe %>
</div>
That's a Pagy bug see #117. It has been fixed in Pagy version 1.3.1.
Updating your Gemfile should fix the problem:
bundle update pagy
If it doesn't, check the required gem in the Gemfile. It should be something like:
gem 'pagy', '~> 1.3` # or '1.3.1'
And update again.
Related
I've spent some time on trying to add function of uploading, posting and displaying images in my application. I've tried different methods, eventually finding out that 'Trix' is what I need to reach that goal.
The issue here is that my application structure is quite different from those that I see in 'trix' tutorials, and I have no idea what I am doing :(((
Let's start from the fact that my application.js is located in ->
[app]>
-[javascript]
-[packs]
-application.js
and looks very different from what I see in tutorials. However, I tried to adapt like so -
...
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require('trix')
...
Instead of writing //= require trix.
Another slight difference is that my "application.css" is not ".scss", but I figured it is not that big of a deal. So I went ahead and pasted *= require trix in there.
At first , when I loaded page I've got an error couldn't find file 'trix' with type 'text/css' , but after restarting server it wasn't there anymore (which is normal). Next step would be adding the code ... but it seems that most people have _form.html.erb. And here is where I need help. my "Post" structure is like this ->
[views]>
- edit.html.erb
- index.html.erb
- new.html.erb
- show.html.erb
where new.html.erb contains the form for submitting a post ->
<div class="main posts-new">
<div class="container">
<h1 class="form-heading">Create a new post</h1>
<%= form_tag("/posts/create") do %>
<div class="form">
<div class="form-body">
<% #post.errors.full_messages.each do |message| %>
<div class="form-error">
<%= message %>
</div>
<% end %>
<textarea name="content"><%= #post.content %></textarea>
<input type="submit" value="Post">
</div>
</div>
<% end %>
</div>
</div>
This is where the difference really confuses me... Where do I add 'trix' ? I've tried replacing textarea with trix-editor, the only changes I've got , where two small overlapping squares instead of submit form.
Help. :(
I have a fixed header for every page on my rails app. Is there any way that when I click every link_to to whatever source only refresh the yield part?
<html>
<body>
<%= render 'layouts/header' %>
<div class="row">
<div>
<%= yield %>
</div>
</div>
The current code make each link refresh whole page including the header
I am learning Rails and I am using bootstrap-sass gem. My layout looks like this:
<main role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span3">
LEFT
</div>
<div class="span9">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div>
</main>
The problem is that each of the two columns, .span3 and .span 9 are shown full width and one beneath the other. This is the same for any .span combination.
What am I doing wrong?
Thanks!
You might be using bootstrap 2 syntax with bootstrap 3. span9 changed to col-md-9 (its not exactly like that, see getbootstrap.com for details on how the new grid works).
Which version of bootstrap are you using? If it's bootstrap version 3 it's switched to col-md-xx. So you probably need to use col-md-3 & col-md-9.
I have a mobile page for my app that uses the jquery mobile "collapsible" data-role to hide Microposts (Hartl's tutorial) until the user clicks them to expand.
I also use a modified paginate to render the paginate links.
https://gist.github.com/jugyo/3135120
<div data-role="collapsible">
<h3>Show Microposts (<%= #user.microposts.count %>)</h3>
<ul data-role="listview">
<%= render #microposts %>
</ul>
<%= will_paginate #microposts,
renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
previous_label: 'Prev',
next_label: 'Next'
%>
</div>
My question is: how do I add an event to the paginate click? I want to have the list collapsed (the default), with data-role="collapsible" when the page is first loaded, but when I click next (or later, prev) I want the collapsible container to add the data-collapsed="false" attribute so that the list is open.
(It doesn't make sense to click next and go to a collapsed list again)
Do I put it in the rb that has the paginate code? If so, how do I refer to the page elements? Or do I put some jquery somewhere...?
Any assistance appreciated.
You can add a class or id to your pagination. I'll add an id :
<%= will_paginate #microposts,
renderer: WillPaginate::ActionView::JqueryMobilePaginateLinkRenderer,
id: 'my_pagination',
previous_label: 'Prev',
next_label: 'Next'
%>
Then give your main div some kind of identifier :
<div data-role="collapsible" id="my_list">
Now you can activate it manually with jQuery :
$("#my_pagination").click(function() {
$("#my_list").data("collapsed", $("#my_list").data('collapsed') == 'false' ? 'true' : 'false')
});
I am working on a rails project using the spree ecommerce engine.
I am wanting to edit the links just above the search bar but can not find them in the partial _nav_bar.html.erb
I also can not find the Deface overrides or js code that adds these fields. In the _nav_bar partial I have
<nav id="top-nav-bar" class="columns omega ten">
<ul id="nav-bar" class="inline" data-hook>
<h2>This happens before</h2>
<li id="search-bar" data-hook>
<h2>This happens after</h2>
<%= render :partial => 'spree/shared/search' %>
</li>
</ul>
</nav>
And it results in the code:
<nav id="top-nav-bar" class="columns omega ten"><ul id="nav-bar" class="inline" data-hook>
<h2>This happens before</h2>
<li>My Account</li>
<li>Logout</li>
<li id="search-bar" data-hook>
<h2>This happens after</h2>
............
</nav>
Where do these two links come from? How do I edit them? Why are they not simply held in this partial?
Thanks!
it is an override of the spree_auth_devise extension. See auth_shared_login_bar.rb where it inserts the links before li#search-bar