Canvas Support

Keep tab open on page refresh

5 replies · opened Jun 30, 2019

SsupermanageJun 30, 2019

Hello, I am using the tabs from this page:
http://themes.semicolonweb.com/html/canvas/forms-car-rental.html
If click airport then an input is shown or if you press hotel another input is shown. Can you tell me how to keep the input shown in view even after page refresh?

So if the user submits but comes back the input field is hidden unless they press it again, how can I maintain which one (airport/hotel) was chosen then keep showing it even if the page was refreshed?

Cheers

SSemicolon WebSTAFFJul 1, 2019

Hello,

Unfortunately, this functionality is not included with the Default Codes and further Customization would be required for this. As a recommendation, consider using the Cookie JS functionality to detect the Tab selected and save the value in a Cookie. Then on Page refresh check and activate the Tab according to the Cookie Value.

The Cookie and Tabs Plugins are already included within Canvas, so you don't need to add them separately. Simply use their API Options from here:

Cookie: https://github.com/js-cookie/js-cookie .

jQuery UI Tabs: https://api.jqueryui.com/tabs/ .

Example: 

$( ".tabs" ).on( "tabsactivate", function( event, ui ) {
	var tabValue = $( ui.newTab ).attr('href');
	// Save the Value in a Cookie
} );

jQuery(window).on( 'load', function(){
	// Check Cookie Value and set the Tab

	if( Cookie has Value? ) {
		$( ".tabs" ).tabs( "enable", cookieValue );
	}
});

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SsupermanageJul 7, 2019

OK thanks. Is there a way to make feature requests?

SSemicolon WebSTAFFJul 8, 2019

Hello,

Absolutely! We are more than open for Feature Suggestions and would love to implement them in the Future Versions of Canvas.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

SsupermanageAug 19, 2019

Hello, that particular tab is using a radio button with data-* to show/hide divs so not actually ui-tabs. Can you tell me which event is used so that I can see if I can maintain the state on refresh, I need this specifically because it has a radio button and I need the value from it.

Thanks

SSemicolon WebSTAFFAug 21, 2019

Hello,

You can consider setting a Cookie Value on Radio Change event and then on Page Load/Refresh you can set the Radio Value based on the Cookie Value. Cookie Documentation: https://github.com/js-cookie/js-cookie .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard