Jquery each() function loop with Ajax

Question

I wish to replace values in each div class with my ajax result but i cannot seem to append my table result to the individual div class during the loop. I know somehow the $(this).append(table) is placed wrongly because it is not outside of the ajax request. How can i modify this to get the effect i wanted?

my script is as such:

$('.developer_badgesarea').each(function(){
    // get the div class value to perform ajax
    var player_id = $(this).html();
    var table;

    // if condition to conduct ajax
    if(player_id != 'None'){

        $.ajax({
            // ajax stuff here
            success: function(result){
                //table created here
                $(this).append(table);
            }
        });
    }
});

@experiment it is a html table that i have created using my result. — pivotal developer
– pivotal developer, Commented Apr 5, 2011 at 5:51

hmabesa · Accepted Answer · 2011-04-05 05:56:11Z

3

Issue is your "this" reference inside the ajax success function. It references the callback function, instead of the dom element you are intending it to be referenced.

$('.developer_badgesarea').each(function(){
    // element reference to your div, that you'll access inside your ajax call
    var elm = $(this);
    // get the div class value to perform ajax
    var player_id = elm.html(); 
    var table;

// if condition to conduct ajax
if(player_id != 'None'){

    $.ajax({
        // ajax stuff here
        success: function(result){
            //table created here
            elm.append(table);
        }
    });
}


});

answered Apr 5, 2011 at 5:56

hmabesa

543 bronze badges

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

Collectives™ on Stack Overflow

Jquery each() function loop with Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related