javascript - JQuery function not executing on document load -

javascript - JQuery function not executing on document load -

i trying build simple social media website in people create posts , comment on postings (kinda facebook). in order fetch posts , comments, have created 2 simple php scripts me results in json format. created 2 functions in jquery, getposts() , getcomments() ajax results. on success, these functions clone() html frame have created each post/comment object returned.

here html frame:-

<div class="kk-posts_feed"> <div class="kk-post_frame" style="display:none;"> //this div clone() postings <div class="kk-post_info_header"> <a class="kk-post_username"></a> </div> </div> <div class="kk-post_text"></div> <div class="kk-post_comment_thread" data-pid=""> <div class="kk-post_comment_box"> //this div clone comments <div class="kk-post_comment_user_info"> <a class="kk-post_comment_username"></a> </div> <div class="kk-post_comment_text"></div> </div> </div> </div> </div>

this getposts() method output posts:-

function getposts(){ //this function gets posts , clones html each post $.ajax({ type : 'get', url : 'fetchposts.php', datatype: 'json', error : function(){ $('.dash_results_bar').html('<p class="kk-post_load_error">' + "sorry, couldn't load posts @ moment. maybe because facing downtime or because databases beingness updated." + ' <a href="#" class="kk-post_load_retry">retry</a>' + "</p>"); }, success : function(data) { var posts = data.posts; if(posts.length) { $('.kk-post_frame:first').css("display", "block"); $(posts).each(function(index, value){ $('.kk-post_frame:first') .clone(true) .attr('id', (value.post_id)) .find('.kk-post_username').html(value.user_fullname) .end() .find('.kk-post_text').html(value.post_text) .end() .find('.kk-post_comment_thread').attr('data-pid', value.post_id) .end() .appendto('.kk-posts_feed'); }); $('.kk-post_frame:first').css("display", "none"); } } }); }

this getcomments() method output comments under each post:-

function getcomments(){ $('.kk-post_comment_thread').each(function(){ // run method each comment thread div within each of posts div var pid = $(this).attr('data-pid'); // pid 'post id' use, identify each comment thread div separately. var self = this; $.ajax({ type : 'post', url : 'fetchcomments.php', info : 'pid='+pid, // send post id php script returns comments particular post in form of json objects error : function(){ $(self).html('<p class="kk-post_comment_load_error">' + "sorry, couldn't load comments @ moment." + ' <a class="kk-post_comment_load_retry" href="#">retry</a>' + "</p>"); }, success : function(data){ var comments = data.comments; if(comments.length) { $('.kk-post_comment_box:first').css('display', 'block'); $(comments).each(function(index, value){ $('.kk-post_comment_box:first') .clone(true) .attr('id', value.comment_id) .find('.kk-post_comment_username').html(value.user_fullname) .end() .find('.kk-post_comment_text').html(value.comment_text) .end() .appendto(self); }); $('.kk-post_comment_box:first').css('display', 'none'); } } }); }); }

this how execute above 2 functions :-

$('document').ready(function(){ $.when(getposts()).done(function(){ getcomments(); }); });

while getposts() method executes , outputs posts, getcomments() method either doesn't execute or doesn't show results. cant sure because everytime refresh page, postings , not comments. checked console did not find errors script. getcomments() method worked when executed via click event handler $('button').click(function(){ getcomments(); });. therefore, know both methods working fine, not able execute them 1 after other on page load. can help me peculiar problem?

your getposts() function doesn't homecoming anything, you're passing undefined $.when().

you need homecoming what's returned $.ajax():

function getposts(){ //this function gets posts , clones html each post homecoming $.ajax({ // ...

javascript php jquery ajax facebook