javascript - Accessing various webservices with Javascript

Question

I'm in the process of creating a crowdfunder page and want to create a dashboard showing the current progress: http://hyve.me/crowdfunder

Here is the JavaScript I use:

<script type="text/javascript">
  // Facebook Likes
  $.getJSON("https://graph.facebook.com/?ids=hyve.me", function (response) {
    $("#facebooklikes").text(response["hyve.me"].likes);
  });

  // registered Users
  $.ajax({
    type: 'GET',
    url: 'http://www.hyve.me/usercount',
    dataType: 'JSON',
    success: function (response) {
      $("#usercount").text = response;
    }
  });

  // days left
  jQuery(document).ready(function($) {
    today = new Date();
    deadline = new Date("October 31, 2013");
    msPerDay = 24 * 60 * 60 * 1000 ;
    timeLeft = (deadline.getTime() - today.getTime());
    $("#countdown").text(Math.floor(timeLeft / msPerDay));
  });

  // progress bar for shares
  $.getJSON("https://api-public.addthis.com/url/shares.json?url=http%3A%2F%2Fwww.hyve.me%2Fcrowdfunder%2F", function (response) {
    var mentions = response.shares;
    document.getElementById("myProgressBar_Success").setAttribute('style', "width: " + (mentions / 6).toString() + "%;");
    document.getElementById("myProgressBar_Warning").setAttribute('style', "width: " + ((600 - mentions) / 6).toString() + "%;");
  });
</script>

and here is the HTML of the dashboard:

<div class="span8 offset2">
  <div class="row-fluid statistics">
    <div class="span4"><div class="linediv-l"><h3 id="facebooklikes">0</h3><p>FB <i class="icon-thumbs-up"></i></p></div></div>
    <div class="span4"><div class="linediv-c"><h3 id="usercount">0</h3><p>Hyve-Users</p></div></div>
    <div class="span4"><div class="linediv-r"><h3 id="countdown">0</h3><p>days left</p></div></div>
  </div>
</div>
<div class="row-fluid">
  <div class="span10 offset1">
    <div class="thermometer progress active">
      <div class="bar bar-success" style="width: 50%;" id="myProgressBar_Success"></div>
      <div class="bar bar-warning" style="width: 50%;" id="myProgressBar_Warning"></div>
    </div>
  </div>
</div>

Now I have a number of questions:

1. the number of Facebook Likes is displayed correctly in Chrome (v29) and Firefox (v23) but not in Internet Explorer (v9) - any ideas how to make this browser independent?
2. the number of registered users works only if I'm on the same domain (hyve.me); therefore, I can test this only in production but not on development (AWS) or staging (heroku.com) - any ideas how to fix this?
3. the progress bar is not updated according to data from addthis.com - why does getJSON() work with Facebook-Graph and not with the webservices from AddThis?

This is my first question on Stackoverflow and I have spent the last 2 days finding the answer. Maybe someone here can point me to the right direction.

Thanks in advance!

-Christoph

Answer 1

So this might answer all three questions.

$(function(){


   // Facebook Likes
   $.getJSON("https://graph.facebook.com/?ids=hyve.me", function (response) {
        $("#facebooklikes").text(response["hyve.me"].likes);
   });

   // registered Users
   $.ajax({
       type: 'GET',
       url: 'http://www.hyve.me/usercount',
       dataType: 'jsonp',
       success: function (response) {
            $("#usercount").text = response;
       }
   });

   // progress bar for shares
   $.ajax({
       type: 'GET',
       url: 'https://api-public.addthis.com/url/shares.json?url=http%3A%2F%2Fwww.hyve.me%2Fcrowdfunder%2F',
       dataType: 'jsonp',
       success: function (response) {
           var mentions = response.shares;
           $("#myProgressBar_Success").css({ width: (mentions / 6) + "%" });
           $("#myProgressBar_Warning").css({ width: ((600 - mentions) / 6) + "%" });
       }
   });

   // days left
   today = new Date();
   deadline = new Date("October 31, 2013");
   msPerDay = 24 * 60 * 60 * 1000 ;
   timeLeft = (deadline.getTime() - today.getTime());
   $("#countdown").text(Math.floor(timeLeft / msPerDay));

});

You were having a cross-domain issue which happens when you try to access data via ajax from a domain other than your own. Check out https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript for some more in-depth detail there.

When using the jQuery.ajax method, you can specify the dataType as jsonp. See this answer for more about JSONP.

Looking at this answer it seems that while cross-origin GET requests are typically allowed without JSONP, sometimes they aren't.

So the data wasn't loading; therefore, never getting a value to update your html.

I've also tweaked your AddThis callback to use jQuery for DOM manipulation instead of getElementByID. That might have been causing your IE bug. If you are already using jQuery, your best off staying consistent with how you manipulate the DOM.