This is my first php project. I have imlemented partial ajax postback by refering to this article: PHP AJAX SQL reference article
Now, I am trying to show a loading gif when the partial loading starts and hide it when the partial loading completes. Here is the code that I am using in Javascript:
function showUser1(str)
{
if (str == "")
{
document.getElementById("mems").innerHTML = "I caanot fetch: " + str;
return;
}
else
{
document.getElementById("loadgif").style.visibility= "visible";
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("outerpicwrapper").innerHTML = "";
document.getElementById("mems").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","getmembers.php?q2="+str,true);
xmlhttp.send();
document.getElementById("loadgif").style.visibility= "hidden";
}
}
In the first line of body, I have written:
<img id="loadgif" src="img/loading.gif" class="loadinggif" />
In the CSS file, i have written:
.loadinggif
{
position: absolute;
z-index: 200;
visibility: hidden;
}
The code is working fine and shows the data but, loading gif is not shown.
I have even tried display:none and display:block in place of visibility.
Kindly help.
The problem is AJAX is asynchronous. Thus your code doesn't wait for the data to be fetched and
document.getElementById("loadgif").style.visibility= "visible";
document.getElementById("loadgif").style.visibility= "hidden";
These lines are executed simultaneously.
To prevent this from happening you can put
document.getElementById("loadgif").style.visibility= "hidden";
inside the callback as well
function showUser1(str)
{
if (str == "")
{
document.getElementById("mems").innerHTML = "I caanot fetch: " + str;
return;
}
else
{
document.getElementById("loadgif").style.visibility= "visible"; // This line displays the loading gif
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById("outerpicwrapper").innerHTML = "";
document.getElementById("mems").innerHTML = xmlhttp.responseText;
document.getElementById("loadgif").style.visibility= "hidden"; // This line hides the loading gif
}
};
xmlhttp.open("GET","getmembers.php?q2="+str,true);
xmlhttp.send();
}
}
Finally, I made my issue work out using JQuery.
I just made display:none in CSS and called the show() function of jquery on the loading gif div. This show function was written inside the javascript code.
Related
I have created the below code which should on load, dump the document visible state to a mysql database via xmlhttp.open and .send.
The code does not execute as desired on open, but functions as expected with switching tabs, minimizing browser, etc.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
//Identify if visible or not
function handleVisibilityChange() {
var state = 'Visable';
if (document.hidden) {
var state = 'Hidden';
} else {
var state = 'Visable';
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
}
};
xmlhttp.open("GET","./track2.php?state="+state,true);
xmlhttp.send();
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
</script>
</head>
<body>
</body>
</html>
This file is being loaded as an include in a number of php pages, sort of stats tracker for the site.
I am ganging my head against the wall for 3 hours now. I have this code:
function showpctask() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("pcactivitytask").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","showpctask.php"+,true);
xmlhttp.send();
}
that opens up a php file inside a div (id = pcactivitytask). That php file builds a 'select'
I also have this function right here:
function setpctaskwidth() {
var maxtaskwidth = 0;
$("div .pcactivitytask").each(function(){
c_width = parseInt($(this).width());
if (c_width > maxtaskwidth) {
maxtaskwidth = c_width;
}
});
alert (maxtaskwidth);
}
that will show me the max width of all elements with the the class of "pcactivitytask". Yes, the select created by the previous script has that class. If I call both these function it will NOT include the width of the NEWLY created select..... I need to run it AGAIN 'manuall'. I need my script to "onclick" BOTH build the NEW select AND include it in finding the max width by the second script. Thank you.
XMLhttprequest works asynchronously, meaning it does not happen in order.
that is why you have the xmlhttp.onreadystatechange callback function, that only runs once the request is finished
you do not specify how you call these two functions but I would expect to see the call to setpctaskwidth() inside the onreadystatechange function like this:
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("pcactivitytask").innerHTML = xmlhttp.responseText;
setpctaskwidth();
}
};
be advised that if the response includes images or other external resources (fonts etc) that don't already exist in the page you might get a different size than the actual final size (it will measure the size before the image is loaded)
I have a button calling an ajax function which loads a PHP script returned as innerHTML. It does return the output to the screen but the problem looks to be that it is not implementing javascript to format the outputted HTML. So I should have 6 boxes per line (dictated by salvattore.js) but instead it stretches 1 div across the screen. I can also tell my own js is not initialised until I do a window resize. Heres the script..
function submitForms() {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("searchResults").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","ideasSearch.php?",true);
xmlhttp.send();
}
and HTML
<div id="searchResults"></div>
Im trying to setup a redirect for a chat script. If the chat goes unanswered after x amount of time the page will redirect.
I posted a question here yesterday regarding the same thing, but at the time knowing little in regards to JS I was trying to mix php with js. I have changed tactics.
Here is what I got thus far:
function opCheck()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
opCheck();
// alert('working2');
}
}
opjoined = "newchattimer.php";
xmlhttp.open("GET",opjoined,true);
xmlhttp.send(null);
}
function opResult()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
//alert('state = 4');
var op = xmlhttp.responseText;
}
}
ajaxurl = "ajaxfiles/opAnswer_12.txt";
xmlhttp.open("GET",ajaxurl,true);
xmlhttp.send(null);
}
setTimeout(function() {
opCheck();
opResult();
//alert(op);
if (op == 'n') window.location.replace("chatnoop.php");
}, 3000);
It creates the text file properly but ultimately no redirect. I used the chrome deveolpers tool and no errors. I also tried to alert(op); to see if the result is being grabbed, but I get no alert.
What is wrong with this code?
Thanks.
If you had taken the time to indent your code, you'd see that var op is declared inside the scope of the onreadystatechange function, which is both out of scope and asynchronous.
function opResult() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
var op = xmlhttp.responseText; //declared here
}
}
ajaxurl = "ajaxfiles/opAnswer_12.txt";
xmlhttp.open("GET", ajaxurl, true);
xmlhttp.send(null);
}
setTimeout(function () {
opCheck();
opResult();
// op is out of scope here
if (op == 'n') window.location.replace("chatnoop.php");
}, 3000);
Since timeouts aren't generally the way to handle async functions, and doing ajax request when all you intend to do when it finishes is to redirect anyway is'nt really neccessary, you could just do a regular form submit, which will redirect all by itself, or move the redirecting inside the right scope!
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if(xmlhttp.responseText == 'n') window.location.href = 'chatnoop.php';
}
}
You may find what you want here http://www.tizag.com/javascriptT/javascriptredirect.php but basically i don't think that window.location.replace("chatnoop.php"); is correct. You should consider using JQuery to manage all the Ajax stuff in addition, but it should work like you've done anyway
I have these two buttons that a user can click to either approve/deny somebody on a site, and the code works perfect in IE, but when I try and use firefox, nothing at all happens when I click the buttons.
the javascipt/ajax code is:
function ApproveOrDenyStudent(i, action){
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var newStudentEmail = "newStudentEmail" + i;
var emailField = document.getElementById(newStudentEmail);
var email = emailField ? emailField.value : '';
// Approve/deny the user
if (action == 0){
xmlhttp.open("GET","ApproveStudent.php?email="+email,true);
}
else if (action == 1){
xmlhttp.open("GET","DenyStudent.php?email="+email,true);
}
xmlhttp.send();
window.location.reload();
}
any help would be great! Thanks!
You got a race condition!
xmlhttp.send();
window.location.reload();
You are making an asynchronous call. You are making the Ajax request and replacing the page right away! The call to the server is not getting out.
Reload the page when the request is complete.
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4){
window.location.reload(true);
}
};
xmlhttp.send();