CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
user3271518
user3271518

Reputation: 628

Inconstant panel placement with jquery + bootstrap

I am building a custom RSS dashboard and I am iterating over an array of feeds and throwing them to the google service.

but when I look at my panels they are not in order consistently.

code:

JQuery

 var rssArray = [
  'https://blog.malwarebytes.org/feed/',
  'http://krebsonsecurity.com/feed/',
  'http://motherboard.vice.com/rss?trk_source=motherboard',
  'https://www.trustwave.com/rss.aspx?type=twblog',
  'http://threatpost.com/feed/',
  'https://news.ycombinator.com/rss',
  'http://feeds.trendmicro.com/TrendMicroSimplySecurity?format=xml',
  'https://securityintelligence.com/topics/vulnerabilities-threats/feed/',
  'https://securityintelligence.com/topics/x-force/feed/'
]
   for (var i=0; i < rssArray.length; i++){
     $.ajax({
       url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&callback=?&q=' + encodeURIComponent(rssArray[i]),
       dataType: 'json',
       success: function(data) {
        //  console.log(data)
         var feedBody = $('<div>', {class: 'panel-body'})
         var feedHead = $('<div>', {class: 'panel-heading', html: '<h3 class="panel-title text-center">'+capitaliseFirstLetter(data.responseData.feed.title)+'</h3>'})
         var contentHolder = $('<ul>', {class: 'list-group'})
         var feed = $('<div>', {class: 'col-xs-6 col-md-4 panel panel-warning'}).append(feedHead).append(feedBody).append(contentHolder)
         $.each(data.responseData.feed.entries, function(key, value){
           if (value.contentSnippet === "Comments"){
             var thehtml = '<a href="'+value.link+'" target="_blank" class="list-group-item"><h5 class="list-group-item-heading">'+value.title+'</h5></a>';
           } else {
             var thehtml = '<a href="'+value.link+'" target="_blank" class="list-group-item"><h5 class="list-group-item-heading">'+value.title+'</h5><p class="list-group-item-text">'+value.contentSnippet+'</p></a>';
           }
           feedBody.append(thehtml)
         });
        $("#content").append(feed)
       }
    })
 }

HTML

  <div class="row">
    <div id="content">
    </div>
  </div>

Examples of issues:

enter image description here enter image description here

Upvotes: 1

Views: 33

Answers (1)

zzzzBov
zzzzBov

Reputation: 179116

You're kicking off a series of AJAX calls, which will execute for an unknown amount of time. When they complete they will call their success callbacks.

If the first request takes 5 seconds, but the third request takes 2, the third request will be rendered before the first.

If you need to ensure that these requests have all completed before rendering their contents, use $.when to create a promise (jQuery deferred actually) and render all the data when it has resolved.

Upvotes: 1

Related Questions