CODEWITHSUNDEEP
javascriptjqueryjson
user971741
user971741

Reputation:

append not appending content but replacing it

I am using jquery .load function to load the results from server and append it in my html:

$("#content").load('Get/classPosts?class=arts&min=1', function (responseText, textStatus, XMLHttpRequest) {
arr = $.parseJSON(responseText);
for (i = 1; i < arr.length; i++) {
    if (arr[i] != null) {
        $('#content').append("<section class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>").slideDown(100);
    }
}
});

As far as fetching and appearance of of data through .load is concerned its fine, but there are few issues that i am facing with this:

I don't know why it is there on page.

However, this would be a little off question but i would appericiate if somebody can also help me with .slideDown(100); function at the end, i want each new content to come out as animated sliding down but its not working also.

thankyou!

Upvotes: 1

Views: 326

Answers (1)

Adrian Trainor
Adrian Trainor

Reputation: 257

load() does this by default. When you call load first, you are telling it to replace the html inside the #content div. You need to use GET or POST to retrieve the information and then append it to #content.

Something like this:

$.get('Get/classPosts?class=arts&min=1', function (data) {
    if(data.length > 0) {
        arr = $.parseJSON(data);
        var newId;
        for (i = 1; i < arr.length; i++) {
            if (arr[i] != null) {
                // unique id for slidedown to work
                newId = $('.contentpost').length;
                $('#content').append("<section id='contentpost-"+newId+"' class='contentpost'><div class='contentimg'><a href='" + arr[i][0] + "'><img src='" + arr[i][2] + "'/></a> </div><div class='contenttitle title'><a href='" + arr[i][0] + "'>" + arr[i][1] + "</a></div></section>");
                // slide down pointing to the newly added contentposts only
                $('#contentpost-'+newId).slideDown(100);
           }
        }
    }
});

What you also need to do is set the contentpost class' to hidden in css, something like:

.contentpost {
    display:none;
}

You need this or the slidedown won't work. The div needs to be hidden.

Upvotes: 7

Related Questions