[jQuery] Re: loading message shows up after page has loaded

[sdtacoma]

Dude! I think you might have gotten it working. This seems to work on
my end...

http://meded.ucsd.edu/testQuery.cfm





On Oct 21, 4:45 pm, Karl Swedberg  wrote:
> yeah, I see it now. And I see the problem:   
> doesn't appear in the HTML until about line 94,030. You can't block  
> the UI with a div that isn't there, and if you're running your query  
> before you load the div, then it's not going to help much.
>
> Take a look at this page now:http://test.learningjquery.com/testquery.html
> (notice I removed the setTimeout)
>
> Here's some html that you can copy and paste. Just replace the comment  
> with the query:
>
> 
> 
> 
> 
>    block ui 
>    document.documentElement.className =  
> 'js';
>    
>      #uiblocker {
>        display: none;
>      }
>
>      .js #uiblocker {
>        display: block;
>        left: 0;
>        top: 0;
>        width: 100%;
>        height: 100%;
>        position: fixed;
>        cursor: wait;
>        z-index:1001;
>        text-align: center;
>        line-height: 200px;
>        background: #ddd url(ajax-loader.gif) no-repeat 50% 50%;
>      }
>    
>
>    http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js
> " type="text/javascript">
>
>    
>      $(window).bind('load', function() {
>         $('#uiblocker').fadeOut();
>      });
>
>    
> 
> 
>   
>
>    
>
> 
> 
>
> Hope that helps.
>
> --Karl
>
> 
> Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> On Oct 21, 2009, at 11:22 AM, sdtacoma wrote:
>
>
>
> > Yes that is the correct link.
>
> > I copied your example page and added a query to it...
>
> >http://meded.ucsd.edu/testQuery.cfm
>
> > On Oct 15, 2:02 pm, Karl Swedberg  wrote:
> >> Hi Josh,
>
> >> Now I'm really confused. Did you post the wrong link? This is what I
> >> see in the :
>
> >> 
> >> Untitled Document
> >> 
> >> 
> >> document.documentElement.className =
> >> 'js';
> >> 
> >> $(document).ready(function() {
> >>             $.blockUI();
> >>                 $(window).load(function(){unBlockFunction(); });});
>
> >> function unBlockFunction(){
> >>         $.unblockUI();}
>
> >> 
>
> >> Still trying to use blockUI? What happened to the styles?
>
> >> This script should be the first one, right after :
> >> document.documentElement.className =
> >> 'js';
>
> >> Also,  should be in the html, right after
> >> the opening  tag and before your queries.
>
> >> --Karl
>
> >> On Oct 15, 2009, at 4:31 PM, sdtacoma wrote:
>
> >>> Hi Karl,
>
> >>> I believe/hope I did everything that you asked. Problem still
> >>> exists...
>
> >>>http://meded.ucsd.edu/testQuery.cfm
>
> >>> I do appreciate your help!
>
> >>> Josh
>
> >>> On Oct 14, 11:04 am, Karl Swedberg  wrote:
> > Wow, easy there Karl. I was just showing you working examples of  
> > the
> > issue I was experiencing.
>
>  easy there? I was just trying to help. You showed examples that
>  didn't
>  include my suggestions, after we had already established that your
>  first attempts were not going to work.
>
> > Your
> > code does not actually wait for the data to finish loading. It
> > merely
> > unblocks the UI after a period of time. This is not what I want. I
> > want the UI to become unblocked after the page is done loading,  
> > not
> > after a certain period of time passes.
>
>  Exactly. That's why I wrote this...
>
>  Note that I added a setTimeout inside the $(window).load()
>  function
>  to
>  simulate a heavy page.
>
>  It was a demonstration, since I didn't have your queries at my
>  disposal. Feel free to remove the setTimeout. The $
>  (window).bind('load', fn) part should be telling the script to wait
>  until everything is fully loaded before it executes the code inside
>  it
>  (  $('#uiblocker').fadeOut();  )
>
> > Again, the issue I am having is that the UI is not blocked when
> > running queries on the page, one when static content is loading.
>
>  I'm not sure what's going on with your queries. I did notice some  
>  odd
>  stuff, though, when I looked at what was actually coming to the
>  browser inhttp://meded.ucsd.edu/testKarl2.cfm:
>
>  1. You have this :
>
>    href="http://meded.ucsd.edu/meded/meded.css
>  "> before
>
>  before this :
>
>  
>
>  Can you try putting that styesheet reference inside  ?
>
>  2. I doubt this will make a difference, but try putting this line:
>  document.documentElement.className =
>  'js';
>  directly after the  and before you load any styles or other
>  scripts
>
>  3. you have a 

