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.
Related
in my React.js project I am using react-helmet to manage tab names. Also I got a table with different page names. When I right click on those pages and open them in a new tab, I cannot see tab name until tab is clicked (see the pic below). So I need to see tab names right after right click and open in a new tab menu. Could anyone advice what is the reason for this and how this can be fixed? Thank you.
Helmet internally uses requestAnimationFrame which doesn't run for background tabs, so unless you focus on the tab the title won't change
However helmet provides a defer prop which if you set to false, the requestAnimationFrame will be skipped
use it like
<Helmer defer={false}>
{/* Your data */}
</Helmet>
Linked github issue
My application has tabs. So in a single session I open multiple tabs and each tab renders some data by doing ajax calls from db. But my problem is when I switch tabs my data gets refreshed each time I switch a tab. How can I freeze the data by not refreshing each time I switch the tab until I close it. I guess it is due to it is destroying the tab view everytime but is there a work around.
Yeah, that's because you would be destroying the tab view.
Workaround:
Set your data to some app level variable(global to only app)
If you have CRUD operations, have a flag to when to delete this data to null.
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.
Hi all this is my first Stack Overflow question, so be gentle.
I am trying to develop an addon with the Firefox SDK. I have a button attached to a panel. The panel intercepts certain web requests and displays them.
My problem is that the panel maintains it's state across all of my tabs and windows. I would like each tab to have a panel with its own state. This way, when I navigate between tabs, the panel will show the data relevant to that specific tab but not the other tabs. I can't simply re-build the panel everytime I switch tabs because then the user would have to reload the page again for it to re-intercept the web requests.
I've been scouring the internet for the last two days trying to figure out how to do this and I can't even find a topic relevant to it.
If you need any more info/code snippets let me know.
You can listen of the hide and show events for the panel and send messages to the panel's content script that can adjust the content there. See this gist for a basic example and of course read the extensive panel documentation.
The best way to think about this is, the panel is a single-page web app. When the user clicks on the button, send the right signals to the panel's content script so it can display the correct things. When the user closes the panel or the panel is closed for some other reason, send in signals to clean up and 're-set' the panel.
If your code depends on a request out to some other site or service, what I would do is:
default state of panel is a 'Loading, please wait' message or animation
on opening the panel, make your requests and then emit a message to the panel's content script with whatever data it needs.
on closing the panel, emit a message that re-sets the panel back to the 'loading' state, so it is ready for the next time the panel is opened.
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