Make request in the API and calculate on the result - javascript

I need to make a request to the API then make a calculation about the result, I tried something like this:
file.js
function makeRequest() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
calcPreco(xmlHttp.responseText);
}
xmlHttp.open("GET", "https://dominio/api/produtos.php?pid=10&get=price&billingcycle=monthly", true); // true para asynchronous
xmlHttp.send(null);
}
function calcPreco(preco) {
console.log(preco);
preco = preco.replace(",", ".");
preco -= 5;
document.getElementById("vps10off").textContent = preco;
}
index.php
<script type="text/javascript">
window.onload = makeRequest;
</script>
<span id="vps10off"></span>
Nothing is happening, it is not printing the <span> value. what did I do wrong?

You are not invoking your makeRequest function.
Change
window.onload = makeRequest;
To
window.onload = makeRequest();
If you need to execute more code when the window loads, set the value of window.onload to a function that invokes makeRequest along with other code you need to be executed on page load.
window.onload = function(){
makeRequest();
//other code
}

Related

how to use embed code in javascript variable

I have this variable in js :
var video_embed = '<script src="https://stream.laminor.academy/1qwyvs9ystd9/embed"><\/script>';
$('.my_video').after("<div class='col-xs-12' id='video_content'>"
+ video_embed +
"</div>");
but my rendered HTML code is :
<div class="col-xs-12" id="video_content">
<script src="https://stream.laminor.academy/1qwyvs9ystd9/embed"></script>
</div>
embed code not working!
Thanks for help
when you generate script tags after the document is loaded, it won't run.
You need to download the script and execute it :
//Code that will download the script
function loadScript() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
// Making sure there's no error
if (this.readyState == 4 && this.status == 200) {
// Executing the script
eval(this.responseText)
} else if (this.readyState == 4) {
// If the server responded with something else than a 200 OK
console.warn(this.status)
}
};
xhttp.open("GET", "https://stream.laminor.academy/1qwyvs9ystd9/embed", true);
xhttp.send();
}
// Executing the function
loadScript()
Let me know if it isn't working.

Javascript i can't add a new paragraph using ajax

Hi im having this problem, when i use the code only for the (without the "demo2" ) works fine, and in the browser i can see the text that its on "PruebasGeneral/MBVR000008.txt" and when i change this file/text, works in my HTML without refreshing, but i need to add another as you can see, i tried to add in the same function, but doesnt work, with this code in the browser in the two paragraph shows whats inside "PruebasGeneral/MBVR000009.txt" so basically shows demo2 and demo2. WHAT SHOULD I DO?
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<p id="demo2"></p>
<script>
function loadDoc(path, callback) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
callback(this.responseText);
}
};
xhttp.open("GET", path + "?t=" + Math.random(), true);
xhttp.send();
}
function data1Loaded(data) {
document.getElementById("demo").innerHTML = data ; // do something with data
}
function data2Loaded(data) {
document.getElementById("demo2").innerHTML = data ; // do something with data
}
function loadDocs() {
loadDoc('/PruebasGeneral/MBVR000008.txt', data1Loaded);
loadDoc('/PruebasGeneral/MBVR000009.txt', data2Loaded);
setTimeout(loadDocs, 1000);
}
window.onload = loadDocs;
</script>
</body>
</html>
You need to have all of that over again. You can't just call open() twice:
function loadDoc(path, callback) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
callback(this.responseText);
}
};
xhttp.open("GET", path + "?t=" + Math.random(), true);
xhttp.send();
}
function data1Loaded(data) {
// do something with data
}
function data2Loaded(data) {
// do something with data
}
function loadDocs() {
loadDoc('path1', data1Loaded);
loadDoc('path2', data2Loaded);
setTimeout(loadDocs, 1000);
}
window.onload = loadDocs;

Ajax -on page load with using a button

Im trying to get ajax to run in a paragraph when the webpage open. I can only get it working if i use a button. Is it possible to have the information from the ajax function to load once the webpage opens?
Here is my code.
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById('A1').innerHTML = xhttp.status;
document.getElementById('A1').innerHTML = xhttp.statusText;
document.getElementById('A1').innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "home.xml", true);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
<p > <span id="A1"></span></p>
<button onclick="loadDoc('home.xml')">Get XML data</button>
Whatever function you are invoking, whether it handles ajax or any other calculation, to invoke a function on document load you have to call the function within window.onload
function a(){
...........
}
window.onload = function(){
a();
};
For jquery:
$(document).ready(functon(){
a();
});
or
$(function(){
a();
});
Try:
<body onload="loadDoc('home.xml')">

