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 <k...@englishrules.com> wrote: > yeah, I see it now. And I see the problem: <div id="uiblocker"></div> > 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: > > <!DOCTYPE html> > <html lang="en"> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> > <title>block ui </title> > <script type="text/javascript">document.documentElement.className = > 'js';</script> > <style type="text/css"> > #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%; > } > </style> > > <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.js > " type="text/javascript"></script> > > <script type="text/javascript"> > $(window).bind('load', function() { > $('#uiblocker').fadeOut(); > }); > > </script> > </head> > <body> > <div id="uiblocker"></div> > > <!-- RUN YOUR QUERY HERE --> > > </body> > </html> > > 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 <k...@englishrules.com> wrote: > >> Hi Josh, > > >> Now I'm really confused. Did you post the wrong link? This is what I > >> see in the <head>: > > >> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > >> <title>Untitled Document</title> > >> <script language="javascript" type="text/javascript" src="/ > >> jquery_1.2.4b.js"></script> > >> <script language="javascript" type="text/javascript" src="/ > >> jquery.blockui.js"></script> > >> <script type="text/javascript">document.documentElement.className = > >> 'js';</script> > >> <script> > >> $(document).ready(function() { > >> $.blockUI(); > >> $(window).load(function(){unBlockFunction(); });}); > > >> function unBlockFunction(){ > >> $.unblockUI();} > > >> </script> > > >> Still trying to use blockUI? What happened to the styles? > > >> This script should be the first one, right after <title>: > >> <script type="text/javascript">document.documentElement.className = > >> 'js';</script> > > >> Also, <div id="uiblocker"></div> should be in the html, right after > >> the opening <body> 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 <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(yourcode as-is) > >>>>>http://meded.ucsd.edu/testKarl2.cfm(yourcodewith a query. Does > >>>>> not > >>>>> block the UI while the query is being run) > >>>>>http://meded.ucsd.edu/testKarl3.cfm(yourcodewith 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 > > ... > > read more »
