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 :
<link rel="stylesheet" type="text/css" href="http://meded.ucsd.edu/meded/meded.css
"> before
before this :
<!DOCTYPE html>
Can you try putting that styesheet reference inside <head> ?
2. I doubt this will make a difference, but try putting this line:
<script type="text/javascript">document.documentElement.className =
'js';</script>
directly after the <title> and before you load any styles or other
scripts
3. you have a <style> tag inside the <body>. Again, might not make a
difference, but worth moving to the <head>
Hope that helps.
--Karl
On Oct 14, 2009, at 12:00 PM, sdtacoma wrote:
Wow, easy there Karl. I was just showing you working examples of the
issue I was experiencing.
I have applied the code that you sent me and it does work, kinda. 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.
http://meded.ucsd.edu/testKarl.cfm (your code as-is)
http://meded.ucsd.edu/testKarl2.cfm (your code with a query. Does not
block the UI while the query is being run)
http://meded.ucsd.edu/testKarl3.cfm (your code with images)
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.
On Oct 13, 12:14 pm, Karl Swedberg <k...@englishrules.com> wrote:
You're not using the script and styles I demonstrated in my demo
page.
You're using the blockui plugin instead. As I explained before,
you're
not going to get it to work if you have your script inside a document
ready block because the DOM itself is the slow part (when running the
SQL query). When the DOM is simple/small, as it is with your big
image
example, then it's fine.
If you're willing to try my suggestion, I'm happy to continue helping
you. Otherwise, good luck.
--Karl
On Oct 13, 2009, at 1:59 PM, sdtacoma wrote:
Hello,
Your example page does work as it should. Now replace the "Lorum
Ipsum" content with content from a SQL Query and it won't work the
same way. (at least that is the issue I am having)
-http://meded.ucsd.edu/testQuery.cfm
(does not work as expected, doesn't show the loading message while
the
query is running)
-http://meded.ucsd.edu/testStatic.cfm
(does work as expected, shows the loading message while the images
are
loading)
Josh
On Oct 12, 5:30 pm, Karl Swedberg <k...@englishrules.com> wrote:
You've lost me there. If you're trying to block the page based on
some
user interaction, then the blockui plugin should work just fine. I
thought the problem you were having, though, was with the page not
being blocked immediately when the user first visits the page. You
asked about document ready and whether it could fire sooner. I
offered
a solution that didn't rely on document ready so that the ui
would be
blocked immediately until everything was loaded.
I put a test page up so you can see that it does, in fact, solve
the
problem that you originally
presented:http://test.learningjquery.com/blockui.html
Note that I added a setTimeout inside the $(window).load() function
to
simulate a heavy page.
--Karl
____________
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Oct 12, 2009, at 4:59 PM, sdtacoma wrote:
Thanks for you help Karl but that didn't seem to solve my problem.
I have more info to add to the issue though. The "Loading..."
message
works great if there are say, images on the page loading. It does
NOT
work if I am waiting for a query to finish and it's results to be
displayed back to the page.
Any idea why it would work for one and not the other or how I can
get
it to work with a query too?
DOES NOT WORK:
<script language="javascript" type="text/javascript" src="/tools/
js/
jquery/jquery_1.2.4b.js"></script>
<script language="javascript" type="text/javascript" src="/tools/
js/
jquery/jquery.blockui.js"></script>
<script>
$(document).ready(function() {
$.blockUI();
$(window).load(function(){unBlockFunction(); });
});
function unBlockFunction(){
$.unblockUI();
}
</script>
<cfquery datasource="#application.dsn#" name="qSelect"
maxrows="100">
select *
from user_info
</cfquery>
<cfdump var="#qSelect#">
DOES WORK:
<script language="javascript" type="text/javascript" src="/tools/
js/
jquery/jquery_1.2.4b.js"></script>
<script language="javascript" type="text/javascript" src="/tools/
js/
jquery/jquery.blockui.js"></script>
<script>
$(document).ready(function() {
$.blockUI();
$(window).load(function(){unBlockFunction(); });
});
function unBlockFunction(){
$.unblockUI();
}
</script>
<img src="http://wnsl.physics.yale.edu/media/
education_full.jpg"><br>
<img src="http://sprottshaw.com/uploads/images/Misc.%20Images/
242351742.jpg"><br>
<img src="http://www.nfq.ie/nfq/en/images/FanDec2006.jpg";><br>
<img src="http://www.efytimes.com/admin/useradmin/photo/The%20Mobile
%20Computer%20Education%20Bus.jpg"><br>
On Oct 10, 9:54 am, Karl Swedberg <k...@englishrules.com> wrote:
document.ready fires when the DOM is fully registered. If you
have
large images in the document, document.ready doesn't wait for
those
to
completely load. So, it's typically earlier than window.onload,
but
it
isn't going to fire before you see stuff on the page.
I haven't tested this at all, and I'm just creating this in
email, so
proceed with caution ... but you might want to consider putting
something like this in the <head>:
<script type="text/
javascript">document.documentElement.className =
'js';</script>
and in your stylesheet do this:
#uiblocker {
display: none;
}
.js #uiblocker {
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
cursor: wait;
z-index:1001;
}
and in your html, put this right after the opening <body> tag:
<div id="uiblocker"></div>
and in a javascript file, do this:
$(window).bind('load', function() {
$('#uiblocker').hide();
});
So, that /should/ work. For IE6 support, you'll need to either
simulate position: fixed with a css expression or change it to
position: absolute and hope for the best.
Hope that helps.
--Karl
____________
Karl Swedbergwww.englishrules.comwww.learningjquery.com
On Oct 9, 2009, at 2:27 PM, sdtacoma wrote:
Hello,
I am using jQuery and BlockUI to display a "Loading..."
message to
the
user while the page is loading.
The problem is that the "Loading..." message seems to show up
AFTER
the page has loaded, not during load. Shouldn't the
document.ready
fire sooner than that?
What am I doing wrong?
<script>
$(document).ready(function() {
$.blockUI();
setTimeout($.unblockUI, 2000);
});
</script>
![http://www.nfq.ie/nfq/en/images/FanDec2006.jpg"](http://www.nfq.ie/nfq/en/images/FanDec2006.jpg"){kind=link}