So the problem is that i have a InitialPage.jsp page, that does the next thing when load:
if (<%=(Boolean) session.getAttribute("error")%>) {
showPopupWithError();
}
Login.jsp submits a form that calls ValidationServlet.java, that manages the validations for InitialPage.jsp, so, at the beginning of doPost(...) i set session.setAttribute("error", false), and start doing the validations.
If any input is wrong, the servlet will do session.setAttribute("error", true), and redirect to InitialPage.jsp, continuing with the cycle. As the scriptlets load, the .jsp will get the following code:
if (true) {
showPopupWithError();
}
And show the message.
So i continue loading data to inputs, and when everything is ok, i submit the form again.
The servlet validates correctly (so, the attribute "error" keeps set to false, as i had done at the beginning of the doPost(...)).
The problem comes as, when the next page shows (MainPage.jsp), the user should be able to press the back button of the browser and go back to InitialPage.jsp.
When it goes back to InitialPage.jsp, the attribute "error" is set to true, ignoring the last call to the servlet (when it validated correctly, set it to false, and redirected to the next page), and it automatically shows up the error message popup.
So basically the idea is to find a way to conserve session values after pressing the back button of the browser, and i couldn't manage to do that.
Thanks!
Related
My question is almost similar to question question here.
I am have a standard sidebar homepage, which executes ajax to replace text inside a div tag and show context. All works fine except the back button. The back button redirects to login page.
These are the things I tried : (I am using servlets)
Without any javascript, user is sent to login.jsp on back button, (session is not invalidated).
I have written code in login.jsp to redirect to homepage when user is already logged in.
access = Integer.parseInt(session.getAttribute("access").toString());
if (access == 1) {
RequestDispatcher rd = request.getRequestDispatcher("ajaxContent?url=homepage");
rd.forward(request, response);
//ajaxContent is the servlet loads the sidebar. With the content of homepage in div tag.
}
But back button just displays the previous page, so the java code to check session is never executed.
I tried to add a onbeforeunload function to alert the user on back button.
window.onbeforeunload = function () {
return "Your work will be lost.";
};
But it also displays the alert when saving forms saying "Your data will not be saved", well, that's not a very good way to accept forms, right?
Lastly I tried history.pushState function to replace the history when ever the ajax function is called.
window.history.pushState({}, 'Previous','www.example.com/ajaxContent?url=homepage');
But that just replaces the url in the browser but doesn't load the page. On multiple clicks, it displays login.jsp again. (obviously)
I also found this page which has source code to disable the back button entirely, but I would prefer to make the back button the replace the div tag with the previous content that was in there.
I have this script performed on submit:
function analyze() {
var answer = document.forms["questions"]["answer1"].value;
var item = document.getElementById("content");
item.innerHTML=answer;
}
Script is performed, but div doesn't keep the value, it changes back.
When you do a submit, your page is going to re-render, causing all of your elements to get back to their initial state. So changing the your div or whatever you have in the HTML with class content is going to reset to being back to being blank.
You probably want to save the answer in Browsers LocalStorage or some sort of data structure and then request it out of there.
Save your answer value to localStorage or sessionstorage and then show the same value in your div. If you are submitting form then it will re-load the page and clear the innerHTML of div.
A submit button causes the page to rerender. You have a number of options to prevent that:
Don't use a submit button, use a normal button that happens to SAY submit. You would then run the function "onClick" for the button, not "onSubmit" for the form. (this is what I recommend)
Return false from that function and/or call PreventDefault.
Actually submit it to the server and have the server do the work and return the page (probably not a good choice for performance reasons).
EDIT: you could do something with local or session storage, but that seem a bit rube-goldburg for the problem you have.
I have a page with a form. On this page there is also "go back to previous page" link, which uses the following JavaScript:
window.history.go(-1)
When the form is posted and there is a validation error, the website returns the user to the same form page. However, clicking on this link in case of a form validation error gets the user to the form page before its submission, not the actual, different previous page.
How can I get the user back to the actual previous page by ONLY using JavaScript? Please note that there could be multiple times of form submission with errors.
You could probably use location.replace() in your redirect after validation error.
This will erase the current page location from the history and replace it with the new one, so it has no effect on page history.
Another option is to use sessionStorage to check if the URL has actually changed after going back one page in the history.
window.onload = function() {
document.getElementById("back").onclick = function() {
sessionStorage.setItem("href",location.href); //store current page into sessionStorage
history.go(-1); //go back one page
};
if (location.href == sessionStorage.getItem("href")) {document.getElementById("back").click();} //if current page is the same as last one, go back one page
else {sessionStorage.removeItem("href");} //clear sessionStorage
};
In the demos below (SO doesn't allow sessionStorage) I had to simulate both "going through the history", and "page load for every history item", so the code looks a little different, using an array and other vars and functions, but the principle should be the same:
codepen: https://codepen.io/anon/pen/OgBgGg?editors=1011
jsfiddle: https://jsfiddle.net/j0ddnboq/2/
You could store the "actual" previous page in a hidden form field on initial load and send this along with the form, then in your "go back to previous page" link js you could access that data.
I am building an app where a user can submit a form using ajax and the form will submit and upon success will go back to the previous page and then load two more pages. Here is a little bit more info before I get to my code snippet
I have a list of items and want to add another item. I have a button that will open up an add item form. When I submit the form with AJAX and upon success I want to :
Go back to the list of items in history mainView.router.back() to refresh with newest item and then
Go to the item page mainView.router.loadPage() and then
Go to a task for that item automatically which is another page mainView.router.loadPage()
I want all these three actions done at once one after the other. Going back will prevent the user from using the back button and getting back at the form that has already been submitted, going to the item page will be there in case the user does not want to perform the default action of starting a task for the item. I have successfully tested and can perform any ONE of these actions, but cannot figure out how to call the router functions one after the other simultaneously.
...
var item_id = data.newItem.id;
mainView.router.back({
url: page.view.history[page.view.history.length - 2],
force: true,
ignoreCache: true
});
mainView.router.loadPage('http://app.myapp. com/item.php?id='+item_id);
mainView.router.loadPage('http://app.myapp.com/start-item-task.php?id='+item_id);
...
I'm executing the server action with p:commandButton. After those action is completed, I'm refreshing the form (to show hidden fields) and I show dialog. I've tried also to refresh only the panels with hidden buttons, but the effect was the same:
There is second refresh launched, after I call dialog.show(). The problem is, that the widgets defined inside the dialog and the dialog itself is not existing in the moment! So, when my JavaScript code runs too fast, before the post with update of the dialog finishes, I'm getting an exception, because the object I want to modify doesn't exist in DOM tree.
So my first question, is it possible to avoid such situation and second refresh, can't the dialog be refreshed along with page?
And second, if the first can't be answered, how can I launch my code after those second post finishes? I need simply a callback when refreshing of the dialog component will be completed, and than run my operations.
<p:commandButton id="doTask" value="Do task" widgetVar="doTaskButton"
action="#{service.doTask}" update="#form"
onclick="disableMainButtons()"
oncomplete="async.showAsyncDialog()" />
The HTTP sequence:
// button click
POST http://localhost:9080/myapp/order.xhtml 200 OK
// oncomplete launches dialog.show()
// I receive answer from COMET before the dialog to display it is shown
POST http://localhost:9080/myapp/channel/async 200 OK
// refresh triggered by dialog.show(), only now the dialog is shown and it's widgets are rendered
POST http://localhost:9080/myapp/order.xhtml 200 OK
The workaround, that isn't beautiful from programming point of view is to check if the dialog is rendered and if not, delay my procedure. In case the dialog is still not rendered, delay once again etc.
waitForDialogRendered: function() {
var visible = asyncDialog.jq.css('visibility') == 'visible';
if (!visible) {
setTimeout(waitForDialogRendered, 250);
return;
}
runComet();
}
Not that asyncDialog.jq.is(':visible') returns true even if dialog is not visible for user!
Still, I'd be happier without the need to write such code.