Member Avatar for avi-reiter

Does anyone know if there its possible to use a cfform within a cflayout, using type="tab"? I'd like to use the ajax calendar for a date input within the cflayoutarea but it doesn't seem to work.

Thanks
Avi Reiter
<FAKE SIGNATURE>

Edited by peter_budo because: Keep It On The Site - Do not manually post &quot;fake&quot; signatures in your posts.
  • 2 Contributors
  • 1 Reply
  • 107 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by ws1267

Dani AI

Generated

Short summary and focused troubleshooting for (and thanks to for the suggestions).

The calendar used by ColdFusion cfform/cfinput often fails inside a cflayout tab because of when and how CF injects scripts. If the tab content is loaded via AJAX (the source approach) the markup may arrive but the CF-generated initialization scripts either never run or run too early. That is the simplest explanation for seeing a plain text field instead of a working popup calendar.

Concrete steps to isolate and fix the issue

  • Verify whether the calendar works when the form is placed directly in the parent page (not loaded via AJAX). If it does, the problem is the AJAX load/initialization timing.
  • Make sure the CF AJAX libraries are imported on the parent page (so required JS/CSS are present before any tab content loads).
  • Check the browser console for JavaScript errors or missing files after the tab content loads. Missing script errors usually point to the root cause.
  • Avoid nested HTML forms and duplicate element IDs/names across tabs. Duplicate IDs can silently break widget initialization.
  • If you must load tab content via source, initialize the date control after the content is injected. If the ColdFusion init is hard to trigger, use a lightweight JS datepicker (jQuery UI, Pikaday, etc.) and explicitly call its initializer on the newly displayed tab element.
  • As a debugging step, try splitting tab content into separate CFM pages (as suggested). That isolates server-side rendering from client-side initialization.

ColdFusion's built-in Ajax UI can be brittle in these edge cases; explicit initialization from the parent or switching to a standalone JS datepicker gives a reliably reproducible solution.

Member Avatar for ws1267

Here is code for layout tabs, not sure it helps, could you put the cfform and datefield input in page1 and page2 and page3.cfm pages?

<cfajaximport tags="cfform,cflayout-border,cflayout-tab">
<cflayout 	type="border"	name="myLayout">
	<cflayoutarea name="myregion"
		position="center" overflow="hidden">
			<cflayout name="myTabs" type="tab" style="background-color:cornsilk;height:100%">
			
						<cflayoutarea
							title="page1"
							source="page1.cfm"
							overflow="visible" />
						<cflayoutarea
							title="page2"
							source="page2.cfm"
							overflow="visible" />
						<cflayoutarea
							title="page3"
							source="page3.cfm"
							overflow="visible" />
		</cflayout>
	</cflayoutarea>
</cflayout>

Or :

<cflayout 	type="border"	name="myLayout">
	<cflayoutarea name="myregion"
		position="center" overflow="hidden">
<cflayout name="myTabs" type="tab" style="background-color:cornsilk;height:100%">
			
						<cflayoutarea
							title="page1"					
							overflow="visible" >
								<cfform>
							<cfinput type="datefield" name="Mydate">
								</cfform>
						</cflayoutarea>

						<cflayoutarea
							title="Dataset"					
							overflow="visible"  >
							<cfform>
							<cfinput type="datefield" name="Mydate">
								</cfform>
						</cflayoutarea>
						<cflayoutarea
							title="page3"
											overflow="visible"  >
							<cfform>
							<cfinput type="datefield" name="Mydate">
								</cfform>
					     </cflayoutarea>
				
		</cflayout>
	</cflayoutarea>
</cflayout>
Edited by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks) and [icode] (inline code) tags.
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.