I have a tool written in TCL. It uses ajax and the code is wrapped in a form in a single page/domain.
Now, when I click around ajax does what it supposed to do, but when I refresh the page, I keep getting a "Are you sure you want to resubmit this form" popup.
The script below actually does remove the resubmission popup, but goes back to the initial state/function in the ajax. I'm not a js expert, how can I make sure the popup is removed but at the same time stay/call the previous ajax state/function. Thx.
if ( window.history.replaceState ) {
window.history.replaceState( null, null, window.location.href );
}
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.
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!
i am working on asp.net site that contains say three pages
page1.aspx
page2.aspx and page3.aspx
I want if user redirects from page1, alert box asking for confirmation should come. For this i have written following code
window.onbeforeunload = function () {
return 'Are you sure you want to leave?';
};
But this code run on every postback to server including pressing F5.
I want this code to run only when user redirects to any of remaining two pages
how can do this ??
try this code in javascript onload event in the pages only
if(confirm("Are you sure you want to leave?"))
{
//redirect to next page
return false
}
Handling in window.onbeforeunload may not be the straight forward way to do it since the alert message will be shown each and every time you load the page.
What you could do instead is call the confirmation js function in the from the DOM object that could possibly take the user to the different page.
For instance, let us suppose the below anchor tag takes the user to page two:
<a id="pageTwoAnchorTag" runat="server" href="~/Page2.aspx">Page 2</a>
you could add the below onclick event to get your confirmation when the user wants to go the page 2:
<a id="pageTwoAnchorTag" runat="server" onclick="return confirm('Are you sure you want to leave?')" href="~/Page2.aspx">Leave Records</a>
Only asking for confirmation in a couple of places might not be fully satisfying, since it will not trigger in all desired cases. For example, when you close the browser tab or window, your data will be lost.
I suggest to do the opposite: Register for the onbeforeunload as you already do, but include a "guard" which you disable on any action that should not trigger the confirmation (i.e. in postbacks):
window.shouldconfirm = true;
window.onbeforeunload = function () {
if (shouldconfirm) {
return 'Are you sure you want to leave?';
}
};
Register for the events that occur before a postback is executed (e.g. button click events, etc.) In those places, disable the confirmation:
window.shouldconfirm = false;
I am slightly surprised that the postbacks trigger the onbeforeunload event. I though to remember that on form posting the event is not triggered, and that a ASP.NET postback is implemented as a form post action.
I have a javascript method that creates a bunch of elements on click. When I call it from a button, it only stays on the screen for the duration of that click. when I enter the exact same code into the console, however, it stays on the page until I reload or navigate away (which is exactly what I want).
JavaScript code: (it's the only method in the js file)
function post() {
var postTitle = document.createElement('h3');
var nodeTitle = document.createTextNode('Immigration is good.');
postTitle.appendChild(nodeTitle);
etc....
Where I'm calling it in the html:
<input type="submit" id="post-button" value="Post" onclick="post()">
The script tag is in the header of the html page.
How do I get it to stay on the page past the duration of the click? Any ideas why it's being immediately obliterated?
You still need to cancel the form's submission. A return false; from post, if it exists, won't work because the onclick attribute is calling post() but not returning anything.
You could change it to onclick="return post();", but it would be better to attach the handler directly, and to the submit event of the form and not the click event of the button (people do use Enter sometimes!):
document.getElementById('some-form').onclick = post;
Look at what the button does. It is posting!
When you click the button it is redirecting you back to the page you are currently on! It seems like it is showing up and disappearing what is actually happening though is that the page is refreshing.
There are a couple of options to do what you want. Submitting via Ajax or having your server respond with a hashbang/cookie set to direct the page to do as you wish.
having some real problems with jquery at the moment. Basically what I have so far is. The form is submitted once the form is submitted a grey box pop's up with the relevant infomation.
What I need to do though is refresh the whole page then allow the grey box to appear.
I have the following code
$("#ex1Act").submit(function() {
//$('#example1').load('index.php', function()
$("#example1").gbxShow();
return true;
});
the line which is commented out load's the page again after the form is submitted the other code makes the grey box pop-up.
Is their a way to say once the:
$('#example1').load('index.php', function()
has been exucted do this:
$("#example1").gbxShow();
hope this makes sense.
This is not possible.
Once the form is submitted, the Javascript running on the page that submitted the form is completely gone; it cannot affect the page that the form returns.
Instead, you should put server-side code in the form that writes $("#example1").gbxShow(); in a separate <script> block if the form has been submitted.
Why not just submit the form normally (i.e., not using JavaScript) and add a variable to the resulting page signalling the need to display the grey box? Like so:
<?php if(isset($_POST['submit'])): ?>
<script type="text/javascript">
var showGreyBox = true;
</script>
<?php endif; ?>
...
<script type="text/javascript">
$(function(){
if(showGreyBox !== undefined){
// execute code to show the grey box
}
});
</script>
Something like that, maybe?
The problem you have is that the web page is "stateless". This means that you can't do a bit of JavaScript, refresh the page and continue on with your JavaScript. When you refresh the page, you lose your current state and the page starts from scratch.
You will need to re-engineer your design to bear in mind the page lifecycle (i.e. all JavaScript stops permanently on navigation).
One solution may be to use the jQuery AJAX forms plugin, which will submit the form to the server and give you back the result of the submission, which would avoid breaking the page lifecycle. You could then display the box as you wish.
The standard way to do this is to have the server return the gray box contents in the response to the form post.
You could probably do this in jquery by putting the page and the grey box into separate iFrames so that it would be safe from the page refresh