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')">
Related
My question is: Could insert a jsp response (html) in html?
I think using XmlHttpRequest.
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.jsp", true);
xhttp.send();
My question is: But if I have javascript in my jsp that it executes after page loading, is it executed like when I call jsp directly by browser url?
Thanks in advance
For example:
This is index.html
<html>
<head>
<script type="text/javascript" src="app.js"></script>
</head>
<body onload="loadInfo();">
<div id="container"></div>
</body>
This is app.js:
function loadInfo(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("container").innerHTML =this.responseText;
}
};
xhttp.open("GET", "info.html", true);
xhttp.send();
}
This is info.html (i have jsp but i think it is the same..):
<html>
<head>
<script type="text/javascript" src="info.js"></script>
</head>
<body>
<div id="body_info">This is info..</div>
<script type="text/javascript" >
console.log("wait for info..");
info();
</script>
</body>
This is info.js:
function info(){
document.getElementById("body_info").innerHTML ="info.js is executed";
}
If i call info.html, typing url in browser(example http://localhost:8000/info.html), the script is executed and i get
"info.js is executed",instead if i call index.html, maybe the xhr request not return the same but I see "This is info".
how can i resolve and accomplish this problem using xhr?
Thanks
Roberto
When you make ajax called to some page so what ever will there under <body></body> will return as response so in your code this.responseText will be having <script></script> code in it also. You can check if you are using chrome then click on element tab you will see <script></script> also which is return as response .Now,to execute this you can do like below :
function loadInfo() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("container").innerHTML = this.responseText;
//getting the script which is return as response back
var datas = document.getElementById("container").getElementsByTagName("script");
//looping unders <script></script>
for (var i = 0; i < datas.length; i++) {
console.log("inside script executing")
eval(datas[i].innerText); //executing script
}
}
};
xhttp.open("GET", "n.html", true);
xhttp.send();
}
And your script for info.html look like below :
<script>
console.log("wait for info..");
info();
function info() {
document.getElementById("body_info").innerHTML = "info.js is executed";
}
</script>
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
}
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;
I have an index.php page which loads info.php through AJAX. The info.php content is loaded like this:
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("data").innerHTML = this.responseText;
}
};
xhttp.open("GET", "info.php", true);
xhttp.send();
}
(function() {
loadDoc()
})();
setInterval ( "loadDoc()", 5000 );
</script>
The info.php file has the following code to do a count up/down from/to a specific number.
<div class="timer count-title count-number" data-from="2000" data-to="300" data-speed="1500"></div>
<script src='includes/jquery-3.2.1.min.js'></script>
<script src="includes/counter.js"></script>
When I visit info.php directly the counter works perfectly fine. However, if I visit index.php, the counter is not even showing. I had the same issue with other jQuery scripts. Even if index.php includes jQuery and the other scripts it still doesn't work. I do want the number to go through the AJAX call since it keeps updating.
Is there a simple solution?
you can do it by JQuery like as follow...
function loadDoc(){
console.log( "call done" );
$( "#data" ).load( "info.php", function() {
console.log( "Load done." );
});
};
$(function(){loadDoc();});
setInterval (loadDoc, 5000 );
I think their problem with your function statement checks this for the following script...
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("data").innerHTML = this.responseText;
}
};
xhttp.open("GET", "info.php", true);
xhttp.send();
}
$(function(){loadDoc();});
setInterval (loadDoc, 5000 );
How can I load a spinning icon when using xmlhttprequest in JavaScript while Ajax is processing and I want to direct it to an innerHTML of a tag
Instead of 'Loading...' just use your spinner image and correct the path to your_file.txt to get a response from server:
function loadXMLDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var res = this.responseText;
setTimeout(function(){
document.getElementById("demo").innerHTML = res;
}, 2000);
} else {
document.getElementById("demo").innerHTML = 'Loading...';
}
};
xhttp.open("GET", "your_file.txt", true);
xhttp.send();
}
<div id="demo">
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</div>
You don't need the setTimeout either - it's just for demo purposes, so you can actually see and verify the spinner when the response comes back way to fast, i.e. on localhost.