Using a flash cfgrid inside cflayout

Adding a cfgrid into a page that uses cflayout and a flash cfgrid causes a JS error, "Error processing JavaScript in markup for element tab1".  Even with cfgrid in the cfajaximport.  

There is a working example on this site but adding a flash cfgrid into the cflayout breaks it.  The article link is:
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Cold_Fusion_Markup_Language/Q_23099875.html

Here is the code snippen I added in the "view-only mode" section of tab 1...

<cfform name="testGrid" id="testGrid" action="##" method="post">
      <cfgrid name = "xmlGrid" format="flash" striperows="yes" width="100" height="100">
            <!---columns--->
            <cfgridcolumn name = "t1" header = "t1" type="string_noCase" dataalign="center">
            <cfgridcolumn name = "t2" header = "t2" type="numeric" dataalign="center">
            <!---data--->
            <cfloop from="1" to="2" index="i">
                  <cfgridrow data ="1,2">
            </cfloop>
      </cfgrid>
</cfform>
ckercherAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

_agx_Commented:
> Adding a cfgrid into a page that uses cflayout and a flash cfgrid causes a JS error, "

   You need to add CFFORM in the cfajaximport too (since you're using cfform).

   Also, you can enable the ajax log to get better debugging info.  Assuming you've got CF Admin access,
   check the "Enable AJAX Debug Log Window" option under Debugging & Logging > Debug Output Settings.
   Then add ?cfdebug to your url to display the window

0
ckercherAuthor Commented:
CFFORM was already in cfajaximport.  The ajax debug window shows the following...

info:http: Replaced markup for element: tab1
error:http: Error processing JavaScript in markup for element tab1:
info:http: HTTP GET cflayouttest-tab1.cfm?_cf_containerId=tab1&_cf_nodebug=true&_cf_nocache=true&_cf_clientid=C9FDD418991C5B8B9C184C14F843720C&_cf_rc=0
info:http: Replacing markup for element: tab1 from URL cflayouttest-tab1.cfm with params _cf_containerId=tab1
info:widget: Selected tab, id: tab1 in tab container, id: cf_layout1270645558676
info:LogReader: LogReader initialized
info:global: Logger initialized

This information doesn't give me any idea's of what to look into next to try and fix it.  Any ideas?
0
_agx_Commented:
Can you post the exact code you are using? I ran a basic test that works okay. So maybe there's something else in your code causing a problem.?
0
C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

ckercherAuthor Commented:
See my code, the problem is caused by the cfgrid in flayouttest-tab1.cfm.

Thanks!
<!--- cflayouttest.cfm --->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cflayout test</title>
</head>
 
<body>
<CFAJAXIMPORT TAGS="cflayout-tab,cfform,cfgrid">
<CFLAYOUT TYPE="TAB" TABHEIGHT="100%">
 
                <CFLAYOUTAREA NAME="tab1" TITLE="TESTING Tab 1" SOURCE="cflayouttest-tab1.cfm"></CFLAYOUTAREA>
                <CFLAYOUTAREA NAME="tab2" TITLE="TESTING Tab 2"  SOURCE="cflayouttest-tab2.cfm"></CFLAYOUTAREA>
                <CFLAYOUTAREA NAME="tab3" TITLE="TESTING Tab 3" SOURCE="cflayouttest-tab3.cfm"></CFLAYOUTAREA>
 
</CFLAYOUT>
</body>
</html>

<!--- cflayouttest-actions.cfm --->
<h1>CF Layout Test - actions</h1>
 
<CFSWITCH EXPRESSION="#FORM.EDIT#">
        <CFCASE VALUE="SUBMIT-TAB1">
        tab1
        <CFDUMP VAR="#FORM#">
                <script>
         ColdFusion.navigate('cflayouttest-tab1.cfm?run=yes','tab1');
        </script>
    </CFCASE>
 
        <CFCASE VALUE="SUBMIT-TAB2">
        tab2
        <CFDUMP VAR="#FORM#">
                <script>
         ColdFusion.navigate('cflayouttest-tab2.cfm?run=yes','tab2');
         </script>
    </CFCASE>
 
        <CFCASE VALUE="SUBMIT-TAB3">
        tab3
        <CFDUMP VAR="#FORM#">
                <script>
         ColdFusion.navigate('cflayouttest-tab3.cfm?run=yes','tab3');
         </script>
    </CFCASE>
</CFSWITCH>
 
<!---cflayouttest-tab1.cfm    --->
CF Layout Test - tab 1 body<br />
<br />
<CFPARAM NAME="FORM.EDIT" DEFAULT="VIEW MODE">
<CFPARAM NAME="url.run" DEFAULT="no">
 
<CFIF form.edit EQ "VIEW MODE">
        VIEW-ONLY MODE<br /><CFFORM METHOD="POST" ACTION="cflayouttest-tab1.cfm?run=no"><input type="submit" name="EDIT" value="EDIT MODE" /></CFFORM>
		<cfform name="testGrid" id="testGrid" action="##" method="post">
		<cfgrid name = "xmlGrid" format="flash" striperows="yes" width="100" height="100">
			<!---columns--->
			<cfgridcolumn name = "t1" header = "t1" type="string_noCase" dataalign="center">
			<cfgridcolumn name = "t2" header = "t2" type="numeric" dataalign="center">
			<!---data--->
			<cfloop from="1" to="2" index="i">
				<cfgridrow data ="1,2">
			</cfloop>
		</cfgrid>
		</cfform>
 
<CFELSE>
        EDIT MODE<br /><CFFORM METHOD="post" ACTION="cflayouttest-actions.cfm"><input type="submit" name="EDIT" value="SUBMIT-TAB1" /><input type="text" name="TESTBOX" /></CFFORM>
    
</CFIF>
 
<CFIF url.run EQ "yes"><CFDUMP VAR="#FORM#"></CFIF>
<p>url.run = <CFOUTPUT>#url.run#</CFOUTPUT></p>

<!---cflayouttest-tab2.cfm--->
CF Layout Test - tab 2 body<br />
<br />
<CFPARAM NAME="FORM.EDIT" DEFAULT="VIEW MODE">
<CFPARAM NAME="url.run" DEFAULT="no">
 
<CFIF form.edit EQ "VIEW MODE">
        VIEW-ONLY MODE<br /><CFFORM METHOD="POST" ACTION="cflayouttest-tab2.cfm?run=no"><input type="submit" name="EDIT" value="EDIT MODE" /></CFFORM>
 
<CFELSE>
        EDIT MODE<br /><CFFORM METHOD="post" ACTION="cflayouttest-actions.cfm"><input type="submit" name="EDIT" value="SUBMIT-TAB2" /><input type="text" name="TESTBOX" /></CFFORM>
    
</CFIF>
 
<CFIF url.run EQ "yes"><CFDUMP VAR="#FORM#"></CFIF>
<p>url.run = <CFOUTPUT>#url.run#</CFOUTPUT></p>

<!---cflayouttest-tab3.cfm--->
CF Layout Test - tab 3 body<br />
<br />
<CFPARAM NAME="FORM.EDIT" DEFAULT="VIEW MODE">
<CFPARAM NAME="url.run" DEFAULT="no">
 
<CFIF form.edit EQ "VIEW MODE">
        VIEW-ONLY MODE<br /><CFFORM METHOD="POST" ACTION="cflayouttest-tab3.cfm?run=no"><input type="submit" name="EDIT" value="EDIT MODE" /></CFFORM>
 
<CFELSE>
        EDIT MODE<br /><CFFORM METHOD="post" ACTION="cflayouttest-actions.cfm"><input type="submit" name="EDIT" value="SUBMIT-TAB3" /><input type="text" name="TESTBOX" /></CFFORM>
    
</CFIF>
 
<CFIF url.run EQ "yes"><CFDUMP VAR="#FORM#"></CFIF>
<p>url.run = <CFOUTPUT>#url.run#</CFOUTPUT></p>

Open in new window

0
_agx_Commented:
> <cfgrid name = "xmlGrid" format="flash"

   What about using an HTML grid instead of flash? That seems to work.  I don't use use the flash elements much,
   but it does seems like that flash control is not playing well with all the ajax/javascript stuff.

        <cfgrid name = "xmlGrid" format="html" striperows="yes" width="100" height="100">
        .....
0
ckercherAuthor Commented:
We were using html grids but we need to format the data in the grid. None of the tags that are available for the flash grid are available for the html grid such as dataAlign and type=currency.  We need this so all the numbers are aligned to the right and are formatted with commas so the data is legible.  We would actually prefer html grids because you can search the text on the page.  Do you know of a way to format html grids?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ckercherAuthor Commented:
Thanks for the info.  It of course works with cfgrid in html format.  As an FYI I was able to modify the examples to format the data into a currency format as well as apply a css stye which was necessary to properly format the data.  Se the code snippet and thanks again.  The usmoney function exactly duplicates the jQuery usmoney function.
<script>
formatStatus = function(data,cell,record,row,col,store) {
    cell.css = 'gridAlign';
    data = usmoney(data);
	return data
    
}
function usmoney(v) {
	v = (Math.round((v-0)*100))/100;
	v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
	v = String(v);
	var ps = v.split('.');
	var whole = ps[0];
	var sub = ps[1] ? '.'+ ps[1] : '.00';
	var r = /(\d+)(\d{3})/;
	while (r.test(whole)) {
		whole = whole.replace(r, '$1' + ',' + '$2');
	}
	return "$" + whole + sub ;
}

formatMonthlyGrid = function() {
    mygrid = ColdFusion.Grid.getGridObject('MonthlyxmlGrid');//get grid object
	cm = mygrid.getColumnModel();
   	cm.setRenderer(3,formatStatus);
    mygrid.reconfigure(mygrid.getDataSource(),cm);
}
</script>
<style>
.gridAlign{ text-align:right; }
</style>

Open in new window

0
ckercherAuthor Commented:
We made it work but there is still an issue with cflayout and a flash cfgrid which doesn't work.
0
_agx_Commented:
>  We made it work but there is still an issue with cflayout and a flash cfgrid which doesn't work

Yes, I've seen a few articles on problems with certain elements due to problems with the auto-generated javascript for certain components. I suspect it's a bug. Unfortunately, I haven't seen a fix for this issue yet.  
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.