Animate cc asynchronous issue

[popolino17]

Hey guis,

I would like to ask is it normal behavior user to act twice when XMLHttpRequest is made throug HTML5 Canvas type in Animate CC.

Here is a very simple scenario:

On the HTML5 Canvas type document there are text field and button.A content from an external text file should loaded in a text field when a button is clicked.

After the first click of the button (by name "getContent_btn") the content is not loaded into text field(at least not displyed). User have to click one more time on the button content to be loaded (displayed) in text fied (by name "content"). There is something hidden in the load process that i miss. Although alert function shows loaded content imediately afrer first button click. Where is the problem?

Here is the  loading function:

function loadXMLDoc(filename) { 

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

  if (this.readyState == 4 && this.status == 200) {     

currentContent = this.responseText;

alert("currentContent:"+currentContent);

    }  

  };

  xhttp.open("GET", filename, true);

  xhttp.send();

}

and here is a button function and listener:

this.getContent_btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

loadContent("document.txt");

this.content.text = currentContent;

}

[UDESCO]

Where is your loadContent function?

The step where you're reading an external file is most probably happening asynchronously, so the data in currentContent won't be available instantly. You'll need to assign the text inside the callback function which should get called once the external file is loaded.

[popolino17]

It is my mistake in previous post.The "loadXMLDoc" should be with "loadContent" function name.

Yes, i suppose there is asynchronous issue with this.But apparently  i miss something.

All those two functions are in the main body of the document as it shown in the post.

The loadContent function should get the returned value (in our case text from external file). But the problem is still exist!

Here is whole code as it in the document body:

var currentContent = "";

function loadContent(filename){

var xhr = new XMLHttpRequest();

xhr.open("GET", filename, true);

xhr.onload = function (e) {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

currentContent = this.responseText;

alert(currentContent);

} else {

console.error(xhr.statusText);

}

}

};

xhr.onerror = function (e) {

console.error(xhr.statusText);

};

xhr.send();

}

this.getContent_btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()

{

loadContent("document.txt");

this.content.text = currentContent;

}

[UDESCO · Accepted solution]

your loadContent function in turn is making an asynchronous call and that's why the value of currentContent wouldn't have updated by the time it is used to assign the text in mouse_click_handler function.

you should instead juse something like this. Change

currentContent = this.responseText;

to

exportRoot.content.text = this.responseText;

[popolino17]

Oh, heaven!

This worked! I've never suppose usage of this global reference named exportRoot that way.

Thanks Nipun Asthana.You are good person