jQuery not working with XMLHttpRequest object - javascript

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 );

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.

inject jsp with js result into html>body>div

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>

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;

send content to other page using script

I have written a code in script which is given below.
function myFunction(a) {
var k=a;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("ques").innerHTML = this.responseText;
}
};
xhttp.open("GET", "retrieveQuestion.php?question=" +a, true);
xhttp.send();
var q="<td><input type='text' name='answer' id='ans' placeholder='submit your answer here'/></td>" ;
document.getElementById("t2").innerHTML=q;
var answ = document.getElementById("ans").value;
var z="<td align='center'><input type='button' value='submit' onclick='myfunc1(k,answ)'/></td>";
document.getElementById("t3").innerHTML=z;
}
function myfunc1(q1,a1)
{
xhttp.open("GET", "checkanswer.php?question=" +q1 + "&a1=" +a1, true);
xhttp.send();
}
Now when i click on submit button it did not redirected to checkanswer.php
can anyone help me in this problem.
Using xhttp.open is sending a background request to checkanswer.php, rather than actually redirecting to it. You'd need to use something like window.location instead.

How can I load a spinning icon when using xmlhttprequest object

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.

Categories