• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 195
  • Last Modified:

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.
0
kcjuliff
Asked:
kcjuliff
  • 8
  • 7
  • 3
  • +1
1 Solution
 
gdemariaCommented:
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..
0
 
kcjuliffAuthor Commented:
There is no form to be submitted!
0
 
_agx_Commented:
OnLoad should work.  Please post your code and CF version.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
gdemariaCommented:
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.



0
 
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.
0
 
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"   />

    </cfgrid>
</cfform>

Open in new window

0
 
_agx_Commented:
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');
		elem.style.display = "none";
		alert('hiding grid_Tables');
	}
</script>
<div id="statusMessage" style="width: 100%; height: 100%; display:block;">
	<h1>Please wait while grid loads</h1>
</div>
<cfform name="tableform">
    <cfgrid 
		format="html" name="parkGrid" 
		pagesize="50" 
		bindOnload="true"
		stripeRows="yes"
		stripeRowColor="silver"			
		onLoad="hideStatus"
		selectmode="row"
		bind="cfc:artists.getArtists({cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})">
                        <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" >
    </cfgrid>
</cfform>

Open in new window


Artists.cfc  (uses sample CF database)
<cfcomponent>
	<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">
	        SELECT ARTISTID, FIRSTNAME, LASTNAME, CITY, STATE
	        FROM ARTISTS
	        <cfif gridsortcolumn neq ''>
	        order by #gridsortcolumn# #gridsortdirection#
	        </cfif>
	    </cfquery>
	    
	    <!--- deliberately wait 3 seconds to show it works --->
	    <cfset sleep(3000)>
	    
	    <cfreturn queryconvertforgrid(members,page,pagesize)/>
    </cffunction>
</cfcomponent>

Open in new window

0
 
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.
0
 
_agx_Commented:
>  <cfset sleep(3000)>

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

0
 
kcjuliffAuthor Commented:
I don't want to slow the page further just to show the processing message!
0
 
_agx_Commented:
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?
0
 
kcjuliffAuthor Commented:
Yes but sleep() doesn't simulate cfgrid.
0
 
_agx_Commented:
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.  
0
 
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.

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

This question is about CFGRID, not CFSLEEP! The two are not interchangable.
0
 
_agx_Commented:
> 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!
0
 
_agx_Commented:
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!
0
 
Gurpreet Singh RandhawaWeb DeveloperCommented:
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 ...");
		ds.on('load',function(){
			gTask.getGridEl().unmask();
        }); 
}

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

0
 
Gurpreet Singh RandhawaWeb DeveloperCommented:
please note i am using cf9, if u need cf8 relevant code, let me know
0
 
Gurpreet Singh RandhawaWeb DeveloperCommented:
Have you tried it. Let me know If you are facing any issue
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 8
  • 7
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now