4 Replies Latest reply: Jul 9, 2014 10:51 AM by zhornba RSS

    Coldfusion 11: CFLayout and CFChart

    jsg1000 Community Member

      I am upgrading my company's servers from CF 8 to CF 11 and have been having issues with the cflayout tab (which I know shouldn't be used anymore, but it is for thetime being). The code ran great on 8, but is now breaking on CF 11 in regards to using cfchart inside cflayout (sourced file). A code snippet is below:

       

      <cfajaximport tags="cfform">

          <cfajaximport tags="cflayout-tab">

          <script type="text/javascript" charset='utf-8' src='/CFIDE/scripts/CF_RunActiveContent.js'></script>.....

       

      <cflayout type="tab" name="TMLayout#attributes.keeperid#" tabheight="345" >  

          <cflayoutarea title="Dashboard" refreshonactivate="true" source="index.cfm?fa=#xfa.tabdashboard#" name="Dashboard" style="overflow-y: scroll;">

        </cflayoutarea>.......

       

      The source file simply has a pie chart in it and the rest of my tabs that don't have charts run just fine. Have there been any changes in terms of ajaximport or js includes I am missing?

       

      Thanks

       

      Edit: Forgot to add that I get the standard error: Error processing JavaScript in markup for element cf_layoutareaDashboard:  [Enable debugging by adding 'cfdebug' to your URL parameters to see more information]

        • 1. Re: Coldfusion 11: CFLayout and CFChart
          zhornba Community Member

          This is news to me, as far as the statement saying that we shouldn't use CFLAYOUT anymore.  Please reply back with a link stating this and hopefully a suggestion of what else we are supposed to use instead.

           

          CFLAYOUT is flat busted in CF11, as far as I can tell.  Nothing is showing up the same in these tags now.  It seems that, in my CF9 code, I have to add height and width attributes now, in order to even get the content to show up in CF11.  After that is done, it doesn't look at all as nice as it did (with auto heights and widths).  Setting the Height just leaves huge gaps between the Accordion bars.

           

          I would love to hear what we are supposed to change all of this CFLAYOUT code into with CF11.

           

          Thanks.

          • 2. Re: Coldfusion 11: CFLayout and CFChart
            Yodeler

            You can use jquery ui, angular ui, or ExtJS libraries.  There are also some other pay libraries.  They all have their pros and cons.  But if you search for it you'll find articles from Ben Forta, Ray Camden, Adam Cameron, etc. that the Coldfusion client tags are not a good thing to use.

             

            I came across this thread that after upgrading to CF 11 I have the same issue with the cflayout tabs with some legacy code.  I might just go ahead and try and port it over to jquery ui.

            • 3. Re: Coldfusion 11: CFLayout and CFChart
              Yodeler Community Member

              I find that setting style="height:auto;" in the cflayoutarea tag seems to work.

              • 4. Re: Coldfusion 11: CFLayout and CFChart
                zhornba Community Member

                I wish you the best of luck with that.  I had such a grueling time trying to use the jQuery Accordion tag instead of the cflayout tag, that I think I am going to recommend my company stick with CF9 on its production servers and not upgrade.  The lack of backwards compatibility in CF11 is fairly astounding so far, IMO.  I am running into all kinds of errors and tags that just don't work anymore on my CF11 test server.  I don't have the time to try to get jQuery to work with the other code I have going on in my apps.  jQuery is NOT like placing a cflayout tag in it's spot and having it work with no troubles.  You are either all in or all out.  I know others have had troubles getting cflayout to work the way they want, but that tag alone has benefited my apps more times than I can count.  If Adobe doesn't want to fix these UI tags in CF11, we will just stay behind until they do OR give us a replacement tag that works even better.

                 

                Here is my rant after banging my head for three days with trying to get jQuery Accordion to work, from another blog post (where the author was basically telling the viewer that they are an idiot for using the CF UI tags in the first place):

                 

                 

                "I don't mean to get off on a rant here, but tell me again why I shouldn't want to use a single, one-stop shopping tag like <cflayout type="accordion"> and instead use valuable time learning the nuances of jQuery and/or Bootstrap, download and place all the code involved with those frameworks, then spend three days trying to get the jQuery Accordion tag to work in my code, and after all that, the jQuery tag STILL WON'T WORK IN MY CODE where the CFLAYOUT tag worked like a charm in CF9 with a tenth of the effort???

                 

                I bought and use ColdFusion so I DON'T have to dick around with jQuery constantly and Google every time the tag doesn't do exactly what it is supposed to. I spent three days learning how to tweak this:

                 

                (jQuery "Demo" code):

                $( "#accordion" ).accordion();

                 

                ...into this:

                 

                (code researched in order to get the jQuery tag to even (correctly) show my data I threw at it):

                $( "#accordion" ).accordion({

                heightStyle: "content",

                icons: false,

                collapsible: true,

                autoHeight: false,

                navigation: false

                });

                 

                and it STILL refuses to show up in my nested DIV tag without a couple of JS errors and no Accordion effect whatsoever. Oh, BTW, put a comma after the last style command, watch it fail. Don't have quotation marks in that heightStyle command, watch it fail. Leave out the autoHeight statement, watch EVERY individual container be as big as your biggest piece of data (which confuses the meaning of "auto", doesn't it).  Place the new <div id="accordion"> in the exact same spot that the cflayout was, watch it not work at all, even following the Demo code example. The only time it works, when all of this rubbish is placed on a test page where it is the only thing going on.

                 

                Am I disappointed that CF11 has broken the cflayout tag? Absolutely. But I would rather stick with CF9 then have to learn a brand new framework and then have that be an exercise in futility anytime I place it in something more complicated than the Google home page. Don't chastise people for wanting to use a single tag that just works, and yes, ALL of those CF tags you mentioned above have worked beautifully for me...and I never had to "write an event listener" or "add an override stylesheet" (taken from the "CF UI - the Right Way" article).

                 

                Don't get me wrong, I admire Raymond Camden's work and expertise in ColdFusion. But as a programmer, I am lazy. ColdFusion has been perfect for me.  I have been using it since version 3!  It does all the work for me and I get to (easily) tweak the tags with CSS to get them to look good. I don't want to rewrite the wheel in JavaScript just to get the cart moving again. ColdFusion 11 just needs to make sure these UI tags work like they always have. Or create a replacement tag that does the same thing, only better. That's what I pay that upgrade fee for.

                 

                Of course this is just my opinion....I could be wrong."