Develop Reference

How to navigate from one popup page to another using Jquery in struts2 application

I wish to navigate through multiple pages in a pop-up block. That is, my main page would be inactive when i navigate through pop-up flow as below
[[Main Page]]
[popup-page1]--Next--> [popup-page2]--Next--> [popup-submit page3] --Submit-->
[[Main Page]]
Each page has different set of attributes that are populated by user input such as radio buttons and text fields etc
for instance, below are some of the attributes that are filled on each page.
[page1]--> your name, DOB, country
[page2]--> your preference, your package, direction
[page3]--> email address and submit
How can i retain these values and submit as a form? Do I need to submit each popup page as a separate form or in one shot by retaining all these value till the end?
Note that my application is in strut2 and usually for page navigation I take the help of model driven arch. (putting the fields in one bean and keep a track of value changes using hidden attributes from one form to another)..How can this be achieved using pop-ups. I have limited knowledge about sj:dialog
EDIT
Use Jquery to simulate pop-up navigation by display none and block property. Then, for submit do an AJAX call, this will perform an async call in the background.

In order to navigate through multiple pages in a pop-up block.
I created multiple divs inside the parent div and on click of each continue button I took help of show and hide using Jquery.
At the end of the flow, submit the request to an URL using an AJAX call (GET request)pass values entered by user as params.

Apex - Clear form when leaving page (also on redirect)

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("");
};
});

reload page I lose all values in form

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.

Check to see if a user has came from a 'forward' page

I am currently working on a form which posts to a web service. The form validation is done at the web service and if a validation error occurs the user is presented with an error and a back button.
The form contains a number of default values which I am auto populating. These values then overwrite any values that the user has inserted when the back button is pressed.
Is there a way I can detect to see if the user has pressed the back button and prevent the auto population?

My guess would be you are filling these post load via JS? Because the value attribute should not override new values. If you are, I would just do a check to see if the field is empty before loading in the text.
Also, I would look into the placeholder attribute.

Pass a parameter as part of the URL that your back button sends the user to, then check to see if that parameter is part of the URL of the current page in your Javascript. If it's present simply don't populate with the default values.

can i make javascript persist after a refresh?

In my form i need to select an item (which is a div with text or an image) and i do set the id of a hidden input via jquery live click event.
In the case the user has logged out or session has expired he must go back and refresh the page (after logging in). After a refresh firefox keeps all input data (textarea, text, select, etc). BUT the value i set in the hidden input is reset back to 0 and the user must click the item again.
How can i make javascript remember after a page refresh? Everything else is remembered after a refresh, its natural for the user to expect this is too instead of being annoyed every time some error occurs with his entry.

You can store some information in a cookie, or in the window.location.hash key or in the window.name
All these values will be kept when you refresh.

Try to use type="text" and style="display:none" instead of type="hidden"

Sounds to me you can use cookies to store the selected value. Don't forget to clear once the form has been processed.
EDIT 1
If you have a situation when the user can submit it more time, you must prefix each cookie with an ID to denote the current form.
When the form is presented to the user first time, make a hidden field having the timestamp stored in it (This can be done on the server side). Then you can use this timestamp for the cookie prefix, so you will have cookies for the form that has been generated, and another timestamp for the 2nd form the user works with. You will have independent cookies for each form you open in your browser.
When you submit the page, the timestamp is sent to the server and you can setup cookies. If the user hits the browsers back button, it will go back to a form, where you already have the timestamp in your form's html source, so it will load the cookies for that form.