[jQuery] Re: loading message shows up after page has loaded

[sdtacoma]

Hey JMan,

CFFlush was my first attempt at doing this. It worked great, did
exactly what I wanted it to do but it stopped my CFLocation tags from
working (as documented).

AJAX might be the way to go. I was hoping to roll this "loading..."
message out system wide. Going the AJAX route would create a lot more
work for me though.







On Oct 21, 5:50 pm, JMan  wrote:
> I think there is a bit of confusion here as to how Coldfusion works.
> By default the Coldfusion server will return the generated HTML all at
> once. So if you have a long query your not going to get even the first
> bit of the document until the CF server is done with it. What your
> asking your .js to do is when the page begins to load show a loading
> image and when it's done hide it. Well Coldfusion will give your the
> entire document at once, even if there is a huge grid with data in it
> you get all of it at once after CF is done creating it and chances are
> if you have a fast connection even if the document weight is up there
> your not going to get the behavior your looking for.
>
> The reason it works with your images is because they take a bit longer
> to download and they download after the document has been served from
> the CF server. The markup returned from the server tells the browser
> where to load the images from. What you need to do is have the CF
> server stream the document to you as it generates it. This can be done
> using the cflush tag.
>
> http://cfquickdocs.com/cf8/?getDoc=cf#cfflush
>
> if you use this properly you can start sending the headers and stuff
> to the client browser right away and your .js being in the head of the
> document should execute as well.
>
> The other trick would be to use AJAX to load your query result and
> inject it into the page or pass it to some data handling .js. With
> AJAX you can use the events that fire before the request begins and
> after it completes to toggle a neat-o loading image.
>
> HTH
>
> On Oct 21, 8:17 pm, "Rick Faircloth"  wrote:
>
> > Mike!  Crawl back under your rock, you fathead!!!
>
> > There...how's that? :o)
>
> > Rick
>
> > -Original Message-
> > From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> > Behalf Of Mike Alsup
> > Sent: Wednesday, October 21, 2009 7:51 PM
> > To: jQuery (English)
> > Subject: [jQuery] Re: loading message shows up after page has loaded
>
> > > Hope that helps.
>
> > > --Karl
>
> > Bah, this is getting entirely too civil.  Snooze...  :-)

[jQuery] Re: loading message shows up after page has loaded

[JMan]

I think there is a bit of confusion here as to how Coldfusion works.
By default the Coldfusion server will return the generated HTML all at
once. So if you have a long query your not going to get even the first
bit of the document until the CF server is done with it. What your
asking your .js to do is when the page begins to load show a loading
image and when it's done hide it. Well Coldfusion will give your the
entire document at once, even if there is a huge grid with data in it
you get all of it at once after CF is done creating it and chances are
if you have a fast connection even if the document weight is up there
your not going to get the behavior your looking for.

The reason it works with your images is because they take a bit longer
to download and they download after the document has been served from
the CF server. The markup returned from the server tells the browser
where to load the images from. What you need to do is have the CF
server stream the document to you as it generates it. This can be done
using the cflush tag.

http://cfquickdocs.com/cf8/?getDoc=cf#cfflush

if you use this properly you can start sending the headers and stuff
to the client browser right away and your .js being in the head of the
document should execute as well.

The other trick would be to use AJAX to load your query result and
inject it into the page or pass it to some data handling .js. With
AJAX you can use the events that fire before the request begins and
after it completes to toggle a neat-o loading image.

HTH






On Oct 21, 8:17 pm, "Rick Faircloth"  wrote:
> Mike!  Crawl back under your rock, you fathead!!!
>
> There...how's that? :o)
>
> Rick
>
> -Original Message-
> From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
>
> Behalf Of Mike Alsup
> Sent: Wednesday, October 21, 2009 7:51 PM
> To: jQuery (English)
> Subject: [jQuery] Re: loading message shows up after page has loaded
>
> > Hope that helps.
>
> > --Karl
>
> Bah, this is getting entirely too civil.  Snooze...  :-)

[jQuery] Re: loading message shows up after page has loaded

[Rick Faircloth]

Mike!  Crawl back under your rock, you fathead!!!

There...how's that? :o)

Rick

