jqueryajaxlivequery

fadeIn response using livequery, automated ajax calls with setInterval not fading in


Alright, gents, here's the problem. I am working on doing an auto update (using ajax) on my website to load any new comments that may have been posted since the dom load. The script works fine as in a new comment will be loaded with the ajax call; however, I want the response from the call to fadeIn with jquery. I use this code $(response).hide().prependTo('.ideas').fadeIn('slow'); in other places, and it works fine. I believe it works in other spots because I am using the .on() method, but I can't use that here because I'm not using any sort of user action to fire the event.

Here's the current code:

setInterval(function() {

    if (window.location.pathname == "/" || window.location.pathname == "/appreciate" || window.location.pathname == "/appreciate#") {
        var first_message = $('.messages > div.message_wrapper:first').attr('id');
        var pathname = window.location.pathname;
         $.ajax({
            type: "POST",
            url: "/update_comments.php",
            data: {first_message: first_message, pathname: pathname},
            success: function (response) {
                $(response).hide().prependTo('.messages').fadeIn(2000);
            }
        });

    } else {
        var first_idea = $('.ideas > div.message_wrapper:first').attr('id');
         $.ajax({
            type: "POST",
            url: "/update_comments.php",
            data: {first_idea: first_idea, pathname: pathname},
            success: function (response) {
                $(response).hide().prependTo('.ideas').fadeIn(2000);
            }
        });
    }

}, 20000);

Any thoughts? I considered using livequery, and I saw elsewhere that you can define which jquery methods that livequery looks for, so I put this in my code $.livequery.registerPlugin('append', 'prepend', 'after', 'before', 'wrap', 'attr', 'removeAttr', 'addClass', 'removeClass', 'toggleClass', 'empty', 'remove', 'appendTo', 'prependTo'); But it didn't do anything.


Solution

  • Alright...I solved it.

    $('.messages').livequery(function () {
        $(response).hide().prependTo('.messages').fadeIn(2000);
    });
    

    By adding livequery on success: to the .messages div, I was able to add the fadeIn effect.