I don’t quite understand the tabbed panels. If I have tabbed
panels on a page and define the contents of a panel as an include
of the html code of another page and that page has a submit button
that reloads the page to update the DB, it doesn’t have the tabbed
panels anymore. Is there documentation the covers the theory of
using tabbed panels? It seems limited in it’s use without a great
deal of extra coding to support it. Maybe it’s intended for initial
“menu” pages..|||
Hmm….can we get a better idea of your code?
I am not totally clear what you have happening when you
submit.
Thanks,
Don|||
This is the main menu;
<cfinclude template=”tsiadmin.css”>
<script src=”…/SpryTabbedPanels.js”
type=”text/javascript”></script>
<link href=”…/SpryTabbedPanels.css” rel=”stylesheet”
type=”text/css”>
</head>
<div id=”TabbedPanels1″ class=”TabbedPanels”>
<ul class=”TabbedPanelsTabGroup”>
<li class=”TabbedPanelsTab” tabindex=”0″>Log
In</li>
<li class=”TabbedPanelsTab”
tabindex=”0″>Individuals</li>
<li class=”TabbedPanelsTab”
tabindex=”0″>Companies</li>
<li class=”TabbedPanelsTab” tabindex=”0″>Job
Ads/Stats</li>
</ul>
<div class=”TabbedPanelsContentGroup”>
<div class=”TabbedPanelsContent”><cfinclude
template=”tsilogin.cfm”></div>
<div class=”TabbedPanelsContent”>2</div>
<div class=”TabbedPanelsContent”>3</div>
<div class=”TabbedPanelsContent”><cfinclude
template=”tsijobmenu.cfm”></div>
</div>
</div>
<script type=”text/javascript”>
var TabbedPanels1 = new
Spry.Widget.TabbedPanels(“TabbedPanels1″);
</script>
———————————————————————- ———–
This is the job menu ( from the main menu)
<!—<script src=”/includes/SpryTabbedPanels.js”
type=”text/javascript”></script>
<link href=”/includes/SpryTabbedPanels.css”
rel=”stylesheet” type=”text/css”> —>
</head>
<div id=”TabbedPanels2″ class=”TabbedPanels”>
<ul class=”TabbedPanelsTabGroup”>
<li class=”TabbedPanelsTab” tabindex=”0″>Job Ads
Maint</li>
<li class=”TabbedPanelsTab” tabindex=”0″>Stats – SB
Mark/Serv</li>
<li class=”TabbedPanelsTab” tabindex=”0″>Stats -
Marketing</li>
<li class=”TabbedPanelsTab” tabindex=”0″>Stats -
Recruiting</li>
</ul>
<div class=”TabbedPanelsContentGroup”>
<div class=”TabbedPanelsContent”><cfinclude
template=”tsijobads1.cfm”></div>
<div class=”TabbedPanelsContent”><cfinclude
template=”jbsbstatinput.cfm”></div>
<div class=”TabbedPanelsContent”><cfinclude
template=”jbmarketingstatinput.cfm”></div>
<div class=”TabbedPanelsContent”><cfinclude
template=”jbrecruitingstat1.cfm”></div>
</div>
</div>
<script type=”text/javascript”>
var TabbedPanels2 = new
Spry.Widget.TabbedPanels(“TabbedPanels2″);
</script>
|||
——————————————————————— ————————-
And this is the Jobs Maintenance program. If you click on
“Next 10″ it will reload itself to display the next 10 records.
<cfinclude template=”tsiadmin.css”>
</body>
</head>
<center>
<CFAPPLICATION NAME=”Next10″ SESSIONMANAGEMENT=”Yes”>
<br>
<h2>Job Ads Maintenance</h2>
<cfparam name=”filter1″ default=”">
<cfparam name=”filter2″ default=”">
<cfparam name=”filter3″ default=”">
<!– Table containing filter inputs –>
<cfform method=”POST” name=”jobadsfilter”
id=”jobadsfilter” action=”tsijobads1.cfm”>
<table>
<tr>
<td>Filter by Job Ad#</td>
<td><cfinput type=”text” name=”filter1″
id=”filter1″ value=”"></td>
</tr>
<tr>
<td>Filter by Tax specialty</td>
<td><cfinput type=”text” name=”filter2″
id=”filter2″ value=”"></td>
</tr>
<tr>
<td>Filter by Company Name</td>
<td><cfinput type=”text” name=”filter3″
id=”filter3″ value=”"></td>
</tr>
<tr>
<td></td>
<td><cfinput type=”submit” value=”Filter”
name=”filter”></td>
</tr>
</table>
<!– End table containing filter inputs –>
<br><br>
</cfform>
<cfform method=”POST” name=”jobads1″ id=”jobads1″>
<cfparam name=”maxrows” default=”10″>
<cfparam name=”startrow” default=”1″>
<cfparam name=”session.start” default=”1″>
<cfquery datasource=”AS400″ dbtype=”ODBC”
name=”qJobAds”>
select * from jobads
left join cstatic
on jobads.jjcomp=cstatic.csrec##
left join sspec
on jobads.jjtaxs=sspec.ssspec
<cfif #filter1# neq “”>
where jjadno=#val(filter1)#
</cfif>
<cfif #filter2# neq “”>
where jjtaxs=#filter2#
</cfif>
<cfif #filter3# neq “”>
where UPPER(csnam1) like ‘#uCase(filter3)#%’
</cfif>
</cfquery>
<table colspan=”10″>
<tr>
<th nowrap align=”center”>Active </th>
<th nowrap align=”center”>Cons </th>
<th nowrap align=”center”>Date Created </th>
<th nowrap align=”center”>Ad# </th>
<th nowrap align=”center”>Ad Type </th>
<th nowrap align=”center”>Title </th>
<th nowrap align=”center”>Specialty </th>
<th nowrap align=”center”>Date Posted </th>
<th nowrap align=”center”>Date Closed </th>
<th nowrap align=”left”>Company </th>
</tr>
<CFIF IsDefined(“url.next”)>
<CFSET session.start = #session.start# + 10>
<CFOUTPUT QUERY=”qJobAds” STARTROW=”#session.start#”
MAXROWS=”10″>
<tr>
<td nowrap align=”center”>#qJobAds.JJTYPE#</td>
<td nowrap align=”center”>#qJobAds.JJINIT#</td>
<td nowrap align=”center”>#qJobAds.JJDATE#</td>
<td nowrap align=”center”><a
href=”tsijobads3.cfm?adno=#qJobAds.jjadno#”>#qJobAds.JJADNO#</a></td>
<td nowrap align=”center”>#qJobAds.JJATYP#</td>
<td nowrap align=”center”>#qJobAds.JJTITL#</td>
<td nowrap align=”center”>#qJobAds.SSDESC#</td>
<td nowrap align=”center”>#qJobAds.JJDATP#</td>
<td nowrap align=”center”>#qJobAds.JJDATC#</td>
<td nowrap>#qJobAds.CSNAM1#,
#qjobads.CSCITY#</td>
</tr>
</CFOUTPUT>
<P><A
HREF=”tsijobads1.cfm?next=10&rnd=#rand(SHA1PRNG)#”>Next
10</A></P>
<P><A
HREF=”tsijobads1.cfm?prev=10&rnd=#rand(SHA1PRNG)#”>Prev
10</A></P>
<CFELSE>
<CFIF IsDefined(“url.prev”)>
<CFSET session.start = #session.start# – 10>
<cfif #session.start# LT 1>
<cfset session.start = 1>
</cfif>
<CFOUTPUT QUERY=”qjobads” STARTROW=”#session.start#”
MAXROWS=”10″>
<tr>
<td nowrap align=”center”>#qJobAds.JJTYPE#</td>
<td nowrap align=”center”>#qJobAds.JJINIT#</td>
<td nowrap align=”center”>#qJobAds.JJDATE#</td>
<td nowrap align=”center”><a
href=”tsijobads3.cfm?adno=#qJobAds.jjadno#”>#qJobAds.JJADNO#</a></td>
<td nowrap align=”center”>#qJobAds.JJATYP#</td>
<td nowrap align=”center”>#qJobAds.JJTITL#</td>
<td nowrap align=”center”>#qJobAds.SSDESC#</td>
<td nowrap align=”center”>#qJobAds.JJDATP#</td>
<td nowrap align=”center”>#qJobAds.JJDATC#</td>
<td nowrap align=”center”>#qJobAds.CSNAM1#,
#qJobAds.CSCITY#</td>
</tr>
</CFOUTPUT>
<P><A
HREF=”tsijobads1.cfm?next=10&rnd=#rand(SHA1PRNG)#”>Next
10</A></P>
<P><A
HREF=”tsijobads1.cfm?prev=10&rnd=#rand(SHA1PRNG)#”>Prev
10</A></P>
<cfelse>
<CFSET start = 1>
<CFSET session.start = #start#>
<CFOUTPUT QUERY=”qJobAds” STARTROW=”#session.start#”
MAXROWS=”10″>
<tr>
<td nowrap align=”center”>#qJobAds.JJTYPE#</td>
<td nowrap align=”center”>#qJobAds.JJINIT#</td>
<td nowrap align=”center”>#qJobAds.JJDATE#</td>
<td nowrap align=”center”><a
href=”tsijobads3.cfm?adno=#qJobAds.jjadno#”>#qJobAds.JJADNO#</a></td>
<td nowrap align=”center”>#qJobAds.JJATYP#</td>
<td nowrap align=”center”>#qJobAds.JJTITL#</td>
<td nowrap align=”center”>#qJobAds.SSDESC#</td>
<td nowrap align=”center”>#qJobAds.JJDATP#</td>
<td nowrap align=”center”>#qJobAds.JJDATC#</td>
<td nowrap>#qJobAds.CSNAM1#,
#qJobAds.CSCITY#</td>
</tr>
</CFOUTPUT>
<P><A
HREF=”tsijobads1.cfm?next=10&rnd=#rand(SHA1PRNG)#”>Next
10</A></P>
</CFIF>
</CFIF>
</table>
<cfscript>
function phoneFormat(varInput, varMask) {
var curPosition = “”;
var newFormat = “”;
var i = “”;
if(val(trim(varInput))eq 0) {
varInput = “000000000000″;
}
if(len(trim(varInput))) {
newFormat = ” ” &
reReplace(varInput,”[^[:digit:]]”,”",”all”);
for (i=1; i lte len(trim(varmask)); i=i+1) {
curPosition = mid(varMask,i,1);
if(i gt len(newformat)); {
return trim(varInput);
}
if(curPosition neq “x”) newFormat =
insert(curPosition,newFormat, i) & ” “;
}
}
return trim(newFormat);
}
</cfscript>
</cfform>
<cfform action=”tsijobads2.cfm?csnam1=” method=”post”>
<input type=”submit” value=”Add New Job Ad”>
</cfform>
|||
Thanks, but this isn’t the best way to debug things.
The final output code is the thing that matters.
Is there a URL that we can see?
It appears that your forms are submitting to
“tsijobads1.cfm”.
Does that page contain a tabbed panels widget?
|||
No, it’s the cfinclude on tsijobmenu.cfm. The url is
www.taxsearchinc.com/admintsi/tsiadminmenu.cfm and there is no need
to log in.|||
I think I am trying to take “tabbed navigation” past it’s
usefullness. I’ve seen some pages that have used the tabbed panel
idea where you can perform database updates on one tab and updates
for another database on another tab, etc. I can see where a single
web page with tabbed panels could end up being massive if the user
actually (and will) open up several tabs at once.|||
Hi larksys,
The TabbedPanels widget is intended to group info into pages
of information.
In your particular case you are trying to use a form on one
of the tabs, but the problem is you are allowing the browser to
handle the form submission as it normally does. Browsers expect the
server to return a brand new page if you let it submit the form for
you. This is the way they were designed.
If you want to submit the form and remain on the page, then
you must do so by using the XMLHttpRequest object which allows the
browser to send a request to the server without forcing the page to
refresh.
Spry has the ability to submit a form via the XMLHttpRequest
object. Look here for the “Form Submission via AJAX” samples:
http://labs.adobe.com/technologies/spry/samples/
These same files are also in the Spry 1.5 zip file you
download off of Adobe Labs.
–== Kin ==–|||
That seems to be a good answer for me. But, why is there so
little documentation. You have to be a real “byte head” to use it
as it stands.
Related posts:
- Two or more spry sliding panels nested in tabbed panels?
- Tabbed Panels issues
- Vertical Tabbed Panels
- Spry tabbed panel in tabbed panels doesn’t expand a floated div
- Spry Tabbed Panels – Forms within Panels
Related posts brought to you by Yet Another Related Posts Plugin.