-Original Message-
From: jquery-en@googlegroups.com [mailto:jquery...@googlegroups.com] On
Behalf Of Mike Alsup
Sent: Wednesday, October 21, 2009 7:51 PM
To: jQuery (English)
Subject: [jQuery] Re: loading message shows up after page has loaded


>
> Hope that helps.
>
> --Karl


Bah, this is getting entirely too civil.  Snooze...  :-)

[jQuery] Re: loading message shows up after page has loaded

[Mike Alsup]

>
> Hope that helps.
>
> --Karl


Bah, this is getting entirely too civil.  Snooze...  :-)

[jQuery] Re: loading message shows up after page has loaded

[sdtacoma]

Yes that is the correct link.

I copied your example page and added a query to it...

http://meded.ucsd.edu/testQuery.cfm




On Oct 15, 2:02 pm, Karl Swedberg  wrote:
> Hi Josh,
>
> Now I'm really confused. Did you post the wrong link? This is what I  
> see in the :
>
> 
> Untitled Document
> 
> 
> document.documentElement.className =  
> 'js';
> 
> $(document).ready(function() {
>             $.blockUI();
>                 $(window).load(function(){unBlockFunction(); });});
>
> function unBlockFunction(){
>         $.unblockUI();}
>
> 
>
> Still trying to use blockUI? What happened to the styles?
>
> This script should be the first one, right after :
> document.documentElement.className =  
> 'js';
>
> Also,  should be in the html, right after  
> the opening  tag and before your queries.
>
> --Karl
>
> On Oct 15, 2009, at 4:31 PM, sdtacoma wrote:
>
>
>
> > Hi Karl,
>
> > I believe/hope I did everything that you asked. Problem still
> > exists...
>
> >http://meded.ucsd.edu/testQuery.cfm
>
> > I do appreciate your help!
>
> > Josh
>
> > On Oct 14, 11:04 am, Karl Swedberg  wrote:
> >>> Wow, easy there Karl. I was just showing you working examples of the
> >>> issue I was experiencing.
>
> >> easy there? I was just trying to help. You showed examples that  
> >> didn't
> >> include my suggestions, after we had already established that your
> >> first attempts were not going to work.
>
> >>> Your
> >>> code does not actually wait for the data to finish loading. It  
> >>> merely
> >>> unblocks the UI after a period of time. This is not what I want. I
> >>> want the UI to become unblocked after the page is done loading, not
> >>> after a certain period of time passes.
>
> >> Exactly. That's why I wrote this...
>
> >> Note that I added a setTimeout inside the $(window).load()  
> >> function
> >> to
> >> simulate a heavy page.
>
> >> It was a demonstration, since I didn't have your queries at my
> >> disposal. Feel free to remove the setTimeout. The $
> >> (window).bind('load', fn) part should be telling the script to wait
> >> until everything is fully loaded before it executes the code inside  
> >> it
> >> (  $('#uiblocker').fadeOut();  )
>
> >>> Again, the issue I am having is that the UI is not blocked when
> >>> running queries on the page, one when static content is loading.
>
> >> I'm not sure what's going on with your queries. I did notice some odd
> >> stuff, though, when I looked at what was actually coming to the
> >> browser inhttp://meded.ucsd.edu/testKarl2.cfm:
>
> >> 1. You have this :
>
> >>  >> href="http://meded.ucsd.edu/meded/meded.css
> >> "> before
>
> >> before this :
>
> >> 
>
> >> Can you try putting that styesheet reference inside  ?
>
> >> 2. I doubt this will make a difference, but try putting this line:
> >> document.documentElement.className =
> >> 'js';
> >> directly after the  and before you load any styles or other
> >> scripts
>
> >> 3. you have a 

[jQuery] Re: loading message shows up after page has loaded

[sdtacoma]

Hi Karl,

I believe/hope I did everything that you asked. Problem still
exists...

http://meded.ucsd.edu/testQuery.cfm

I do appreciate your help!

Josh




