Strange problem with jQuery when using Ajax

Question

Im using jQuery/PHP/MySql to load twitter search results on the page but limited to the first 20 search results.

When the user scrolls the page and hits the bottom of the page a further 20 results are loaded and displayed.

I have implemented a voting system so the these particular tweets can be voted up and down.

However when the scrolled results are loaded this functionality stops working for the ajax loaded results but continues to work for the first 20 results.

Here is the jQuery that fetches the new results on scroll:

j(window).scroll(function(){
    if (j(window).scrollTop() == j(document).height() - j(window).height()){
        j.ajax({
            url: "older.php?oldest="+oldestName+"",
            cache: false,
            success: function(html){
                j(".older").html(html);
                j('.tweets ul li').removeClass( 'last_item' );
                j('.older ul > *').clone().hide().appendTo('.tweets ul').slideDown();
            }
        })
    }
});

And the jQuery that sets the voting up:

        $("a.vote_up").click(function(){
            //get the id
            the_id = $(this).attr('id');

            // show the spinner
            $(this).parent().html("<img src='images/spinner.gif'/>");

            //fadeout the vote-count 
            $("span#votes_count"+the_id).fadeOut("fast");

            //the main ajax request
            $.ajax({
            type: "POST",
            data: "action=vote_up&id="+$(this).attr("id"),
            url: "vote.php",
                success: function(msg) {
                    $("span#votes_count"+the_id).html(msg);
                    //fadein the vote count
                    $("span#votes_count"+the_id).fadeIn();
                    //remove the spinner
                    $("span#vote_buttons"+the_id).remove();
                }
            });
        });

The HTML markup:

<li id='1283009589'>
<a class='imglink' target='_blank' href='link'>
<img src='link'alt='howtomoodle' title='howtomoodle' />
</a>
<a class='userlink' target='_blank' href='http://twitter.com/jim' alt='jim' title='jim'>jim</a>

Screenpresso - free screen capture software http://post.ly/uFxt  #moodle || 28-08-2010 16:33

<span class='votes_count' id='votes_count22361731118'>Votes:0</span>
<span class='vote_buttons' id='vote_buttons22361731118'>
<a href='javascript:;' class='vote_up' id='22361731118'></a>
<a href='javascript:;' class='vote_down' id='22361731118'></a>
</span>

</li>

Does anyone have any ideas why then the older results are loaded they do not allow the voteup and votedown buttons to be clicked, or atleast the .click event doesnt work.

i think the server is always giving the first 20 results... check the server side coding... and when the older results are updated then the click event attached to the older results are also gone... so, u need live function to detect the new results and then apply click event to them... — Vaibhav Gupta
– Vaibhav Gupta, Commented Aug 28, 2010 at 16:24

migajek · Accepted Answer · 2010-08-28 16:22:18Z

2

thats because the "click" event for "a.vote" is binded once, at a SITE load. When you're loading the new content (next 20 results) they $(document).ready is not called. Have a look at $.live method http://api.jquery.com/live/ which is exactly what you need :)

answered Aug 28, 2010 at 16:22

migajek

8,65217 gold badges82 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user113716 · Accepted Answer · 2010-08-28 16:53:47Z

A good alternative to using .live() is .delegate(), which is more efficient when placed on the parent container of your dynamic elements.

$('#theContainer').delegate("a.vote_up", "click", function() {
        //get the id
        the_id = $(this).attr('id');

        // show the spinner
        $(this).parent().html("<img src='images/spinner.gif'/>");

        //fadeout the vote-count 
        $("span#votes_count"+the_id).fadeOut("fast");

        //the main ajax request
        $.ajax({
        type: "POST",
        data: "action=vote_up&id="+$(this).attr("id"),
        url: "vote.php",
            success: function(msg) {
                $("span#votes_count"+the_id).html(msg);
                //fadein the vote count
                $("span#votes_count"+the_id).fadeIn();
                //remove the spinner
                $("span#vote_buttons"+the_id).remove();
            }
        });
    }
);

(Requires jQuery 1.4 or later.)

Collectives™ on Stack Overflow

Strange problem with jQuery when using Ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related