CODEWITHSUNDEEP
javascriptruby-on-railstwitter-bootstrappagination
Robin Winton
Robin Winton

Reputation: 601

Trouble with endless paginating

This is a doozy! I have the following problem:

I use twitter bootstrap and will_paginate (enhanced to endless pagination) with my current project and the goal is to use a fluid layout to display all items in a 4 column format. However, after the second page is loaded, the endless page breaks and will_paginate is displayed instead.

This is how the page loads when accessing for the first time page1

It follows correctly the fluid nesting as described in twitter bootsrap page and generally looks good except for the misalignment.

After the second page loads, the page looks like this: page2

and the layout is really messed up. Instead of each element from column 1 being in a "span3" class of it's own, the whole column is a"span3" containing other "span3" elements.

Ok , here's the code:

_kindergarten.html.erb

<div class="span3" id="kindergartens">
    <%= link_to kindergarten.name, kindergarten %>
</div>

index.html.erb

<div class="row-fluid">
    <div class="span12">
        <div class="row-fluid">
            <%= render @kindergartens %>
        </div>

        <div class="pull-right">
            <%= will_paginate %>
        </div>

    </div>
</div>

And the following code is used for endless pagination (source):

kindergartens.js.coffee

jQuery ->
  if $('.pagination').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 50
        $('.pagination').html('<img src="assets/spinner.gif" />')
        $.getScript(url)
    $(window).scroll()

index.js.erb

$('#kindergartens').append('<%= escape_javascript(render(@kindergartens)) %>');
<% if @kindergartens.next_page %>
  $('.pagination').replaceWith('<%= escape_javascript(will_paginate(@kindergartens)) %>');
<% else %>
  $('.pagination').remove();
<% end %>
<% sleep 1 %>

Unfortunately my js skills are zero so I can't provide any support except for what I've learnt in that tutorial.

So, in the end, my question is this: How do I display these kindergartens in four columns using bootstrap's fluid grid and endless pagination?

Upvotes: 0

Views: 363

Answers (1)

Robin Winton
Robin Winton

Reputation: 601

I just love stackoverflow! Because no one answers my questions, I am forced to find my own. My very own success story ... here it is.

First of all, the JS code is ok and there's no need to interfere with it... but it gave me a first clue:

$('#kindergartens').append('<%= escape_javascript(render(@kindergartens)) %>');

This stuff affects a tag with the id="kindergartens" and executes the erb code. However the said tag was inside the _kindergarten.html.erb partial, thus being executed after the render resulting render inside render (that's why I had span3 inside span 3 and 1 column after the first call to second page).

Solution was simple (insert id before render):

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div class="row-fluid" id="kindergartens">
                <%= render @kindergartens %>
            </div>
        </div>
    </div>

    <div class="pull-right">
        <%= will_paginate %>
    </div>

</div>

The problem that arose now was that I had 3 full columns and only one element in the 4th. This was due to the fact that the span3 width was off. A few tweaks inside /public/assets/aplication.css and now the page looks like this:

enter image description here

I win!

Upvotes: 1

Related Questions