On Oct 14, 11:04 am, Karl Swedberg  wrote:
> > Wow, easy there Karl. I was just showing you working examples of the
> > issue I was experiencing.
>
> easy there? I was just trying to help. You showed examples that didn't  
> include my suggestions, after we had already established that your  
> first attempts were not going to work.
>
> > Your
> > code does not actually wait for the data to finish loading. It merely
> > unblocks the UI after a period of time. This is not what I want. I
> > want the UI to become unblocked after the page is done loading, not
> > after a certain period of time passes.
>
> Exactly. That's why I wrote this...
>
>  Note that I added a setTimeout inside the $(window).load() function
>  to
>  simulate a heavy page.
>
> It was a demonstration, since I didn't have your queries at my  
> disposal. Feel free to remove the setTimeout. The $
> (window).bind('load', fn) part should be telling the script to wait  
> until everything is fully loaded before it executes the code inside it  
> (  $('#uiblocker').fadeOut();  )
>
> > Again, the issue I am having is that the UI is not blocked when
> > running queries on the page, one when static content is loading.
>
> I'm not sure what's going on with your queries. I did notice some odd  
> stuff, though, when I looked at what was actually coming to the  
> browser inhttp://meded.ucsd.edu/testKarl2.cfm:
>
> 1. You have this :
>
>  href="http://meded.ucsd.edu/meded/meded.css
> "> before
>
> before this :
>
> 
>
> Can you try putting that styesheet reference inside  ?
>
> 2. I doubt this will make a difference, but try putting this line:
> document.documentElement.className =  
> 'js';
> directly after the  and before you load any styles or other  
> scripts
>
> 3. you have a 

[jQuery] Re: loading message shows up after page has loaded

[Mike Alsup]

I'm enjoying this thread.  :-)



On Oct 14, 2:04 pm, Karl Swedberg  wrote:
> > Wow, easy there Karl. I was just showing you working examples of the
> > issue I was experiencing.
>
> easy there? I was just trying to help. You showed examples that didn't  
> include my suggestions, after we had already established that your  
> first attempts were not going to work.
>
> > Your
> > code does not actually wait for the data to finish loading. It merely
> > unblocks the UI after a period of time. This is not what I want. I
> > want the UI to become unblocked after the page is done loading, not
> > after a certain period of time passes.
>
> Exactly. That's why I wrote this...
>
>  Note that I added a setTimeout inside the $(window).load() function
>  to
>  simulate a heavy page.
>
> It was a demonstration, since I didn't have your queries at my  
> disposal. Feel free to remove the setTimeout. The $
> (window).bind('load', fn) part should be telling the script to wait  
> until everything is fully loaded before it executes the code inside it  
> (  $('#uiblocker').fadeOut();  )
>
> > Again, the issue I am having is that the UI is not blocked when
> > running queries on the page, one when static content is loading.
>
> I'm not sure what's going on with your queries. I did notice some odd  
> stuff, though, when I looked at what was actually coming to the  
> browser inhttp://meded.ucsd.edu/testKarl2.cfm:
>
> 1. You have this :
>
>  href="http://meded.ucsd.edu/meded/meded.css
> "> before
>
> before this :
>
> 
>
> Can you try putting that styesheet reference inside  ?
>
> 2. I doubt this will make a difference, but try putting this line:
> document.documentElement.className =  
> 'js';
> directly after the  and before you load any styles or other  
> scripts
>
> 3. you have a 

[jQuery] Re: loading message shows up after page has loaded

[Karl Swedberg]

Wow, easy there Karl. I was just showing you working examples of the
issue I was experiencing.


easy there? I was just trying to help. You showed examples that didn't  
include my suggestions, after we had already established that your  
first attempts were not going to work.



Your
code does not actually wait for the data to finish loading. It merely
unblocks the UI after a period of time. This is not what I want. I
want the UI to become unblocked after the page is done loading, not
after a certain period of time passes.


Exactly. That's why I wrote this...


Note that I added a setTimeout inside the $(window).load() function
to
simulate a heavy page.


It was a demonstration, since I didn't have your queries at my  
disposal. Feel free to remove the setTimeout. The $ 
(window).bind('load', fn) part should be telling the script to wait  
until everything is fully loaded before it executes the code inside it  
(  $('#uiblocker').fadeOut();  )



Again, the issue I am having is that the UI is not blocked when
running queries on the page, one when static content is loading.



I'm not sure what's going on with your queries. I did notice some odd  
stuff, though, when I looked at what was actually coming to the  
browser in http://meded.ucsd.edu/testKarl2.cfm:


1. You have this :

http://meded.ucsd.edu/meded/meded.css 
"> before


before this :



Can you try putting that styesheet reference inside  ?

2. I doubt this will make a difference, but try putting this line:
document.documentElement.className =  
'js';
directly after the  and before you load any styles or other  
scripts


3. you have a