keep state of collapse and expand after page reload - javascript

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.

Related

is it possible to prevent oracle apex from submitting a page until a user clicks on a refresh button on that page?

I have just started working with Oracle APEX and would like users to be able to download reports from my application.The problem is I have a number of reports which have a large number of rows. Each time a user clicks on a page tab, the page is resubmitted and the query for the reports are executed again. This results in a lot of delay and is becoming frustrating for the users!
Is it possible to stop APEX from resubmitting the page until the user clicks a refresh button or is it possible to stop the query for reports from executing everytime the user clicks on a page tab?
To prevent submitting you can change the page template. Open page properties, in the section Shared Components find Templates. Near the word Page you will see a link to its template. Follow this link, then find a section Standard Tab Attributes. In the field Current Tab you will see something like this:
<li>#TAB_LABEL##TAB_INLINE_EDIT#</li>
Change this value to:
<li><a class="active">#TAB_LABEL#</a>#TAB_INLINE_EDIT#</li>
After that an active item in a menu will be displayed as a static text, not as a link.
All pages with this page template will have this behavior. If you don't need to change behavior of all pages: before changing template make copy of it, change the copy and choose the new template in a page properties.
Have you tried with the conditions?? I pretty new with Apex too, I had a similar problem, what I did was put conditions to the buttoms and regions.
After that I good a nice result. Hope it helps you.
Good luck

jQuery Mobile How to prevent a page from going to the default state when refresh?

I'm using jQuery Mobile (no php or xml or anything else) for a web application running on cherrypy and i would like to find out how can i keep the page as it has been set by user even after refreshing.
As an example of the page, see this fiddle: http://jsfiddle.net/xaKXM/5/
in this example, user may input certain text in Response number and description. When the user click submit,user will see #configtable div. if the page is refreshed, user will not go back to the initial page (#labels div' )but to remain in the#configtable` (the one that user can't input anything but can only click activate button")
May be there is a button that would clear all those states and the page will go back to default when refresh?
Is this possible to be done?
if you refresh the DOM using window.open('index.html'); this should clear everything in the page

detecting user closing tabs or leaving the site

I'd like to be able to tell when the user leaves the site so I can update a field in my database (particularly, a last_visit field in order to determine unread items for each user). However, I'm not sure how to manage the fact that sometimes, a user opens several tabs of the site, so I can't use onbeforeunload reliably to accomplish this goal.
Ideally, I would be able to update this field only when there is only one open tab of the site.
On the hand, maybe I could get more functionality by simply using a table to record read items for several days and assuming that threads older than that are read by default.
What do you think?
Regards
All I can think of is using either cookies or local storage to update the time at which they're viewing your site on each page load. This way, once they close all the tabs where your website is open, the cookie/local storage entry won't update, and you can access that value later on when they return.
So run this every time the page loads:
window.localStorage.setItem('lastVisit',Date.now);
And to grab it:
var lastVisit = window.localStorage.getItem('lastVisit');

How can I maintain state in browser JavaScript across different page loads from the same site?

I need to do something very simple, i.e. maintain which panel bar item is highlighted, across different page loads. I'm using this as a menu, and it looks good with the selected menu item highlighted as soon as I click it, when when the link (page) for that menu item returns, the menu is reloaded and I lose this.
I don't really want to use ajax calls to manage session variables just for this if I can keep in local, but where else can I store this menu state?
Cookies, local storage or you can encode the data in the URIs you link to (e.g. in the fragment identifier).

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