settimeout not getting called?

I have a javascript which call a server and get a JSON data which contains some config to enable/disable redirecting to another link. I need to delay the redirection by a few seconds, but it seems that setTimeout() is not getting called in my method. Even if I change redirect() as an anonymous function and pass it in setTimeout it is still not getting called.
<script>
var xhr = new XMLHttpRequest();
var migrationConfig;
xhr.onreadystatechange = function() {
function redirect(){
alert("in redirect");
window.top.location=migrationConfig.REDIRECT_LINK;
}
if (xhr.readyState == 4 && xhr.status==200) {
var data = xhr.responseText;
migrationConfig = JSON.parse(data);
if(migrationConfig.SHOW_REDIRECT_MESSAGE == 'Y'){
if (window.confirm(migrationConfig.REDIRECT_MESSAGE)){
document.body.innerHTML = '';
document.write("<h1><font color='red'>You will now be redirected to the new URL at:</font></h1>");
document.write("<h1><font color='red'>"+ migrationConfig.REDIRECT_LINK +"</font></h1>");
setTimeout(redirect,3000);
}
}
}
}
xhr.open('GET', '/MyApp/migration-config?APP_NAME=MyApp', true);
xhr.send(null);
// set global object for using it inside the settimeout function
var redirect;
and then inside the xhr.onreadystatechange = function() {
redirect = function(){
alert("in redirect");
window.top.location=migrationConfig.REDIRECT_LINK;
}
setTimeout('redirect()',3000);
Thanks for all the suggestions. I have improved it as per suggestion by talsibony, and I further found out also that document.write() removes all my content, which makes it unable to find the redirect global variable. So I have instead changed it to add a div element and set the innerHTML. Here is the fixed code in case if someone encountered similar issue.
<script>
var xhr = new XMLHttpRequest();
var migrationConfig;
var redirect;
xhr.onreadystatechange = function() {
redirect = function(){
window.top.location=migrationConfig.REDIRECT_LINK;
}
if (xhr.readyState == 4 && xhr.status==200) {
var data = xhr.responseText;
migrationConfig = JSON.parse(data);
if(migrationConfig.SHOW_REDIRECT_MESSAGE == 'Y'){
if (window.confirm(migrationConfig.REDIRECT_MESSAGE)){
document.body.innerHTML = '';
var div = document.createElement("div");
document.body.insertBefore(div, document.body.firstChild);
div.innerHTML += "<h1><font color='red'>You will now be redirected to the new URL at:</font></h1>";
div.innerHTML += "<h1><font color='red'>"+ migrationConfig.REDIRECT_LINK +"</font></h1>";
div.innerHTML += "<h1><font color='red'>Remember to save the new URL to your favorites</font></h1>";
setTimeout(redirect,3000);
}
}
}
}
xhr.open('GET', '/MyApp/migration-config?APP_NAME=MyApp', true);
xhr.send(null);

How can I force my external script to be executed in AJAX response

My AJAX will responds with
<script type="text/javascript" src="js/checkersGame.js" ></script>
among other things.
Everything works fine, except the JavaScript is not executed. How do I force it to execute in the response?
My Ajax is as follows:
function loadXMLDoc()
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
if (xmlhttp.responseText == 0) {
//do nothing
} else {
document.getElementById("everything").innerHTML=xmlhttp.responseText;
}
}
}
xmlhttp.open("GET", "./poll.php", true);
xmlhttp.send();
}
function checkUpdate() {
loadXMLDoc();
setTimeout(checkUpdate, 10000);
}
checkUpdate();
If you're trying to make an ajax call you should be doing something like
<script type="text/javascript">
$.ajax({
url: "js/checkersGame.js",
}).done(function(reponse) {
//do something with response (replace content of "everything")
});
</script>
You'll have to change xmlhttp.onreadystatechange to return the new content and then change content of "everything" outside the checkesGame.js script. You might have to rework the timeout logic as well..

Categories