jQuery mobile remember history with back button - javascript

I created an application with jQuery mobile. There is a list of fields that will select a page or another as the sum of their values on different pages.
At the head I have put a navigation button back, but resets the values and results of the previous page.
I would like if the user pressing the back button returns the previous page maintained values and results if you want to modify any of the select.
Is there a way to remember history by pressing the back button?
Code back button:
AtrĂ¡s

Related

Going back to previous page, maintaining data

I have a search page, where once I input some parameters, I get search results back. Some of the values have links in the results, when I click on them it will route me to another page. I have a back button on the new page where if I click it, I want it to go back to the previous results page with the search results still present.
Is there a way to do so in Angular cli?

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.

How to maintain states of selection on back button

I am using HTML and JavaScript to write Android APP, but I have a problem that when go back from current page to the previous page, the page is reloaded and the selection and setting when I made in the first goes to default.
For example: On the first page user can select country and city and then navigate to second page.
If user clicks on back button (which calls window.history.back(); or href="javascript:history.back(-1);")
, then all the selection he made are lost and default selections are shown.
It works fine in native browser of Android.
How to maintain state of selection?
Thanks in advance!
You need to make dummy history to disable history back button.
var originalHash = document.hash || "#dummyMain"
location.assign("#dummyBack")
location.assign(originalHash)
window.addEventListener("popstate",function(){
if(location.hash == "#dummyBack"){
window.history.pushState(null,null,originalHash)
}else{
originalHash = location.hash
}
});
The code above create dummy page history and checks if page transitions are occurred via history back button or not and if so,force page move to current page again to stop history back action.
Since You didn't put any code in the question,It's hardly possible to say it will work or not but I guess once you load this code,it should disable all page back action.
If you are using PC/Mac to use this site,please try to open developper tools/firebug javascript console and copy/paste the code and press history back button to see how it works.
I find a good way to maintain the data of previous page, which use localStorage store the data as key value before leaving this page and again when come back to this page you can get your data again from localStorage` and display it.
Because the data which is loaded by AJAX will be last on history back.
Hope this help someone may has this problem.

Cakephp 2, back/cancel button to go to the previous page

If I have a form, and don't click submit before hand, using standard javascript history.
<button onclick="history.go(-1);">Back </button>
will bring me back to the previous page. However, if I click submit, and error come out (validation).
the back button will bring me back to the same page (the page before the submit error happen).
How can I create a back button where it always bring to the previous page, regardless error of validation.
Thank you
Going by the actual history isn't a great way of doing what you want. What you see happening here, is of course expected behavior, since submitting the form over and over will just add the page with the form to the history over and over. And by design, for security reasons, there isn't a way to check arbitrarily far back to the last page the user was on on your site that wasn't the form.
Therefore, I think a solution in Cake would be better. If the user can only arrive on the page from one place, you could make the button just link back to that page, rather than depending on the history. Alternatively, I would store in session the page that the user came from originally, and be careful to not rewrite it as long as the user stays on the form, and then link to that on the back button.

Setting tab order with javascript

I have a page which has multiple forms. I'm using Mootools sliding tabs so each of the buttons on the menu slide along to the next form. There are 3 forms which are technically on the same HTML page. See an example of the technique at http://creativepony.com/archive/demos/sliding-tabs/
My problem is when a user presses the tab key and tabs through to the last field I want the tab order so it goes back to the first field. This is so the user does not accidentally tab to the next form. The user would end up looping back around the same form fields. For the user to reach the next form they use the menu so I don't want them to be able to tab to the next form.
I am aware of setting tab order with 'tabindex' but this doesn't help me make the user return to the first field of that form.
Any ideas how to achieve this with javascript?
I would do this by making the fields in the forms that aren't visible disabled, so the browser knows to skip them, regardless of navigation mechanism (think accessibility aids).
You can do this via event listeners:
$$(".foo").addEvent("click", function(e) {
if (e.keyCode == 9) new Event(e).stop();
$("#myfield").focus();
});

Categories

Resources