Multiple Ajax calls sometimes fail - javascript

I have a PHP script which queries a database and returns a table, depending on the input, e.g.results.php?f=1.
I am trying to call it multiple times from JavaScript:
function go(n,divid) {
document.getElementById(divid).innerHTML = "<img src=\"load.gif\">";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(divid).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", n, true);
xmlhttp.send();
}
Call later
go('results.php?print=1&nh=1','d1');
go('results.php?print=2&nh=1','d2');
go('results.php?print=3&nh=1','d3');
go('results.php?print=4&nh=1','d4');
The PHP code connects to a SQLite3 database. The problem with the above is that sometimes it works, but sometimes one of the queries fails to be prepared by SQLite3::prepare().
What could be wrong? A sqlite race condition? A javascript issue?
When results.php is called just once, the query always succeeds.
Thanks.

Use xhttp instead of xmlhttp.
function go(n,divid) {
var xhttp = new XMLHttpRequest();
document.getElementById(divid).innerHTML = "<img src=\"load.gif\">";
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById(divid).innerHTML = xhttp.responseText;
}
}
xhttp.open("GET", n, true);
xhttp.send();
}
go('results.php?print=1&nh=1','d1');

Related

Ajax function with a Form variable

What is wrong with this ajax function.
<script>
function loadDoc() {
var a=document.data.fitem.value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "master_find.jsp?val="+a) ;
xhttp.send();
}
</script>
I tried so many ways to supply a variable to the master_find.jsp script to retrieve the main item from a table., no success.

AJAX is returning readystate=1

I am using Flask with Python. From the Flask method I am trying to return HTML table rows in an AJAX call.
The HTML page has:
<div>
<table id="tableQuestions">
</table>
//AJAX Requests to get
function loadQuestions() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
alert(xmlHttp.readyState + " " + xmlHttp.status);
if (xmlHttp.readyState==4 && xmlHttp.status == 200) {
var response = xmlHttp.responseText;
console.log(response);
document.querySelector("#tableQuestions").innerHTML=response;
}
xmlHttp.open("GET", '/gS', true);
xmlHttp.send(null);
}
}
The Flask route has:
#test.mix() returns html table rows
#gbp.route('/gS')
def gS():
test=mn()
response = make_response(test.mix(quesCount=4),200)
response.mimetype="text/html"
In the Safari debugger I can see that the responseText has the table data from the server, but readystate remains 1 and status = 0.
Could you please suggest how I can overcome this issue?
You have
xmlHttp.open("GET", '/gS', true);
xmlHttp.send(null);
inside your xmlHttp.onreadystatechange callback function, which leads to strange effects.
The following code (untested) should behave better:
//AJAX Requests to get
function loadQuestions() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", '/gS', true);
xmlHttp.onreadystatechange = function() {
alert(xmlHttp.readyState + " " + xmlHttp.status);
if (xmlHttp.readyState==4 && xmlHttp.status == 200) {
var response = xmlHttp.responseText;
console.log(response);
document.querySelector("#tableQuestions").innerHTML=response;
}
}
xmlHttp.send(null);
}

Two ajax calls with setinterval on the same page

I have been trying to make a website where people share stuff, I am currently trying to display if user is online or not. This requires an ajax request but I already have a timer and an ajax request running every 5 secs. What can I do to make both run at the same time.
Here's my code:
setInterval(function() {checkiframe(); },5000);
function checkonline(){
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
alert("true");
}
};
xhttp.open("GET", "dbcheckpost.php?u=true", true);
xhttp.send();
}
function checkiframe(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if(xmlhttp.responseText === "true"){
location.reload();
}
}
};
xmlhttp.open("GET", "dbcheckpost.php?last=<?php echo $last; ?>", true);
xmlhttp.send();
checkonline();
}
I also tried running two intervals but only one of them work.
EDIT: I forgot to mention that I want them to work at different intervals.One is 5 secs while other is 10 minutes
just add both functions in the setTimeout anonymous function
setInterval(function() {
checkiframe();
checkonline();
},5000);
And remove "checkonline" from the "checkiframe".
If you whant for checkOnline to be executed after the checkiframe then it should be placed in the callback
function checkiframe(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
checkonline();
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
if(xmlhttp.responseText === "true"){
location.reload();
}
}
};
xmlhttp.open("GET", "dbcheckpost.php?last=<?php echo $last; ?>", true);
xmlhttp.send();
}
And if you want your function to be executed independently use to separate setInterval.
Here example code that I've tested.
function f1(){
console.log('1s');
}
setInterval(f1, 1000);
function f2(){
console.log('5s');
}
setInterval(f2, 5000);

DIV changing onclick with external page as a variable

I have this code that is changing the content of the DIV based on an external page:
external page
and
function loadexternalPage() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('main_frame').innerHTML =
xmlhttp.responseText;
}}
xmlhttp.open("GET", "externalpage.html", true);
xmlhttp.send();
}
How can I update this code in the way the function get a variable as an external page instead?
something like this??
Link to external page
function loadexternalPage(externalpage) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('main_frame').innerHTML = xmlhttp.responseText;
} }
xmlhttp.open("GET", externalpage, true);
xmlhttp.send();
}
or with method:
$(document).ready(function () {
loadxtPage("popup.html");
$("#main_frame").click(loadxtPage("externalpage.html"));
})
You can use the href attribute:
Pass the event here:
Link to external page
Use the events' attribute to get the URL:
function loadexternalPage(event) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('main_frame').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", event.target.href, true);
xmlhttp.send();
}
This is one possible solution. It really depends on where you need to specify the URL.

How can I send more than one variable to a php file using ajax and a get request?

I am trying to send an I.D. value and a name value to a php file using ajax. I can send just the I.D. variable just fine but when I try to add the name variable, the function stops working. How can I send both?
This works:
function click() {
var name = clickedelement.getElementsByTagName('input')[0].value;
var id = clickedelement.getElementsByTagName('input')[1].value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("popupBox").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "friends2.php?id="+id, true);
xmlhttp.send();
};
But when I try to add the name variable, it dosnt work.
function click() {
var name = clickedelement.getElementsByTagName('input')[0].value;
var id = clickedelement.getElementsByTagName('input')[1].value;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("popupBox").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "friends2.php?id="+id"&name="+name, true);
xmlhttp.send();
};
change to "friends2.php?id="+id+"&name="+name you just have a missing +
"friends2.php?id="+id+"&name="
// missing plus sign here ^

Categories

Resources