Question about one line in the Clementine clickController.client.js page

Howdy, Campers

I am in the midst of trying to figure out exactly how the clickController.client.js page works and how it works in conjunction with the HTML page on one side and the ajax-funcitons.js file on the other.

Specifically, what is this line doing? How is it associated with a user’s action on the HTML page?

 ajaxFunctions.ready(ajaxFunctions.ajaxRequest('GET', apiUrl, updateClickCount));

Here is the entirety of the code from the clickController.client.js page:

'use strict';

(function () {

   var addButton = document.querySelector('.btn-add');
   var deleteButton = document.querySelector('.btn-delete');
    var clickNbr = document.querySelector('#click-nbr');
    var apiUrl = appUrl + '/api/:id/clicks';

    function updateClickCount (data) {
       var clicksObject = JSON.parse(data);
       clickNbr.innerHTML = clicksObject.clicks;
    }

    ajaxFunctions.ready(ajaxFunctions.ajaxRequest('GET', apiUrl, updateClickCount));

    addButton.addEventListener('click', function () {

     ajaxFunctions.ajaxRequest('POST', apiUrl, function () {
       ajaxFunctions.ajaxRequest('GET', apiUrl, updateClickCount);
    });

    }, false);

    deleteButton.addEventListener('click', function () {

      ajaxFunctions.ajaxRequest('DELETE', apiUrl, function () {
         ajaxFunctions.ajaxRequest('GET', apiUrl, updateClickCount);
      });

   }, false);

 })();

Looks like it’s doing a “GET” http request to the apiUrl and then executing updateClickCount as a callback, the callback then updates the click counts on the page using clickNbr.innerHTML = clicksObject.clicks;

1 Like

Yes, but what user action triggers this line of code? That is what I cannot quite make sense of.

Thanks!

It’s the “ready” that you need to look at, I think. It’s in https://github.com/johnstonbl01/clementinejs-fcc/blob/master/app/common/ajax-functions.js by the looks of it. I think the answer to your question is “it runs when the page loads”. Does that seem right?

1 Like

Aha, so onload it needs to know how many clicks the user has already made (it could be zero or any other number). So onload, before the user does anything, that line of code goes out and grabs how many clicks that user has made.

That would seem to be correct :slight_smile:

“An HTTP GET request will query the database and return a JSON object mirroring the current document within the Mongo collection” - http://www.clementinejs.com/versions/standard.html (yes, I think you are right)