CODEWITHSUNDEEP
jqueryjquery-uihighlighteffect
Shpigford
Shpigford

Reputation: 25338

jQuery effect returning undefined

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.

Upvotes: 4

Views: 3191

Answers (2)

Shpigford
Shpigford

Reputation: 25338

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.

Upvotes: 9

Jirka Kopřiva
Jirka Kopřiva

Reputation: 3089

New element created due ajax post is not chained with parent container. It seems like new namespace is created by posting. So you can't touch any element of page body which is not defined in result part of post function.

Upvotes: -1

Related Questions