CF8 CFLAYOUT causing "Error processing JavaScript" using Tabs

"cfajaximport" should be one word in the comment above.

And the nav being doubled is probably happening because the template you are binding to that tab is including your header and footer. If you can post a little code that would be easier to identify

good thought. I added that. no change in problem.

now it seems to draw a little slower, but the same errors yet persist.

it was a little tricky getting the paths right on that CFAJAXIMPORT tag
<CFAJAXIMPORT
    CSSSRC = "CFIDE/scripts/ajax/"
    SCRIPTSRC = "/CFIDE/scripts"
    TAGS = "cfdiv,cfform,cfgrid,cfinput-autosuggest,cfinput-datefield,cflayout-border,cflayout-tab,cfmenu,cftextarea,cftooltip,cftree,cfwindow">

what's happening is I have an editable form on each of the tabs. when i click a Submit button on any of the tabs, the page redirects to an action page (for database manipulation), then relocates to the tab again (in non-editable form). when i click the Submit button, i get a pop-up error reading "Error processing JavaScript in markup for element cf_layoutarea1201027352630....", but after I clear the error the page is redrawn.

Problem then is the page body also contains the outer nav includes.

You shouldn't need to set the csssrc or scriptsrc attributes in your cfajaximport tag, and in your tags attribute you should only list the tags that will be used in the code that generates the content that gets bound to your tabs.  From the screen shot I would say you only need something like:

<CFAJAXIMPORT  TAGS="cfform">

and that tag needs to be put at the top of the template where your cflayout / cflayoutarea tags are.

Also, in the code that generates the form, you need to make sure your resulting html (the non-editable form) is not including the header or side navigation. Think of it as similar to how you would program a page that is within a frame, you only want that resulting page to return the HTML for the form.

Make sure you have separate files for your page and the contents of the tab.  It seems to me that you are calling your page to reload inside your tab.

Page.cfm

 contains call to CFAJAXIMPORT
 contains call to CFLAYOUT, with the source pointing to tabForm.cfm

TabForm.cfm

 does not contain CFAJAXIMPORT and does not contain CFLAYOUT (unles its a different one)
  contains only the contents of the tab, with the form.  
  This form submits and call TabFormDisplay.cfm

TabFormDisplay.cfm

 does not contain CFAJAXIMPORT and does not contain CFLAYOUT
 contains only the contents of the tab, with the read only display of the form.  

 

Sounds like you're onto something there, but I'm not sure what you mean "with the source pointing to tabForm.cfm".

here is the current code on the main page. The 3 tabs' content all comes from include files.

<CFAJAXIMPORT  TAGS="cfform">

<CFLAYOUT TYPE="TAB" TABHEIGHT="100%">

            <CFLAYOUTAREA TITLE="National Clubs"><CFINCLUDE TEMPLATE="dsp_update_otheraffiliationsupdate_national.cfm"></CFLAYOUTAREA>
            <CFLAYOUTAREA TITLE="ORC Club-within-Club"><CFINCLUDE TEMPLATE="dsp_update_otheraffiliationsupdate_ORC.cfm"></CFLAYOUTAREA>
            <CFLAYOUTAREA TITLE="Leadership Positions"><CFINCLUDE TEMPLATE="dsp_update_otheraffiliationsupdate_leaders.cfm"></CFLAYOUTAREA>

</CFLAYOUT>

Right, that's what I meant.  Some of the CF tags use the SRC parameter but this one doesn't..  Sorry for the confusion.

Now, when you submit   dsp_update_otheraffiliationsupdate_national.cfm  
what page do you call ?   Don't call the main page...

Actually I go to an action page where the data is inserted / updated, then the user is redirected back to the main page with a URL parameter stipulating the tab to be selected (as the one you were editing on).

but i'm trying your advice by using the SOURCE attribute of the CFLAYOUTAREA tag. means i have to move my queries to that include's page, as the queries don't seem to be retained and usable in the tab template. Also, my session variables don't seem to work in the tabs now.

<CFLAYOUT TYPE="TAB" TABHEIGHT="100%">
 
		<CFLAYOUTAREA TITLE="National Clubs" SOURCE="/public/members/pages/memberprofile/dsp_update_otheraffiliationsupdate_national.cfm"></CFLAYOUTAREA>
		<CFLAYOUTAREA TITLE="ORC Club-within-Club" SOURCE="/public/members/pages/memberprofile/dsp_update_otheraffiliationsupdate_ORC.cfm"></CFLAYOUTAREA>
		<CFLAYOUTAREA TITLE="Leadership Positions" SOURCE="/public/members/pages/memberprofile/dsp_update_otheraffiliationsupdate_leaders.cfm"></CFLAYOUTAREA>
 
</CFLAYOUT>
                                              

1:
2:
3:
4:
5:
6:
7:

when you submit within a layout tab, only the tab redraws.  So after your submit, you can't call the main page because you will be loading that page inside of the tab which is why you're getting the tabs within the tabs.

After the action page, just call the same page again to show it in the same tab.
dsp_update_otheraffiliationsupdate_national.cfm  

