Show "Processing please wait" while CFGRID getting ready to load

I have a grid that takes a while to load and I need a message displayed to the user. I tried using the onload parameter to hide a div which displayed "Processing Please wait" but apparently it thinks the grid is loaded immediately.

I want the "Processing Please wait"  to display until the first page at lease is populated.
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

You can have a Please Wait div hidden on the page, when the user presses the button to do whatever form action is requested, you show the div onClick before submitting the form..  Since form processing takes place while the user is looking at the same page, he/she will see the div until processing is done.. when the pages to the new page, the div will no longer be there..
kcjuliffAuthor Commented:
There is no form to be submitted!
OnLoad should work.  Please post your code and CF version.
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

oh... I guess you're just talking about loading a slow page...  

So, in your case the DIV is started out displayed and onLoad hides it... onLoad processes at the end .. so I agree with agx, seems like it would work.

kcjuliffAuthor Commented:
Unload doesn't work. CF version is 9.1. I will need to modify the code to simplify it for you to look at in a meaningful way.
kcjuliffAuthor Commented:

<cfform name="parkForm">
    <cfinput type="hidden" name="pages" id="pages" value="10">
	<cfgrid   bindonload="true" stripeRows="yes"    stripeRowColor="silver" width="780" pageSize="50" format="html" name="parkGrid"   bind="cfc:components.shippedx.getShipped({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection},getPageSize(), #cus#, getNumDays())">

		 <cfgridcolumn name="wo" width="40" header="Order" type="numeric" />
		 <cfgridcolumn name="job_name" width="160" header="Job"   />
		 <cfgridcolumn name="po" width="80" header="PO" />
		 <cfgridcolumn name="boxes" width="60" header="Boxes" type="numeric" dataAlign = "right"  />
		 <cfgridcolumn name="carrier" width="60" header="Carrier" type="numeric" dataAlign = "right"  />

		 <cfgridcolumn name="tracknr" width="130" header="Tracking ##"   />
		 <cfgridcolumn name="trackit" width="50" header="Track"   /> <cfgridcolumn name="box_sent" width="130" header="When"   />

		 <cfgridcolumn name="tracknr" width="40" header="Email"   />


Open in new window

I don't see the code you're using to display a status message. But this example works fine for me w/CF9.0.1.  Adapted from Gary Gilbert's Technology Blog: Coldfusion 8's CFGRID

CFGrid Page
<script type="text/javascript">
	function hideStatus() {
		var elem = document.getElementById('statusMessage'); = "none";
		alert('hiding grid_Tables');
<div id="statusMessage" style="width: 100%; height: 100%; display:block;">
	<h1>Please wait while grid loads</h1>
<cfform name="tableform">
		format="html" name="parkGrid" 
                        <cfgridcolumn name="ARTISTID" display="No"/>
                        <cfgridcolumn name="FIRSTNAME" header="FIRSTNAME" >
                        <cfgridcolumn name="LASTNAME" header="LASTNAME" >
                        <cfgridcolumn name="CITY" header="CITY" >
                        <cfgridcolumn name="STATE" header="STATE" >

Open in new window

Artists.cfc  (uses sample CF database)
	<cffunction name="getArtists" access="remote">
        <cfargument name="page" required="yes">
        <cfargument name="pageSize" required="yes">
        <cfargument name="gridsortcolumn" required="yes">
        <cfargument name="gridsortdirection" required="yes">
		<cfset var members = "" />
	    <cfquery name="members" datasource="cfartgallery">
	        <cfif gridsortcolumn neq ''>
	        order by #gridsortcolumn# #gridsortdirection#
	    <!--- deliberately wait 3 seconds to show it works --->
	    <cfset sleep(3000)>
	    <cfreturn queryconvertforgrid(members,page,pagesize)/>

Open in new window


Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kcjuliffAuthor Commented:
It isn't there. I did have onload = 'showproc()' in the cfgrid tag and all showproc did was show an alert. This was for testing. The alert showed before the grid populated.
>  <cfset sleep(3000)>

Not sure why.  The example above works fine for me. I deliberately added a 3sec delay to test it.

kcjuliffAuthor Commented:
I don't want to slow the page further just to show the processing message!
No, you're misunderstanding the example! I added the sleep() deliberately to demonstrate that the "please wait ..." message is displayed until the grid is actually loaded.  Obviously you would not do that in your actual code.  

Did you try the example?
kcjuliffAuthor Commented:
Yes but sleep() doesn't simulate cfgrid.
Well... what were the results?

> Yes but sleep() doesn't simulate cfgrid.

Huh? The purpose is to simulate a slow loading grid. There's usually only 2 reasons a grid doesn't load right away

1) either the whole page doesn't load right away due to a submit (which you said is NOT the case) OR ...
2) it takes a while to retrieve the data for the grid.  

The sleep() simulates the second case - slow loading data.  It works perfectly.  If things are working differently for you, I suspect you're using different code.  So please provide your exact code and describe what it's doing wrong.  
kcjuliffAuthor Commented:
I provided the exact code. Sleep and CFGRID each behave quite differently.

CFGRID actually draws and empty grid first before it populates it. For some reason, the onload event initiates upon the rendering, not upon  populating, the grid. Hence the question.

I too, can use cfsleep effectively, but that isn't what the question was about.

kcjuliffAuthor Commented:
PS I meant "CFGRID actually draws an empty grid".

This question is about CFGRID, not CFSLEEP! The two are not interchangable.
> PS I meant "CFGRID actually draws an empty grid".

CFGrid always draws an empty grid at first while it waits for the data to arrive.  Once the data is available, then it's populated.  

> The two are not interchangable.

No one said they are. You're misunderstanding the purpose of the example! We don't have access to your database, lol.   So I provided a standalone example that does exactly what you asked:  how do I display a "please wait .." message while waiting for a grid to load.

I'm trying to help reproduce your issue, but it's very difficult as you haven't given any indication you've even tried the example or what the results where. Maybe somebody else will have better luck.

Good Luck!
Our last posts crossed

> I provided the exact code.

No, the code used to display and hide the status message was missing.  But we seem to be on different wavelengths. So maybe another expert can help you figure things out.

Good luck!
Gurpreet Singh RandhawaCEOCommented:
ok, well let me know if you want to display the loading icon or please wait inside the cfgrid, if that is the case, that is very Simple, just you have to use the cfajaxonLoad function

do it like this, i am doing in EXT JS

addTasks = function() {
gTask = ColdFusion.Grid.getGridObject(yourgridname);
var ds = gTask.getStore();
gridEl = gTask.getGridEl();
		gTask.loadMask = true;
		gTask.getGridEl().mask("Please wait - loading data ...");

now before your cfgrid call, just do it like this
<cfset ajaxOnLoad("addTasks")> 
<cfgrid>goes here</cfgrid>

Open in new window

This will display the Please wait icon inside the cfgrid while it is loading and it will load in the middle

Gurpreet Singh RandhawaCEOCommented:
please note i am using cf9, if u need cf8 relevant code, let me know
Gurpreet Singh RandhawaCEOCommented:
Have you tried it. Let me know If you are facing any issue
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.