Immediately display changes to an HTML element

[Hoss]

Hello all,

Ill try and make this short and sweet. I have the following Javascript
being executed when the user clicks a button

function myFunc()
{
-- Get some values from elements on the page

-- Send those values to the server using Ajax and retrieve a
DataTable.

-- Render the Datatable on the page for the user to view
}

This works wonderfully, except when im trying to retrieve a large
dataset (after, say 100 rows it begins to slow down. Under certain
circumstances I need to retrieve 500+). Now, im already working on
speeding up this process, but there is always going to be some waiting
if your asking for a ton of data. What im wanting to do is display a
message on the screen saying "Searching ... " and then change it to
"Complete .. " When im finished rendering the table to the screen. So I
made the following modifications

function myFunc()
{
document.getElementById("message").innerHTML = "Searching...";

-- Get some values from elements on the page

-- Send those values to the server using Ajax and retrieve a
DataTable.

-- Render the Datatable on the page for the user to view

document.getElementById("message").innerHTML = "Search
Complete.";
}

The "message" element is simply a <span>.

Problem is neither of those messages are being displayed until the
entire function is done.

I need to be able to display the first message right off, before
proceeding with the rest of the operation.

Any help greatly appreciated.

 

[Csaba Gabor]

function myFunc() {
document.getElementById("message").innerHTML = "Searching...";
-- Get some values from elements on the page
-- Send those values to the server using Ajax and retrieve a
DataTable.

-- Render the Datatable on the page for the user to view
document.getElementById("message").innerHTML = "Search
Complete.";
}

Problem is neither of those messages are being displayed until the
entire function is done.

Assuming you are correct in your analysis, one way of overcoming this
to defer the processing a bit:

function myFunc() {
document.getElementById("message").innerHTML = "Searching...";
window.setTimeout(restOfMyFunc, 100); }

function restOfMyFunc() {
-- Get some values from elements on the page
-- Send values to server using Ajax and retrieve a DataTable.
-- Render the Datatable on the page for the user to view
document.getElementById("message").innerHTML = "Search Complete.";
}

Csaba Gabor from Vienna

 

[Richard Cornford]

Hoss wrote:

-- Send those values to the server using Ajax and retrieve a
DataTable.

... . So I made the following modifications

function myFunc()
{
document.getElementById("message").innerHTML = "Searching...";

-- Get some values from elements on the page

-- Send those values to the server using Ajax and retrieve a
DataTable.

-- Render the Datatable on the page for the user to view

document.getElementById("message").innerHTML = "Search
Complete.";
}

The "message" element is simply a <span>.

Problem is neither of those messages are being displayed until
the entire function is done.

I need to be able to display the first message right off,
before proceeding with the rest of the operation.

You are using synchronous XML HTTP requests, which block the browsers UI
until the response is returned, and from that point on you are busily
processing the returned data, which doesn't give the browser much room
to be updating the display until it is done.

You solve this problem by using asynchronous requests instead, as then
the browser gets the chance to update the display while the XML HTTP
request is doing its round trip to the server.

Richard.

 

[Hoss]

Richard,

Thank you for your reply. However, I am making my request to the server
using Ajax ... which is by definition asynchronous. Furthermore, the
crucial line of code is being executed before the server request is
ever started. I set the HTML element of hte page, THEN Im sending a
request to the server. So im not sure what you mean ...

Assuming you were right, and I need to make an asynchronous request,
how would do go about that?

Also, the other response was quite a hack and doesnt work besides ^_^

 

[Richard Cornford]

Thank you for your reply. However, I am making my request to
the server using Ajax ... which is by definition asynchronous.

You would think so, but in reality quite a lot of what is called AJAX is
using synchronous requests. Probably because its authors cannot cope
with multiple sources of asynchronous input (the user and the server) or
the possibility that responses from the server could follow a different
sequence from the requests made for them.

The symptoms you describe should not be able to exist if your requests
really are asynchronous, but if you cannot be certain I definitely
cannot without seeing your code.

Furthermore, the crucial line of code is being executed before
the server request is ever started.

That would not necessarily matter with a synchronous request.

I set the HTML element of hte page, THEN Im sending a request
to the server. So im not sure what you mean
...

Assuming you were right, and I need to make an asynchronous
request, how would do go about that?

By setting the third argument to the XML HTTP request's - open - method
to boolean true, and having an appropriate handler to deal with the
response.

Also, the other response was quite a hack and doesnt work
besides ^_^

It is a hack but it does work, if you code it right. Though it is not
the best solution to the problem.
<snip>

Please don't top-post to comp.lang.javascirpt.

Richard.

 

[Jonas Raoni]

Thank you for your reply. However, I am making my request to the server
using Ajax ... which is by definition asynchronous.

Not at all, it can behave like a normal or wait-for thread.

The "normal thread" will keep running and, when it finishes processing
it will "warn" you, the other one is similar to a function, it will stop
your code flow until it finishes.

Both of them have advantages, but the asynchoronous one should be chosen
always, since the synchronous one is a kind of "while(initialTime +
delay > finalTime);"

Assuming you were right, and I need to make an asynchronous request,
how would do go about that?

The last parameter of the "open" method is a boolean which defines if
the calling will be asynchronous (true) or not (false).