Ajax

Ruby
1

Hey guys,

I have an index action which lists out all the items on a page. The page has an alphabet bar at the top, so on the first page load it only loads all the A’s. The letters allow the user to choose what starting letter they prefer to view.

the problem is that each time a letter is clicked the page does a full reload.

What would the simplest way of loading the items of a new letter and replacing the current items?

Neil

2

Hi Neil,

Definitely check out pjax, it’s what github uses for it’s partial page updates.
https://github.com/nz/pjax-rails

3

Hello Mark,

Thanks for the reply. So could I set the pjax container in the index view layout rather than around my main yield call? so it only 'pjax’ifies one specific part?

Also, how would this be accomplished manually?

Kind regards,
Neil

4

The container isn’t actually required, it’s just a convenience if you’re always replacing the same area of the page - like Content.

You can replace different sections of the page per link if you want by putting a selector in the attribute.


<a href="/about" data-pjax="#content">About</a>

how would this be accomplished manually?

Checkout the source, it’s a pretty small gem.

git clone https://github.com/nz/pjax-rails.git

Here’s a really basic example,
In your action you can render without the page layout if it’s requested with the xhr headers.


if request.xhr?
  render :layout => false
else
  render :layout => 'application'
end

Then client side you’d need something like this to update the url’s and fetch the content.


<a href="/about" data-mbjax="#content">About</a>



$(function() {
  $('body').on('click', 'a[data-mbjax]', function(event) {
    $el = $(event.target)
    href = $el.attr('href')
    $($el.data('mbjax')).load(href, function() {
      history.pushState({}, '', href);
    })
  })
})

Untested, but something like that would work.
Load the response into an element on the page, update the URL with pushState, only return the content from the server.

5

Hey Mark,

Just tried this. I added pjax_rails to my gemfile, bundle installed, added pjax in my application.js file and added data-pjax=“.coasters-list” to my links

However, clicking the links performs a full page load.

6

You might need this to intialise the links


$('a[data-pjax]').pjax()
7

Thanks but it’s not made any difference either.

8

Hmm, it’s not making ajax requests at all?

Maybe just step through the railscast on it http://railscasts.com/episodes/294-playing-with-pjax

It’s hard to know exactly what the problem is.