Question

I have the following block:

$('.new_comment').live('ajax:success', function(evt, data, status, xhr){
  $('.comments article:last').after(xhr.responseText).effect("highlight", {}, 3000);
})

So when the new_comment form is submitted it calls this.

The after() function works fine, but the effect() call is throwing this error:

TypeError: 'undefined' is not a function (evaluating '$('.comments article:last').after(xhr.responseText).effect("highlight", {}, 3000)')

I’m using jQuery 1.7.1 and jQuery UI 1.8.16.

UPDATE: xhr.responseText returns a newly created article element, like this:

<article id="2">
  <h6><a href="#">Joe</a> <span>(<a href="#2">less than a minute ago</a>)</span></h6>
  <p>This is the new comment!</p>
</article>

After it’s added, the .comments DOM looks like this:

<section class="comments">
  <h3>Comments</h3>
  <article id="1">
    <h6><a href="#">Joe</a> <span>(<a href="#1">less than a minute ago</a>)</span></h6>
    <p>This is a comment!</p>
  </article>
  <article id="2">
    <h6><a href="#">Joe</a> <span>(<a href="#2">less than a minute ago</a>)</span></h6>
    <p>This is the new comment!</p>
  </article>
</section>

Also, if I run console.log($('.comments article:last'));, it definitely returns the object that was created.

Answer 1

I figured out the problem. I was loading the jQuery library twice. Once using the pre-bundled version with Rails and once from Google’s CDN. Removed one of them and now all works fine. Sigh.