Question

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.

Answer 1

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.