JavaScript only works after the function has been run once already

Question

I have a script that calls from json data to display who is on a webpage at a given time. I have a function that is called at the very bottom of my page once. There is then a timer that calls it every 5 seconds.

When the code initially runs, Nothing happens. The alert(visListHtml); is empty. But when it runs on the timer, tt works fine.

Any idea what is causing this to be empty on its very first run? Google DEV tools show data being returned by the getJSON. If I put an alert in the for loop. It pops up populated fine each time.

It's just the first time it runs, it does nothing. visListHtml is empty. I have the following code:

var prev_GetLiveVisitorList = "";
var visListHtml = '';
function GetLiveVisitorList() {

        $.getJSON('<?php echo $apiEndpoint; ?>?cmd=GetLiveVisitorList&rnd'+Math.random(), function (allStatusJSON) {

          for (i in allStatusJSON.websiteVisitor) {
                visipAddr   = allStatusJSON.websiteVisitor[i].visipAddr;
                vistime     = allStatusJSON.websiteVisitor[i].vistime;
                visLandingPage = allStatusJSON.websiteVisitor[i].visLandingPage;
                visRefPage = allStatusJSON.websiteVisitor[i].visRefPage;

                visListHtml += '<div class="media"><span class="avatar status-success"><img src="../assets/img/avatar/1.jpg" alt="..."></span><div class="media-body"><p><strong>'+visipAddr+'</strong><time class="float-right" datetime="2018-07-14 20:00">'+vistime+'</time></p><p class="fs-14 semibold">Landing page: '+visLandingPage+'</p><p>Reffered By: '+visRefPage+'</p></div></div>';

            }
        });

            alert(visListHtml);

            if (prev_GetLiveVisitorList != visListHtml) {
                document.getElementById("GetLiveVisitorList").innerHTML = visListHtml;
                prev_GetLiveVisitorList = visListHtml;
            }
     }

Hmm I dontthink its a dom ready issue, Other scripts work fine on separate parts of the page both rendered before and after this bit. — Lynxus, Sep 01 '18 at 20:17
`$.getJSON` is *asynchronous* so your `alert` runs before AJAX request is completed. Put `alert` and code which uses `visListHtml` inside `$.getJSON` **callback** function. — Alex Kudryashev, Sep 01 '18 at 20:18
Also, The data is there. If i alert it, It loads the data form within the for loop. It just doesnt leave the loop on the first run of the code. — Lynxus, Sep 01 '18 at 20:19
Thanks Alex Kudryashev and Luca. Makes sense!! Works fine now.. Duh — Lynxus, Sep 01 '18 at 20:20

score 1 · Answer 1 · answered Sep 01 '18 at 20:18

I indented the code and explained in the code what is happening. In both cases (first time and then using the timer) is not working:

var prev_GetLiveVisitorList = "";
var visListHtml = '';
function GetLiveVisitorList() {
  $.getJSON('<?php echo $apiEndpoint; ?>?cmd=GetLiveVisitorList&rnd'+Math.random(), function (allStatusJSON) {
    for (i in allStatusJSON.websiteVisitor) {
      visipAddr   = allStatusJSON.websiteVisitor[i].visipAddr;
      vistime     = allStatusJSON.websiteVisitor[i].vistime;
      visLandingPage = allStatusJSON.websiteVisitor[i].visLandingPage;
      visRefPage = allStatusJSON.websiteVisitor[i].visRefPage;
      visListHtml += '<div class="media"><span class="avatar status-success"><img src="../assets/img/avatar/1.jpg" alt="..."></span><div class="media-body"><p><strong>'+visipAddr+'</strong><time class="float-right" datetime="2018-07-14 20:00">'+vistime+'</time></p><p class="fs-14 semibold">Landing page: '+visLandingPage+'</p><p>Reffered By: '+visRefPage+'</p></div></div>';
    }
  });

  /**
  * First time visListHtml is empty because AJAX call is happening async below this line
  * When you said using the timer works, it's not working, is showing the result of the first time well
  * but is not showing the result of the second real time
  **/
  alert(visListHtml);

  if (prev_GetLiveVisitorList != visListHtml) {
    document.getElementById("GetLiveVisitorList").innerHTML = visListHtml;
    prev_GetLiveVisitorList = visListHtml;
  }
}

visListHtml is initialized to empty string, and this is showed first time because $.JSON is running async and still has no data
Using the timer, "works right" means "visListHtml" was populated by first $.JSON call and is showing the result of that call BUT is not showing the current $.JSON that was triggered by the timer
To fix it, you need to work with visListHtml after $.JSON modifying the DOM or doing the actions you really need Hope this helps :))

Thank you - Things have become a lot more clearer. – Lynxus Sep 01 '18 at 20:22 — Lynxus, Sep 01 '18 at 20:22

JavaScript only works after the function has been run once already

1 Answers1