CODEWITHSUNDEEP
javascriptjqueryarrays
Brian Coolidge
Brian Coolidge

Reputation: 4649

$.each pass value to function

I don't know how to search this problem in Stackoverflow it gives different solutions and does not relate to my problem. So I'll be needing your help again guys.

Values of variable obj:

item.title = Title1 and Title2

item.description = Description1 and Description2

HTML FILE:

function test_pop() {
    var fb_id = "xxxxxxxxxxxx";
    var v_id = "xxxxxxxx";

    $.post('http://mysite.com/myfile.php', {fb_id: fb_id, v_id: v_id}, function(data) {
        var obj = $.parseJSON(data);
        $.each(obj,function(index, item){
           achievement = "You Obtained " + item.title + " " + item.description;
           achievement_pop(achievement);
        });
    });
}

achievement_pop function:

function achievement_pop(data) {
    $("#achievement_popup").html(data).show(); //DIV that should show up
}

So the problem is, when the div shows up, it only outputs:

    <div> <!-- Imagine that this content is inside a DIV -->
**You Obtained Title2 Description2**

    </div>

But my desire output is:

    <div> <!-- Imagine that this content is inside a DIV -->

**You Obtained Title1 Description1**

**You Obtained Title2 Description2**

    </div>

Hope you guys help me, thanks.

Upvotes: 1

Views: 99

Answers (2)

charlietfl
charlietfl

Reputation: 171679

Use append() to add to end of element and not replace the content completely with html()

Or if you want to replace the existing content with all the new content at once:

/* start with empty string*/
var achievement='';
$.each(obj,function(index, item){
    /* add to string on each pass of loop - can use any html you want here*/
     achievement += "You Obtained " + item.title + " " + item.description +'<br>';
});
/* update element once all data parsed*/
 achievement_pop(achievement);

Parsing to string and making one update is the most efficient from processing standpoint

Upvotes: 2

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382122

the html function is replacing the whole content of the div, it's not just adding.

A solution would be to replace

$("#achievement_popup").html(data).show();

with

$("#achievement_popup").html($("#achievement_popup").html()+data).show();

But it's a little heavy. Personally I would first build the html and use the html function only once.

Upvotes: 3

Related Questions