asked on

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:
https://www.experts-exchange.com/questions/23099875/CF8-CFLAYOUT-causing-Error-processing-JavaScript-using-Tabs.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">
            
            <cfgridcolumn name = "t1" header = "t1" type="string_noCase" dataalign="center">
            <cfgridcolumn name = "t2" header = "t2" type="numeric" dataalign="center">
            
            <cfloop from="1" to="2" index="i">
                  <cfgridrow data ="1,2">
            </cfloop>
      </cfgrid>
</cfform>

_agx_

> 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

ckercher

ASKER

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?

_agx_

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.?

ckercher

ASKER

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

_agx_

> <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">
.....

ckercher

ASKER

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?

ASKER CERTIFIED SOLUTION

_agx_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ckercher

ASKER

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

ckercher

ASKER

We made it work but there is still an issue with cflayout and a flash cfgrid which doesn't work.

_agx_

> 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.