Update of screen while Javascript still running

[martijn claassen]

I'm writing a small piece of code for a login procedure.
The techniques used are HTML, Javascript and Ajax.
The latter one to reduce jumping from one .html to another and therefore avoiding anoying flickering of the screen.
In the code below, there is a call to a MySQL database ( x_check_member_id) , which can take some time for various reasons. Therefore I want to inform the user that the request is being processed. (see: working... in the code below). If the query has been done, I simply want to display 'ready'. (see code). Now the message "working..." does not appear, even if the query takes, say, 5 seconds. It is obviously a matter of screen-update but I don't know how to solve it. Any ideas? You're great!

function js_check_member_id() {
// check member in the database and change index_status according to results.
var member_id, vPassword;
document.getElementById("info_feedback").innerHTML = '<span class="vet green">working...</span>';
member_id = document.getElementById("member_id").value;
vPassword = document.getElementById("vpassword").value;
x_check_member_id(member_id, vPassword, js_change_status);
document.getElementById("info_feedback").innerHTML = '<span class="vet green">ready</span>';

}

The url: http://www.teerak.eu/new/

[Dal]

Well, err wheres the AJAX because I think thats where the problem lies. Your status probably isnt being returned correctly.

Also, how many times do you call the ajax method, I know I had problems in the past calling more than 1 ajax request at the same time. I never really looked into it so it might have just been my code but its stuck in the back of my mind so I thought Id mention.

kind regards
Dal

[martijn claassen]

Thanks for your reply Dal,

Well, the call to the Ajax function in fact has little to do with it. It just takes some time to process, but to illustrate the problem, it could have been a loop counting for 1 to 10000000, as long as it takes some time.
The problem is, that I don't see the text 'working...'.

As for the issue of calling more then one Ajax request at the same time. In the past I had this problem as well. I now use a small library call xajax.php with which I have have no problems at all.

Well, err wheres the AJAX because I think thats where the problem lies. Your status probably isnt being returned correctly.

Also, how many times do you call the ajax method, I know I had problems in the past calling more than 1 ajax request at the same time. I never really looked into it so it might have just been my code but its stuck in the back of my mind so I thought Id mention.

kind regards
Dal

[Dal]

Well in that case, a second look at the code shows me that you append "working..." to the element then "ready" after it; Logic flow suggests it works right;

document.getElementById("info_feedback").innerHTML = 'Working...';
document.getElementById("info_feedback").innerHTML = 'ready';

Wouldnt you need to supply these status remarks in an if clause?

if(working = true)document.getElementById("info_feedback").innerHTML = 'Working...';
if(working = false)document.getElementById("info_feedback").innerHTML = 'ready';

Or maybe I missed something ...again?
let me know.
Kind regards
Dal

[Dal]

Can you provide the code for x_check_member_id? Maybe theres something there?

[martijn claassen]

That makes things more complicated.
Let me wrote a pseudocode, with comments.

document.getElementById("info_feedback").innerHTML = 'Working...';
// Here I want to display "working...", so the user is informed.

... now here is a process that takes some time....

document.getElementById("info_feedback").innerHTML = 'ready';
// Here I want to inform that the process has been done.

All I see, is 'ready' on the screen.
So, before I enter the process that takes some time, I want to update the screen, so the user is informed that this process might take some time.

Best regards, Martijn.

Well in that case, a second look at the code shows me that you append "working..." to the element then "ready" after it; Logic flow suggests it works right;

document.getElementById("info_feedback").innerHTML = 'Working...';
document.getElementById("info_feedback").innerHTML = 'ready';

Wouldnt you need to supply these status remarks in an if clause?

if(working = true)document.getElementById("info_feedback").innerHTML = 'Working...';
if(working = false)document.getElementById("info_feedback").innerHTML = 'ready';

Or maybe I missed something ...again?
let me know.
Kind regards
Dal

[Dal]

Can I just clarify before I go and test the problem by writting some example code that the element info_feedback is actually writtable via a .innerHTML rather than .value?

[Dal]

Sorry would have posted sooner except the I couldnt reply without this error message;
1. Board will be closed for next 5 minutes for some routine maintenance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//<![CDATA[

function changestate()
{
    document.getElementById('state').innerHTML = "working";
    
    for(n=0;n<=10000000;n++){
        if(n==10000000) alert("Done");
    }
    document.getElementById('state').innerHTML = "ready";
}

//]]>
</script>
</head>

<body>

<div id="state" onclick="changestate()">Started</div>
</body>
</html>

I coded this and reproduced the problem. Now, it seems that the function does something that Ive never encountered before in that the changes seem to bunch up and complete when all other things have completed. Ill mess about with this some more and get back hopefully but if anyone else knows why javascript does this or maybe suggest I get some sleep if I missed something stupid

Kind regards
Dal

[Dal]

Right, seems that innerHTML is more complicated than assigning value. Here the script that should help you solve your problems; you just need to show a textbox with the ajax status. (You could maybe even use an image and change the .src with different images to represent waiting and ready)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//<![CDATA[

function AjaxGather()
{
    document.getElementById('txtbox').value = "working";
    for(n=0;n<=10000000;n++){
        if(n==10000000) alert("Done");
    }
    document.getElementById('txtbox').value = "ready";
}

//]]>
</script>
</head>

<body>

<div id="state" onclick="AjaxGather();">Click here</div>
<input type="text" id="txtbox" />
</body>
</html>

Hope this helps and good luck
Dal

[martijn claassen]

Yes, Dan. This works!
Although it makes the update of other parts of the screen a bit more complicated, it is a solution for me.
It seems that .innerHTML property is treated in another way that the .value property.

Thanks very much for you help!!
Take care, Martijn.