Ajax spinner

Scriptcase 8 Discussion
#1

Has anyone successfully implemented an ajax spinner in SC?

I am producing a large PDF that takes about 30 seconds and would like to indicate to the user that it hasn’t hung or stopped working after they click the “Go” button.

Any advice appreciated.

#2

do you mean like a progress bar or “loading” object until the page is loaded? I guess there are few threads talk about that

#3

Yep, that’s exactly what I mean.

The problem (for me anyway) is in trying to get it to display while the pdf is being built (PHP) and not after the page is rendered after all processing is finished!!

It’s a bit too late at that stage :slight_smile:

I did search and found no discussion here. Any pointers or links?

#4

hi

yes this one I remember sekr had something similar perhaps it helps somehow

http://www.scriptcase.net/forum/showthread.php?8059-quot-Loading-quot-label-when-loading-the-grid

or see this may help

http://www.scriptcase.net/forum/showthread.php?7643-Progress-Bar-Example

#5

I got this done with help from sekr (thanks sekr) in this thread…

http://www.scriptcase.net/forum/showthread.php?8059-quot-Loading-quot-label-when-loading-the-grid

This is what I wanted and how I did it…

I have a control application that takes in some information before I sc_redir(my_blank_application) to produce the PDFs (hand coded). The blank application takes about thirty seconds to complete and I wanted some kind of indication to the end user that the application hadn’t stopped working.

In the control application -> Events -> onApplicationInit I put (obviously doesn’t have to be as fancy as this)…

[head_loading]=’
<style>
.spinner {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 300;
margin-left: auto ;
margin-right: auto ;
border-radius: 25px;
font: 15px arial, sans-serif;
}
</style>
<script type=“text/javascript” language=“JavaScript”>
function ShowContent(d) {
document.getElementById(d).style.display = “block”;
}
</script>
<div id=“spinner” class=“spinner” style=“display:none;”>
Producing reports. Please wait… <img id=“img-spinner” src="…/_lib/img/spinner2.gif"/>
</div>
<script type=“text/javascript” language=“JavaScript”>
ShowContent(“spinner”);
</script>’;

In the control application -> Events -> onValidateSuccess I put…

echo [head_loading];
sc_redir(my_blank_application);

Now, immediately I click “Ok” in the control application, the spinner <div> displays and remains there until the blank application completes it’s job.

Job done!!

1 Like
#6

hello and sorry to open this case again after like 2 years, i’m trying this now with control application and i have my code all set in OnValidateSuccess event which is taking time like 10-12 seconds… when putting the spinner code in onInit and call it via onValidateSuccess it still doens’t show until the executin of the code in the events complete!!! so the 12 seconds passes then resutls of the application is given,… then the spinner works… any idea?