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 <k...@englishrules.com> 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 : > > <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}