jQuery UI Widgets › Forums › Navigation › Tabs › Remembering selected Tab after form submission
Tagged: cookies, form, forms, jqxTabs, load, remember, remember selection, save, save selection, selected, selectedItem, selection, tab, Tabs
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 2 months ago.
-
Author
-
How do I remember which tab was selected after a form submission. I have three tabs each containing a different form. When a form is submitted I want the tab (and the active form) to be the selectedItem. So far, my code works for the first form submission, but if I switch to another form the value of the selectedItem does not update.
<cfif isdefined("FORM.submit")> <cfswitch expression="#form.tabVal#"> <cfcase value="0"><cfset selTab = 0></cfcase> <cfcase value="1"><cfset selTab = 1></cfcase> </cfswitch> <cfelse> <cfset selTab = 0> </cfif> <script type="text/javascript"> $(document).ready(function () { /*$('#jqxTabs').on('selected', function (event) { var selectedTab = event.args.item; if (selectedTab == 1) { var selTab = 1; } });*/ // Create jqxTabs. $('#jqxTabs').jqxTabs({ width: '90%', height: 200, position: 'top', selectedItem: <cfoutput>#variables.selTab#</cfoutput> }); $('#settings div').css('margin-top', '10px'); $('#animation').jqxCheckBox({ theme: theme }); $('#contentAnimation').jqxCheckBox({ theme: theme }); $('#animation').on('change', function (event) { var checked = event.args.checked; $('#jqxTabs').jqxTabs({ selectionTracker: checked }); }); }); </script> <div id='jqxWidget'> <div id='jqxTabs'> <ul> <li style="margin-left: 30px;">Form 1</li> <li>Form 2</li> </ul> <div> <cfform action="reports.cfm" method="post" preservedata="yes" format="html" > Username: <input type="text" name="user" /> From: <input type="text" width="75px" id="datepickerFrom" name="dateFrom" value="" > To: <input type="text" id="datepickerTo" name="dateTo" value=""> <cfinput type="submit" name="Submit" value="Submit" /> <cfinput type = "hidden" name = "tabVal" value = "0"> </cfform> <cfif isdefined("FORM.submit")> <cfdump var="#form#"> </cfif> </div> <div> <cfform action="reports.cfm" method="post" preservedata="yes" format="html" > Vendor: <cfselect bind="cfc:cfc2.vendors.allvendors()" bindonload="true" name="vendor"></cfselect> From: <input type="text" width="75px" id="datepickerFrom" name="dateFrom" value="" > To: <input type="text" id="datepickerTo" name="dateTo" value=""> <cfinput type="submit" name="Submit" value="Submit" /> <cfinput type = "hidden" name = "tabVal" value = "1"> </cfform> <cfif isdefined("FORM.submit")> <cfdump var="#form#"> </cfif> </div> </div> </div>
Hello PackerNation,
You can save tab selection using cookies. Here is an example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/cookies.htm?arctic. We hope it is helpful to you.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.