The tab will not need to be made active, you're already on it.  The page will not redraw, only the tab..

What I'm finding is that I redirect the form script back to the tab's .cfm file (being cfincluded by the parent file) and that does work to remain within the same navigational framework (and not double the nav). However, the session variables don't work (not found) even though they're sitting in the debugger area. The form variables seem to be available via CFDUMP, but not my session variables. Only once I refresh the page do the session variables become available to that tab's processing.

I built a sample app to show the problems here.

TRY THIS WITH THE CODE BELOW:
start on Tab3. click Edit Mode, which correctly remains on tab 3. submit any text, which is submitted to the Action.cfm page, an you are CFLOCATION'd back to Tab3. However at this point in MY application (of which we speak above), all session variables would be unavailable to code processing on tab3 right now (variable not defined error). Regardless, NOW click Edit Mode again (the second time) and note how screwy things get. You leave the CFLAYOUT framework and go directly to the tab's page.

I think CFLAYOUT has a fundamental bug that manifests when users are CFLOCATION'd back to a tab after processing. The only way I can think to fix this is to CFLOCATION back to the original page with the CFLAYOUT tag, and then (using URL params and CFIFs) decide which tab is "SELECTED". But when I do that, i get the Javascript error described above.

<!--- cflayouttest.cfm --->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cflayout test</title>
</head>
 
<body>
<CFAJAXIMPORT TAGS="cflayout-tab,cfform">
<CFLAYOUT TYPE="TAB" TABHEIGHT="100%">
 
		<CFLAYOUTAREA TITLE="TESTING Tab 1" SOURCE="cflayouttest-tab1.cfm"></CFLAYOUTAREA>
		<CFLAYOUTAREA TITLE="TESTING Tab 2"  SOURCE="cflayouttest-tab2.cfm"></CFLAYOUTAREA>
		<CFLAYOUTAREA TITLE="TESTING Tab 3" SOURCE="cflayouttest-tab3.cfm"></CFLAYOUTAREA>
 
</CFLAYOUT>
<br />
<br />
<font size="-2">
Note:If you use CFAJAXIMPORT and use CFFORM for the form tags, then you don't need to SELECTED the CFLAYOUTAREA tags, since CFFORM does it for you.
</font>
</body>
</html>
 
<!--- cflayouttest-actions.cfm --->
 
<h1>CF Layout Test - actions</h1>
 
<CFSWITCH EXPRESSION="#FORM.EDIT#">
 
	<CFCASE VALUE="SUBMIT-TAB1">
    
    	tab1
        
        <CFDUMP VAR="#FORM#">
        
        <CFLOCATION URL="cflayouttest-tab1.cfm">
        
    </CFCASE>
 
	<CFCASE VALUE="SUBMIT-TAB2">
    
    	tab2
        
        <CFDUMP VAR="#FORM#">
        
        <CFLOCATION URL="cflayouttest-tab2.cfm">
        
    </CFCASE>
 
	<CFCASE VALUE="SUBMIT-TAB3">
    
    	tab3
        
        <CFDUMP VAR="#FORM#">
        
        <CFLOCATION URL="cflayouttest-tab3.cfm">
        
    </CFCASE>
 
</CFSWITCH>
 
<!---cflayouttest-tab1.cfm--->
 
CF Layout Test - tab 1 body<br />
<br />
<CFPARAM NAME="FORM.EDIT" DEFAULT="VIEW MODE">
 
<CFIF form.edit EQ "VIEW MODE">
	VIEW-ONLY MODE<br /><CFFORM METHOD="POST"  ACTION="cflayouttest-tab1.cfm"><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-TAB1" /><input type="text" name="TESTBOX" /></CFFORM>
</CFIF>
 
<!---cflayouttest-tab2.cfm--->
 
CF Layout Test - tab 2 body<br />
<br />
<CFPARAM NAME="FORM.EDIT" DEFAULT="VIEW MODE">
 
<CFIF form.edit EQ "VIEW MODE">
	VIEW-ONLY MODE<br /><CFFORM METHOD="POST"  ACTION="cflayouttest-tab2.cfm"><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>
 
<!---cflayouttest-tab3.cfm--->
 
CF Layout Test - tab 3 body<br />
<br />
<CFPARAM NAME="FORM.EDIT" DEFAULT="VIEW MODE">
 
<CFIF form.edit EQ "VIEW MODE">
	VIEW-ONLY MODE<br /><CFFORM METHOD="POST"  ACTION="cflayouttest-tab3.cfm"><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>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:

Thanks for the example I am playing with it now.

Question  -  where do you set and/or change your session variables in this code?  Or is it that the code just loses session variables that are set outside of this code ?

Also, if there is an error entered by the user on submit (such as not entering a field or entering an invalid date) how do you return to the form for them to fix it?   I ask this because you are hopping between pages and it seems they won't be able to.  One proposed fix I have for you would handle that scenario as well..

CFLOCATION has a known side-effect of not setting session variables.   But session variables already set (on a previous page display) should not be lost in a future cflocation.

