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);
}
Related
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');
I am trying to send a form data using POST method and xmlhttp.open
Please help find the error in my code
function submitChat() {
if (form1.msg.value == '' ) {
alert ('ALL FIELDS ARE MANDATORY');
return;
}
var xmlhttp = new XMLHttpRequest();
var msg = form1.msg.value;
var params = 'msg=helloooooooo';
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('chatlogs').innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open('POST', 'rtest.php?rid=14', true);
xmlhttp.send(params);
}
Everything is fine and it is working with GET method. but POST method is not working. Please help.
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.
We have the following method to invoke the URL using ajax.
Currently after hitting the url we are using the response.
So we want to put a timeout for reposne.So when we invoke the url if the response didn't came after 2sec then call one more method and if resp comes within two seconds call other mehtod.
We have tried using the timeout,but unable to made it working with the code.
function ajaxCall(url1) {
var ajaxresp = null;
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", url1, true);
xmlhttp.send();
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
ajaxresp = xmlhttp.responseText;
//function call
getAdResponse(ajaxresp);
}
}
}
}
Please advice me how to proceed.
Try smth like this
xmlhttp.open("GET",url1,true);
xmlhttp.onreadystatechange= function (){
if (xmlhttp.readyState==4){
if (xmlhttp.status == 200){
ajaxresp = xmlhttp.responseText;
}
}
xmlhttp.send();
setTimeout(function() {
if(ajaxresp) {
dosmth(ajaxresp);
} else {
dosmthelse();
}
}, 2000);
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 ^