SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Ajax

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax

    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. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi Neil,

    Definitely check out pjax, it's what github uses for it's partial page updates.
    https://github.com/nz/pjax-rails
    http://railscasts.com/episodes/294-playing-with-pjax

  3. #3
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.
    HTML Code:
    <a href="/about" data-pjax="#content">About</a>
    how would this be accomplished manually?
    Checkout the source, it's a pretty small gem.
    Code:
    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.
    Code ruby:
    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.
    HTML Code:
    <a href="/about" data-mbjax="#content">About</a>
    Code javascript:
    $(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. #5
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You might need this to intialise the links
    Code javascript:
    $('a[data-pjax]').pjax()
    https://github.com/defunkt/jquery-pjax

  7. #7
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but it's not made any difference either.

  8. #8
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •