Question

I have already implemented some AJAX pagination in my Rails app by using the example code for the will_paginate plugin–which is apparently using Prototype.

But if I wanted to switch to using jQuery for future additions, I really don’t want to have the Prototype stuff sitting around too (yes, I know it’s possible). I haven’t written a lick of JavaScript in years, let alone looked into Prototype and jQuery… so I could use some help converting this bit into jQuery-compatible syntax:

document.observe("dom:loaded", function() {
  // the element in which we will observe all clicks and capture
  // ones originating from pagination links
  var container = $(document.body)

  if (container) {
    var img = new Image
    img.src = '/images/spinner.gif'

    function createSpinner() {
      return new Element('img', { src: img.src, 'class': 'spinner' })
    }

    container.observe('click', function(e) {
      var el = e.element()
      if (el.match('.pagination a')) {
        el.up('.pagination').insert(createSpinner())
        new Ajax.Request(el.href, { method: 'get' })
        e.stop()
      }
    })
  }
})

Thanks in advance!

---

Edit: Nick Craver’s answer got me 90% of the way there, so I just had to pick up enough jQuery to make the HTML element substitution. In place of the line where Nick had $.get($(this).attr("href"));, put this line:

$.get(this.href, null, function(data){ $(this).html(data); }, 'html');

Answer 1

You can shorten this down a bit in jQuery to:

$(function() {
  $('.pagination a').live('click', function(e) {
    $(this).parent('.pagination')
           .append("<img src='/images/spinner.gif' class='spinner' />");
    $.get($(this).attr("href"));
    return false;
  });
});

I’m not entirely sure about new Ajax.Request(el.href, { method: 'get' }) though, is this a script being requested? It looks like nothing’s being done with the content after return.