1

I've seen a couple similar questions on here already, but none that were close enough to what I want that actually had an answer.

I have a CF page. The query that generates most of the page has the potential, depending on the user, to go long and then we're staring at a blank page for a moment, thinking that it's unresponsive.

Basically, I've been tasked with having a loading gif of sorts on the page until it's ready so that the user doesn't think it's crashed.

  1. I've tried the CFFLUSH method, and besides the fact that it doesn't really work as expected (we're using IE9 and IIS and apparently there are settings not playing nicely with each other) it also leaves the "loading" text/image on the screen once the main page loads. I want it to go away once the page loads.

  2. I can't use jQuery

  3. I can't really use native Ajax anymore than what I can access using CFAJAX calls, etc.

  4. The other developer here has suggested using CFWINDOW like he does elsewhere to check if the session is timing out, etc., but I haven't figured out how yet. I'd be open to those if someone could guide me on that.

Thoughts?

Leigh
  • 28,765
  • 10
  • 55
  • 103
Reverend Bubbles
  • 1,363
  • 5
  • 15
  • 29
  • Assuming you can sort out your cfflush problem, you can put the gif in a div, flush it, and then replace the contents of the div with javascript when your page processes. – Dan Bracuk Feb 19 '14 at 15:27
  • 2
    Why can't you use jQuery and why are you limited to only using `CFAJAX` to make AJAX calls? You are being tasked to solve a problem while at the same time taking away all the proper tools for solving it. Also, don't listen to the other developer. Don't use `CFWINDOW`, ever, under any condition. And, don't use `CFAJAX`, ever, under any condition. – Scott Stroz Feb 19 '14 at 17:03
  • basically since they don't want to add to the stack of moving parts. Anyway, the other guy actually had an idea that worked perfectly! I'll be adding it as an answer in a moment. – Reverend Bubbles Feb 19 '14 at 17:52
  • 2
    They don't want to 'add to the stack of moving' parts, but are OK with using half-assed functionality just because it is 'built in'? The JS and UI functionality of ColdFusion are dreadful and should be avoided at all costs as they tend to cause more problems than they solve – Scott Stroz Feb 19 '14 at 19:13
  • What problems do they add? – Reverend Bubbles Feb 19 '14 at 19:16
  • 1
    Keep using `cfdiv` and `cfajax` (or whatever UI functionality in CF you beleive is 'easier') and eventually you will hit their limitations and have to rip everything out and do it the right way. When that day comes, after work, go to a bar and raise a beer to all of us who warned you to stay away. :D – Scott Stroz Feb 20 '14 at 00:42

2 Answers2

1

cfdiv.

The other developer was racking his brains since he said he knew he did this somewhere before. In the end, he found it and it was a cfdiv.

Basically, you take the "offending" (i.e.: long lasting) code and cut it out into another file. Then, you add a <cfajaximport> to the head and then, in place where the code was you put:

<cfdiv id="divID" name="divName" bind="url:pageWithCode.cfm?(anyparameters)" bindonload="true" />

and be sure to refer to the parameters in the file as "url." and it all works perfectly!

Thanks all for your help!

Reverend Bubbles
  • 1,363
  • 5
  • 15
  • 29
  • 4
    `cfdiv` (or any other UI functionality in ColdFusion) is never a viable answer. For anything. – Scott Stroz Feb 19 '14 at 19:11
  • Why do you say that? It seems to do exactly what I've been trying to accomplish for two days. – Reverend Bubbles Feb 19 '14 at 19:14
  • 4
    The UI elements of ColdFusion are, historically, limited in functionality and usually have a half-assed implementation. The best way to handle this would be to use jQuery or any other JS library and NOT with `cfajax`. jQuery is open source and is used and tested by thousands of developers. Why you would choose something like `cfajax` - that was written by people who are not even JS developers, and used by a small number of people, is beyond me. – Scott Stroz Feb 19 '14 at 19:16
  • Just because a tag can't do everything doesn't mean it shouldn't be used if it does what I need it to do. – Reverend Bubbles Feb 19 '14 at 19:18
  • 2
    Yes, it does. You can display data from 2 related tables by querying one table, looping over it and querying the other table, but using a `JOIN` in a single query is a better way to do it. Just because you can, does not mean that you should. – Scott Stroz Feb 19 '14 at 19:21
  • 3
    When your requirements change - and they will change; they always change - you'll either waste time trying to figure out how to get cfdiv to do what you want, or you'll just switch to doing what sensible developers do (i.e. use jQuery/equivalent). It's much better to skip the cfdiv stage and do it sensibly from the outset. – Peter Boughton Feb 19 '14 at 19:21
  • 2
    @PeterBoughton always seems to be able to make my point much better than I am able to myself. – Scott Stroz Feb 19 '14 at 19:25
  • I hear what you're saying. Alas, the point still comes back to me only being in this location (as it stands now) temporarily as a contractor, doing what they ask me to do. I already am on record here as objecting to the fact that the official browser of the company is IE9. They go so far as to allow Chrome, but that's it. :) – Reverend Bubbles Feb 19 '14 at 20:10
  • 3
    I expect any contractor I work with to question bad design / coding. Nobody is hired to be a sheep. If there is something wrong with what is being asked question it. Like not using jQuery and being forced to use the ui stuff in CF. – Dave Ferguson Feb 19 '14 at 20:27
0

Maybe i am missing something but the answer seems simple to me. Just spit up the page with executes the query and the page that shows the result. The page that executes the query can also contain the actual formatting. Below a simple example.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<div id="body" style="width:100px">loading statement or loading images</div>
<script>
function load_url(url) 
{
    var obj;
    if (window.XMLHttpRequest) obj = new XMLHttpRequest();
    else if (window.ActiveXObject) obj = new ActiveXObject("Microsoft.XMLHTTP");

    if (obj !== null) 
    {
        obj.onreadystatechange = function() 
        {
            if (obj.readyState === 4) 
            {
                var response = obj.responseText;
                alert(response);
                document.getElementById('body').innerHTML = response;
            }
        };

        obj.open("GET", url, true);
        obj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        obj.send();
    }
}
load_url('/loadActualdata.cfm?timestamp=' + new Date().getTime().toString());
</script>
</BODY>
</HTML>

HTML on loadActualdata.cfm

<table style="width:100%;border:1px solid red" border="0" cellpadding="0" cellspacing=""0">
 <tr>
  <td><b>test</b></td>
 </tr>
</table>
Nebu
  • 1,753
  • 1
  • 17
  • 33
  • Ok, so I used this method and it causes nothing but problems! When the table of data finally comes back, it's very spread out. Also, the page seems to cache itself somehow. It refuses to acknowledge code changes on the page, sometimes even after a browser restart! It keeps reading wrong variables and thus constructing the query wrong. – Reverend Bubbles Feb 26 '14 at 17:54
  • (oops) What am I missing? – Reverend Bubbles Feb 26 '14 at 17:56
  • I updated my answer. The cache problem is solved by adding a timestamp to the url. I am not sure why you are experiencing formatting problems, most likely there are formatting errors on the requested page. Try the simple example in the answer then add your html until you discover the problem. – Nebu Feb 27 '14 at 08:46
  • _"The cache problem is solved by"_ ...setting the correct HTTP caching headers! – Peter Boughton Feb 27 '14 at 09:27