Issue with tab view data persistency in Openui5 - javascript

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.

Related

chrome extension manifest V3 - how to clear storage on specific tab close?

I have a bit of complicated chrome extension which it's task is to scrape an HTML table that spans over multiple pages, each page is backend-rendered.
Thanks to the extension mechanics, I can store the table data in storage.local, and once the extension auto-paging to the next page, the extension adds up its table data.
So far it works like a charm, but the problems starting once I close the tab where the table is. The final goal is to clear the table data storage object only when the user closing the exact same tab where the scraping was active.
So far I've tried the following approaches:
chrome.tabs.onRemoved - as described here, doesn't work - it activates on every closing tab, what I'm not interested in. I cannot catch the active tab before it closing because the chrome already unloaded the tab and the active becomes the one I just moved into.
window.onbeforeunload or window.unload also doesn't work - it triggers every time the page is refreshing or moving to the next table page (remember - it's a backend rendered table, table with multiple pages triggering the unload with every page change)
My question is - How can I clear the storage once user shuts down the specific tab the scraper was working at?

Nativescript TabView Loads only Once

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.

Tabbed Page layout lost state when when refreshed

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.

Firefox SDK different panel per tab

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.

how to navigate to previous page without refreshing it.in HTML

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().

Categories