Basic Calling Function Troubleshooting

Question

How do I get the function checkViewers(); to work properly? I believe I am calling it wrong within the JS document file and therefore the JS is not reading the function properly.

The current code:

//Content Viewer Information
function checkViewers() {

  //Base Variables
  var viewer = $('#viewed span.user');
  var totalViews = $('#viewed span.user').length;
  var shortenViews = $('#viewed span.user').length -1;

  if (totalViews === 0) {
      $('<span> 0 people have </span>').insertBefore($('#viewed span:last-child'));
  }
  if (totalViews === 2) {
      $('<span> and </span>').insertAfter(viewer.first());
  }
  if (totalViews >= 3) {
      viewer.slice(1).hide();
      $('<span> and </span>').insertAfter(viewer.first());
      $('<span class="user count"></span>').insertAfter(viewer.eq(2));
      $('.count').html(shortenViews + ' more people');
  }

}

The function is called towards the bottom of the remaining JS, after the JSON Data has been called.

Ideally, the JSON Data should be inputted into the HTML and the function should catch the number of viewers. This should then effect how the viewers are being shown in the HTML, upon how many viewers are being listed.

View the Plunker.

And after viewing the code on that random site. Ajax is Asynchronous. You ordered a pizza off the internet and you try to eat the pizza before it gets to your house. You have to wait for the pizza to show up before you eat it. AKA, you can not call your function until the data is there. So when you set the html, you call your function. — epascarello, Jan 04 '15 at 03:23
@charlietfl Been using the example for years: http://stackoverflow.com/questions/4559032/easy-to-understand-definition-of-asynchronous-event/4560233#4560233 — epascarello, Jan 04 '15 at 03:32

score 4 · Accepted Answer · answered Jan 04 '15 at 03:27

Making my comment an answer:

Ajax is Asynchronous. You ordered a pizza off the internet and you try to eat the pizza before it gets to your house. You have to wait for the pizza to show up before you eat it. AKA, you can not call your function until the data is there. So when you set the html, you call your function

xhr.onload = function() {  //<--Function is called when the Pizza shows up at your door and the doorbell rings
     ...  //removed a bunch of code....
     //Update Page With New Content
      var viewerSection = $('#viewed');
      viewerSection.html(newViewers);  //You open up the pizza box
      checkViewers(); //<--- MOVE IT HERE, The pizza is here!!!!    
  }
};

xhr.open('GET', 'data.json', true);   //<-- You set up your pizza order
xhr.send(null);  //<--You make the pizza purchase 

//checkViewers();  <-- PIZZA IS NOT HERE!!!!

@epascarello Your analogy is definitely helpful in visualizing Ajax. I typically use JSFiddle if I post an example. The reason I used Plunker was purely because I wanted to link the JSON externally versus internally. Thank you for the help! — Andrew, Jan 04 '15 at 03:34

Basic Calling Function Troubleshooting

1 Answers1