JavaScript Alert simulation?

[SeanDagger]

I have a small problem with a JavaScript function which is giving bizarre results.

I am working with SalesForce S-controls. The primary language used to create the pages is JavaScript.

I am displaying a page where data is queried from a database and displayed. (This function is called on an onchange of a selectbox). I have a function which:
1) Unhides a div displaying "Loading - Please wait"
2) Gets the data from the database
3) Calls other functions such as display data
4) Once data loaded, hide the div again.

The strange thing happening is that it will only work if I put an alert in the code (see code below). With the alert pop up, it shows the div, gets the data, and hides the div when data is displayed. If I comment out the alert call, it does not show or hide the div again, but the page will still display the results.

Is there anyway to simulate an alert action without popping up a message? (no user interaction needed)? I'm banging my head on this as very confusing.

My code is as follows:

function renderPage() {
document.getElementById("loadingAlert").innerHTML = "Loading new data - Please wait.";
alert('show the loading alert whilst getting data');
top.events = new Array();
top.eventsMatrix = new Array();
top.maxEvents = 2;
top.firstEventHour = 8;
top.lastEventHour = 20;
top.tasks = new Array();
sforce.connection.init("{!API.Session_ID}", "{!API.Enterprise_Server_URL_90}");
document.getElementById("devName").innerHTML = top.devName;
document.getElementById("calendarDate").innerHTML = getFormattedCalendarDate(top.selecteddate);
for (var i = 0; i < 50; i++) {
top.eventsMatrix = new Array()
for (var j = 0; j < 50; j++) {
top.eventsMatrix[j] = 0;
}
}
var t = 0;
for (var i = 0; i < 50; i++) {
if (i % 2 == 0) {
top.events[t + ":00"] = new Array();

} else {
top.events[t + ":30"] = new Array();
t++;
}
}
getEvents();
displayEvents();
getTasks();
displayTasks();
createHoverDivs();
alert('got the data - now hide loading alert');
document.getElementById("loadingAlert").innerHTML = "";
}

 

[nickdel]

Sean, is it possible it's just displaying the data so quickly that you dont actually see the div appear and disappear? Best way to test is take out the last nit of code " document.getElementById("loadingAlert").innerHTML ="""

Nick

 

[SeanDagger]

Thank you for such a quick reply. I commented out the bit of code to hide the div and it does still show. Maybe the problem is something else as the pages takes about 5 seconds for the data to re-render. When you make a selection on the selectbox, the browser hangs for approx 5 seconds (the selectbox remains open until the page re-renders). Not sure what else the problem could be?

Is there a quick timeout delay I could maybe use that will show it for 5 seconds?

Sean.

 

[nickdel]

Sean, how I would normally go about displaying a loading screen is have the server render it. What I mean by this is have your serverside code display the loading div and then (important part) flush the response. I'm not sure how to do this in PHP but in ASP it's just response.flush.
What this does is basically sends everything it currently has to the browsers, so in our case, all we've done is create a waiting screen which will then be displayed. Then the server will continue to compile the rest of the page, at the end of your code flush again and put a bit of javascript in that will hide the original loading screen.

Hope that makes sense! I could write you an example in ASP if you think it would help with the logic, unfortunately I dont do PHP.

Nick

 

[SeanDagger]

Hi

I wish it was ASP as I have done it before at my old workplace. I am familiar with the method you described. As I am using SalesForce to interact with the server (Apex?), I'm not sure if my problem is serverside or the Client JavaScript?

I have also noticed a method using something called dojo widget? totally new to me and my experimentations with it dit not work. an example of this is the tabs at:

http://www.salesforce.com/appexchange/detail_overview.jsp?id=a0330000002foeKAAQ

Do you have a quick example of code that would set a delay of around 5 seconds? I could try that just to see what happens? Not the best solution but worth a try.

 

[nickdel]

Sean, although it is nice sometimes to display a message to a user I really dont see the point in delaying them an additional 5 seconds just to display a message. However here's a function that will set a delay for you.

function pauseproc(millis) 
{
var date = new Date();
var curDate = null;

do { curDate = new Date(); } 
while(curDate-date < millis);
}

then call it:

pauseproc(5000) //5000=5 seconds

Nick

 

[SeanDagger]

I know what you mean but you know what users are like? If the page hangs and looks like it is not doing anything, users start clicking everywhere to see if browser crashed.

I have put a pause delay code in to see what happens and it is still resulting in my original problem posted. it just won't show and hide the div (even with the delay). Does the alert function do something to the browser to stop all activities until a user clicks ok? If I could simulate this without an alert, problem would be sorted.

I have run out of ideas.

 

[nickdel]

Sean, the page is hanging because it is loading. The alert must flush whats in the internal buffer. I'm not entirely sure of any other way to do this using JS.