What is the best way to remember the active tabs on a page that has more than one groups of tabs (tabs in tabs).
I am trying to build a layout for a more complex application that has embedded tabs.
You can store the active tabs info in a localStorage variable and when you refresh and reload the page you can access the same and rerender the html according to it.
More info on localStorage:
W3School Explanation
A nice blog on it
Related
I'm trying to build an Android & iOS app using Nativescript core (Javascript). Here in app-root.xml I've a tabview in which I've 3 tabs. Each of the tabs data are related with one another. Example in first tab I show a list of products with 'Favourite' option for each items, if I favourite a product it should show in the second tab. But in my app since the Tabs are loaded while the app is opened the changes are not reflecting when the tabs are selected. But If I close and open the application the changes are shown in the Tabs. Please tell me How I could re-load the tab each and every time when it is selected.
Thanks in advance. Apologies for my poor language.
Generally with web apps you will have a single container and a tab like view above / below container, tapping on specific tab will load correspondent tab item within the container.
But with mobile apps the TabView component loads all tabs on its own container, so it won't have to reload tab when you switch between tabs. That's totally the expected behaviour.
You may use services / BehaviorSubject etc., to hold the dependent data, so when you change it form one tab, the other tab gets updated too.
We have designed the application with tabbed pages layout.
Tabbed Page Style
the tabs are page and are created on click of menu, these are and added in parent container as child DOM element,it is a new form which has input elements,we could have many tabbed pages at a time. my application is in Spring MVC ,PostgresSQL ,Jquery.
What happens when refreshed, lost all the added dynamic new tabs (tabs are pages and we lost the current state).
I could share the reference code if required.
Please suggest how could I manage the state of application.
Window reload/refresh is a pure browser event that ends the execution of the page, you can't really have script continuity after it.
One option is to attach an alert to window.onbeforeunload informing the user that the content will be lost if they reload - this will work with closing the window and refreshing it.
If, however, you need to be able to reload (eg, to load fresh data in the tabs) while preserving tabs, you can use window.onbeforeunload to prompt the user whether they want to save the data/layout before closing, and if so, execute an AJAX call to the server, where you save the tabs (associating it with the session). This would mean that on loading the page you need to first check if there is tab data associated with the session, and load from there.
Other option - and this would be my preference - is to use window.localStorage to save the data on user's disk, and on page load check if there is data in localStorage. It has pretty wide browser support at this point, and there are good libraries that make using it a breeze. I have used store.js and can vouch for its ease and reliability.
Inside an aspx page, there are five fieldset elements. Inside each fieldset next to the legend element, you can find a table element containing many rows. I have added toggle functionality to each legend element so that when you click the legend element the corresponding table collapses or expands. the problem is when you reload the page all tables are expanded. I want to keep the status of each table when the page is reloaded. appreciate any kind of advice.
There are multiple solutions to this answer, such as sending a request to the server to save your state of tables, and redirect this back to the client whenever reloaded. My knowledge of aspx pages are non-existent, so I'm coming up with a different answer.
HTML5 WebStorage
You could use the HTML5 Web Storage, some info can be found here:
http://www.w3schools.com/html/html5_webstorage.asp
An example would be to store it with javascript every time you expand or collapse a table as so:
// Setting into the local storage
localStorage.setItem("table_"+tableElement.attr('id'), "collapsed");
// Getting from the local storage
localStorage.getItem("table_"+tableElement.attr('id'));
Please do note that the browser which this javascript is being ran on, has to support HTML5 and that when the user reloads this page on another browser, it will be set as if the user has first seen the page.
I'm using AddThis to render group of social media icons in the header of each page of my web app.
This is a Single Page Application (SPA), built on Angular.
So whenever the user navigates to another page, there's not a full page reload, but the components on the page are reloaded.
The trouble is, all the AddThis configuration stays the same. So even when the social media buttons get refreshed, the same sharing URL is shown when the user clicks the Facebook sharing button.
How can I clear this and replace it with the current page URL on each page reload?
From mucking around in the Chrome Console, I discovered a global property, addthis_share, which seems to allow me to update the sharing URL.
So I used code like this to updated it on each page reload:
window['addthis_share'].url = window.location.href;
window['addthis_share'].title = window.document.title;
I've encapsulated all the reloading code into a function, addthis_reload.
I had the same problem, but I found out that you could simply call addthis.toolbox() when you want the links to update.
HI i have a ExtJS code on the front end. the drop downs on this page are loaded dynamically thru web-service call to 3rd party service. i have navigated from this page to the results page.
Now in results page i have a button which allows the user to go back to previous page. but all the data in the drop down should be retained.
i tried window.history.go(-1) and history.back()
Guys please help me.
If the navigation page is under different url than result page then it's not possible. You probably should save state of that menu for example in cookies, or in session on server so you could restore that state for each client. Also HTML5 client-side storage is an option.
Another possibility is to change the way result page loads, so you won't need reload page to go back (for example use AJAX).
I am using now extjs4 mvc design. We have a single html page, multiple views, a model and a controller.
On navigating to a new view, you need to hide the previous panels and when going back show the previous panel. This solved my problem of navigating and retaining view.
As above this is not suitable for mvc if you use it for multiple apps and older design where we use onReady().