jquery html not passing back to html variable within getJSON function scope issue

Question

    html += '<ul>';
    var url = '/jr/public/ajax/stories.php?storyId=' + data.storyId + '&type=comments' ;        
    jQuery.getJSON(url,function(datum){                     
        jQuery.each(datum,function(i,elm){
            html += '<li><div class="c-thumb">';
            html += '<img alt="" src="'+elm.thumbImageUrl+'"/>';
            html += '<div class="c-text">';
            html += '<h6><a href="">'+elm.userName+'</a> - '+elm.dateStamp+'</h6>';
            html += '<p>' + elm.commentContent+'</p>';
            html += '</div></li>';      
        });
    });     
    html += '</ul>';

The html variable is not adding the content from the getJSON function to the html variable set outside the scope.

Darin Dimitrov · Accepted Answer · 2014-07-06 19:00:37Z

2

The getJSON function returns immediately. That's because the first A letter from the AJAX acronym means asynchronous. The request is sent and when the server completes the processing, the callback gets executed.

So, it is only inside this callback that you can use the html variable.

var url = '/jr/public/ajax/stories.php';
jQuery.getJSON(url, { storyId: data.storyId, type: 'comments' }, function(datum) {                     
    var html = '<ul>';
    jQuery.each(datum,function(i,elm){
        html += '<li><div class="c-thumb">';
        html += '<img alt="" src="'+elm.thumbImageUrl+'"/>';
        html += '<div class="c-text">';
        html += '<h6><a href="">'+elm.userName+'</a> - '+elm.dateStamp+'</h6>';
        html += '<p>' + elm.commentContent+'</p>';
        html += '</div></li>';      
    });

    html += '</ul>';
    // Here and only here use the html variable. For example you could update the
    // DOM with the value of this variable
});

answered Jul 6, 2014 at 19:00

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

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

2 Comments

somejkuser Over a year ago

OK. What should I use instead? Can you provide an example?

Darin Dimitrov Over a year ago

You should use the html variable only inside the success callback of your AJAX request, not outside it. That simply stems from the very nature of how AJAX works.

Collectives™ on Stack Overflow

jquery html not passing back to html variable within getJSON function scope issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related