XML Http Request issue

Report · Oct 16, 2020

Hi all,

first time here.

I am building a web page that connects to Vmix live video streaming software through IP and port on local network, once connected buttons on web page can trigger functions inside Vmix.

The issue i'm having is I cannot get the button to work properly from Animate CC Canvas as it triggers the function upon loading in browser and button does nothing.

It works as it should from basic .HTML with some javascript (code below) that I made in a text editor.

I am wondering what am I doing wrong inside animate?

(please bear with me as I am a beginner and only know basic javascript)

WORKING .html CODE:

<button onclick="httpGet('http://192.168.x.xxx:8088/api/?Function=OverlayInput2&Input=5')">Overlay 2</button>

var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", theUrl, false); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}
</script>

</body>
</html>

ANIMATE CC CODE: (button not working)

this.btn.onclick = httpGet('http://192.168.x.xxx:8088/api/?Function=Fade&Duration=1000');

function httpGet(theUrl) {

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("GET", theUrl, false); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}

link to the vmix api info: https://www.vmix.com/help19/index.htm?DeveloperAPI.html

Report · Oct 16, 2020

Your button code is completely wrong. You can't just guess how things might work and hope you guessed right.

Use the Code Snippets feature to see how to write click actions.

Report · Oct 16, 2020

Thanks for the quick reply.

I have tried with addEventListener and it has the same result.

It connects to Vmix and executes the function when page loads as opposed to waiting for button click to execute function.

Here is the code I used this time:

this.btn.addEventListener("click", httpGet('http://192.168.x.xxx:8088/api/?Function=Fade&Duration=1000').bind(this));

function httpGet(theUrl) {

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("GET", theUrl, true); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}

Report · Oct 17, 2020

Yeah, it's running immediately because you're not passing addEventListener a reference to httpGet, you're passing it the return value from httpGet.

Report · Oct 17, 2020

Would I use an event to to reference the function? An example or snippet would be appreciated. Thanks

Report · Oct 17, 2020

Thanks for the tip, its pretty basic stuff but at times confusing for a beginner like myself.

Got it working with the following code:

this.btn.addEventListener("click", function () {
httpGet("http://192.168.x.xxx:8088/api/?Function=Fade&Duration=1000");
});

function httpGet(theUrl) {

var xmlHttp = new XMLHttpRequest();

xmlHttp.open("GET", theUrl, true); // false for synchronous request
xmlHttp.send(null);
return xmlHttp.responseText;
}

Thanks again, but I would like to know the reason why the basic Html and Javascript code doesn't encounter this problem?

Report · Oct 18, 2020

be aware to test your javascript code on all JS interpreter (blink, gecko, webkit at least)

as there are various behaviors and slitghly different properties.

Report · Oct 18, 2020

Because HTML onclick doesn't take a function reference, it takes an arbitrary string of JavaScript code that's executed when clicked.

XML Http Request issue

1 Correct answer