JQuery conflict with will_paginate ajax pagination

I followed this and got the AJAX pagination to work. But, when I include the JQuery library, it doesn't work. I'm using the jrails plugin but that doesn't help either. Any ideas? Thanks !

Here's the javascript

document.observe("dom:loaded", function() {
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()
  }
})

} })

EDIT

This is my actual code开发者_JS百科 and it works fine when I don't include JQUERY. But I need to use both prototype and JQUERY. Also when I click on one of the page no.s I get this

try {jQuery("#testing").html("\n  <div class=\"pagination ajax\"> ......

When you include the jquery library, it will assume that all $ calls are calls to jquery (rather than prototype for example). To prevent this, call the method noConflict on your jquery object immediately after pulling it in. See http://api.jquery.com/jQuery.noConflict/

When you've done this, $ calls will be ignored by jQuery: it will only respond to "jQuery", ie

$("foo").something => prototype
jQuery("foo").something => jQuery