Typically, you should call CFLOCATION with AddToken="No" so you are not exposing your session tokens on the URL.  

<CFLOCATION URL="cflayouttest-tab1.cfm"  addToken="no">

I'm using Fusebox3 framework, so session variables are set much earlier at a user login screen. thereafter they persist until the user leaves the site. so the session variables should be available to the tabs at all times. but they're not.

i think CF hasn't looped over the code yet, or hasn't refreshed quite right, or something odd.

the URL tokens shouldn't affect this situation I wouldn't think.

regarding form validation, i do it on the form using CFINPUT tag client-side validation

I looked through all my CF8 code and didn't find any cases where I use CFLOCATION within a CF Ajax object.   I really don't think you can do it.  CF Ajax objects are DIVs on the page and CFLOCATION is meant to redirect the page itself.   I think you need to use one of the Ajax objects provided such as Coldfusion.Navigate()


   <script>
     ColdFusion.navigate('newTemplate.cfm','myObject');
   </script>

I experimented a little with that, but that doesn't seem to be right. It navigates the template INTO the page you're in (i think), but i want to process the form variables (insert/update SQL), then return to and redraw the tab with updated data. I want the user to stay on the tab the whole time.  If I do the SQL processing on the tab itself, I still need to return to that tab (redrawn / repopulated as read-only).
i'm also confused about using CFLAYOUTAREA Source=  vs. using CFINCLUDE inside the body of the CFLAYOUTAREA tag. when i look at examples of code, the data is inside the tag, so why use the Source reference?

<CFAJAXIMPORT TAGS="cflayout-tab,cfform">
<CFLAYOUT TYPE="TAB" TABHEIGHT="100%">
 
<!---		<CFLAYOUTAREA TITLE="TESTING Tab 1" SOURCE="cflayouttest-tab1.cfm"></CFLAYOUTAREA>
		<CFLAYOUTAREA TITLE="TESTING Tab 2"  SOURCE="cflayouttest-tab2.cfm"></CFLAYOUTAREA>
		<CFLAYOUTAREA TITLE="TESTING Tab 3" SOURCE="cflayouttest-tab3.cfm"></CFLAYOUTAREA>
--->
		<CFLAYOUTAREA TITLE="TESTING Tab 1"><CFINCLUDE TEMPLATE="cflayouttest-tab1.cfm"></CFLAYOUTAREA>
		<CFLAYOUTAREA TITLE="TESTING Tab 2"><CFINCLUDE TEMPLATE="cflayouttest-tab2.cfm"></CFLAYOUTAREA>
		<CFLAYOUTAREA TITLE="TESTING Tab 3"><CFINCLUDE TEMPLATE="cflayouttest-tab3.cfm"></CFLAYOUTAREA>
 
</CFLAYOUT>
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

maybe i should use a different tab tool. just thought the new CF8 stuff would be cool. i've looked everywhere about this and there seems to be problems submitting form variables inside of the tabs.  in this article:
<<http://www.coldfusionjedi.com/index.cfm/2007/6/7/ColdFusion-8-AJAX-UI-Tabs>> the question is similar to my situation: "Now can each tab submit it's form content via Ajax to a CFC that inserts it into a database? Maybe on each tab change submit that tabs data?"   Raymond Camden says: "First, AjaxLink lets you link and keep inside a layoutarea. Secondly, there is a ColdFusion.Ajax.submitForm JS function. "

tragically, i have no idea what he's talking about....

Ray Camden wrote me this: When you use cfform inside cflayout, the form post will be asynchronous. Therefore, cflocation doesn't make sense. Your doing an Ajax based request and the result is a header saying 'go here', but that doesn't make sense in this context. What you need to do instead is something like this:

Use ColdFusion.Ajax.submitForm() to submit the form. This will let you capture the result and handle it. In that result, you can then do whatever. If you want the tab contents to change, you can ColdFusion.navigate.

Sounds like Ray told you to do exactly like what gdemaria said in his last post.  I agree that is the best solution. You don't want to use cflocation.

Thank you so much. This is great! I'm not using the ColdFusion.Ajax.submitForm function, but it's working with normal CFFORM submit. Here's the final code for posterity.

<!--- cflayouttest.cfm --->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cflayout test</title>
</head>
 
<body>
<CFAJAXIMPORT TAGS="cflayout-tab,cfform">
<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>
 
<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>
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:

You're welcome!  

I should explain, for future use perhaps.   The ColdFusion.Ajax.submitForm can asynchronously submit the form - which means when you click the button the page will not refresh, nor will the form itself.  Only the data will be passed to the server, behind the scenes.    You can also use the function to submit a form in another container, for example, when you click the tab, you could have the form automatically submit.

Just the regular submit button, the one you're using, can submit the form within the cfdiv, cflayout, cfgrid, etc containers.

Regards,

Since you've been so helpful and knowledgeable about CFLAYOUT, could you answer my question here too? It's related to what we discussed about regarding using session / query variables inside the tabs.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Cold_Fusion_Markup_Language/Q_23127557.html?cid=545