jQuery UI Widgets Forums Navigation Tabs Remembering selected Tab after form submission

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • PackerNation
    Participant

    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>

    Dimitar
    Participant

    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,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.