I am creating a webpage using jsp and tiles. My issue is that I have a timer.jsp attribute in my tiles page which acts like a countdown timer. I want its value to remain unchanged on refreshing the page. Is there anyway I can do this?
In order to preserve the value of a client-side timer across refreshed you have to store it in the session via ajax. Something like (with jQuery):
$.post("storeInSession", {value: $("#item").val()});
where /storeInSession is mapped to a servlet (or action, depending on the framework in use) which gets the value request parameter and sets in as session attribute.
Related
I am using jquery to fetch inner html value of a div in home page, and I want this value to be accessible in all pages. The problem i'm facing is that the div from which i'm getting the value is present only in home page, so when the script runs in other page, the value will be undefined as the div is not present.
The issue is, they are displaying a message in bottom of home page and we want it to be displayed in top part of all pages. so I used jquery to extract the text content and display it in top part, but when we go to other pages, the script fails as the bottom of that page wont have the message.
store it in a local storage:
localStorage.setItem('myItem', myValue);
and then you could Access this item on all pages
var item = localStorage.getItem('myItem');
https://developer.mozilla.org/de/docs/Web/API/Window/localStorage
You can use web storage objects like: sessionStorage or localStorage,
but be careful with the data you store, which determines which method to use.
Data in sessionStorage is cleared when the page session ends.
Data stored in localStorage has no expiration time.
You can use Window localStorage Property as solution to your problem. Another option is sessionStorage. It depends what you trying to achieve. Look at the definition for both of them and use appropriate.
I have done some changes in HTML page dynamically by using jQuery. And if I reload the same HTML it will gets to its initial state. But i don't want that to happen. Is there any way to get it done or save the changes made using jQuery?
Thank you.
If you wish to make changes to a file using jQuery and load it back on the reload you need to use a database in order to save those changes. You can use AJAX or even pure JavaScript to transfer those changes from your form to the database.
And once the changes are saved you can use a combination of PHP, MySQL query and JavaScript or AJAX to dynamically load the changes from the database on to your HTML page or if you want to make it more simple then just use a JavaScript function on page reload to fire a PHP code which will check for changes and if there is any, those will be loaded on to your page.
HTML5 local storage is a temporary solution this will also get retested once you close your browser or clean the browsing data.
You would need to get the innerHTML string and save it to the database or via HTML5 localStorage.
Then onload, all you have to do is check for an existing page state and then insert that as an innerHTML to your parent container:
if(savedState){
myParentContainer.innerHTML = savedState;
}
Where savedState is the variable that holds your html code.
To save the state, you would need to design a save function that would fire every time changes are made or when the user clicks on a save button. As I have said, you can save via HTML5 LocalStorage or via a database. Be wary that HTML5 LocalStorage is very small and can only accommodate several megabytes.
You must need to save your HTML after made changes using Jquery. you could save it by ajax call and save into database. so when you reload page HTML fetches from database so it would work.
Currently, if I populate a form and leave the page, the form entries will still be present when I return to the form. Is it possible to prevent these entries from being saved?
The items' default values are populated using PS/SQL, but the content can be adjusted.
I tried creating a dynamic action to clear the items on 'Page Unload', but this didn't do anything. Is this the correct browser event, or did I simply get the implementation wrong?
Update: To provide a bit of context...
Pages:
Home
Form
DML Form (insert) - I want any modifications to not be stored
Page 3 can be accessed via Page 1 or Page 2.
If the user accesses the form via Page 2 (a different form), they will have selected a specific value and this is used to populate default values on Page 3 (via item and PL/SQL Function Body).
If the user accesses the form via Page 1, the same PL/SQL will run - this may result in Page 3 form items being empty (NULL default values).
HOWEVER, when the user edits Page 3 items (changing from default values), these values will persist when the user next accesses the form. How can I prevent this state from being captured?
You will need to clear the cache of the page. This will clear the session state of the items on the page and thus result in items being empty once again.
You may need to add this clear on several locations. If you have used column links to access the page, buttons with redirects, branches, etc. The apex URL has a part which states which pages have to be cleared, and you can generally define this clearing of a page cache declaratively.
You can also create processes where you can define which page (or pages) has to be cleared. For example, if you always want the cache to be cleared when entering the page, no matter where you came from, you could add a process on the page doing just that.
Session state is ultimately what is causing this behavior: go to the page, change some things, page gets submitted for whatever reason and causes session state to be saved.
Usually, on DML forms generated through the wizard, the cache would only be cleared when using the "create" button coming from another location (usually the overlying report).
Here is the (apex 5.0) documentation on session state and managing it.
You can do it with something like this, but first you need to add jQuery to your page. I recommend using a content delivery network (CDN). You can edit the code to clear the value in your type of forms. I hope this could help you!
jQuery CDN example
$(document).ready(function() {
$("body")
.find("input").val("")
.end()
.find("select").val("-")
.end()
.find("textarea").val("");
};
});
Am using onLoad function of html page to fetch the data from server and to update the table rows with angularJS ng-repeat. Whenever I go to another html page and returns back, onload function is executing and it causes a delay. I need to return to the previous html page without refreshing the data.
You've got a couple of options -- the best one tends to be saving a flag inside of a window.sessionStorage and storing the data there as well.
Note that sessionStorage is unique to each window/tab and is temporary, unlike localStorage which is more long term.
You can even set a time/date stamp to determine how old the data can get before it is considered stale and needs refreshed.
I have made a web form that has some fields that are manually entered, others that are a dropdown, and some calendar fields that are in javascript. My latest addition has a dropdown that is populated from a selected value of a previous dropdown. When it reloads the form, I lose all of the previously entered values and only retains the value to the one dropdown. Do I have to capture all the values, or is there a way to just populate the 2nd dropdown without reloading the form?
-.- one word. AJAX. use it.
any time you reload a form you will lose all unrecorded data period.
If you must reload the page save all the data in a cookie or something.
There's a way to save data without ajax and whithout sending anything to the server. It's called sessionStorage.
// store item
localStorage.setItem("index", "value");
// retrieve item
var data = localStorage.getItem("index");
So you just have to save the datas with sessionStorage after any action (click on a button, keydown, mouseleave…) and whe you reload the page, you just have to populate it again from the data you have stored in session!
I assume that by reloading the form you mean submitting it, which then returns a version of the page with the second dropdown populated according to the submitted first dropdown. If that's the case, you might consider having all possible values of the second dropdown hidden and then populating it with JavaScript after a selection in the first one is made. If the amount of possible values is very big or has to be computed server side (as in, you cannot know all the values initially) then you could use AJAX to submit the form and avoid reloading of the entire page.
Check your page's cache-control. This attribute tells the browser to rely on its own cache to reload pages.
This can be set as a meta tag. For example:
<meta http-equiv="Cache-control" content="public">
But a better approach (in my opinion) is through the server-side, using the header()function.
Note that some prefer to set it to no-cache when it comes to forms, in order to avoid spam and also for security reasons.