I'm struggling with refreshing a page with an anchor.
I have a page test.php#one and send a POST form on that page. If I confirm the alert box (I use a custom alert box),
this.ok = function()
{
document.getElementById(\'dialogbox\').style.display = "none";
document.getElementById(\'dialogoverlay\').style.display = "none";
window.location.replace(document.URL);
}
the box dissapears, but the page won't refresh.
I tried every result google gave me, but the page simply won't refresh, if there is an anchor in the URL.
I would be happy for any solution that will reload the page to the same anchor and won't send the POST form twice.
Thanks for any help!
I think this is what you want.
window.location.reload(true);
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 build a page to modify a product. So I have a form with product data.
I added a button that, when we click on it, does some stuff in Ajax. At the end of the treatment, I just want to refresh my page (because I display a flash message of confirmation). In short, I just want to show my page (not submit it).
This treatment is completely something else than modifying product data.
I tried these different solution :
window.location.href = window.location.href
// or
window.location.reload(true);
// or
window.location = window.location.href;
// or
window.location.href = window.location.protocol +'//'+ window.location.host + window.location.pathname;
// or
location.reload();
Everytime, it submits my form and my product is updated !!
But I don't send any post data. I just want to do the same action than if I push F5 on my keyboard = show my form (not submit it).
Any idea ?
EDIT
Don't forget to add <button type="button" ... or it's a submit button by default.
Rookie mistake...
Another solution is to display the confirmation message with jQuery without refreshing the page.
Don't forget to add <button type="button" ... or it's a submit button by default.
Rookie mistake...
Another solution is to display the confirmation message with jQuery without refreshing the page.
Your form may be submitting because the default type for a button is submit. Try changing it to button.
I have a PHP page with implementation of jQuery horizontal tabs. I have added a jQuery script so that the page URL reflects the tab#. I have a form on the page and upon form submission I need to refresh and stay on this same page to include the jQuery correct tab number.
This is the code to add the jQuery tab number to the URL:
<script>
jQuery(function($) {
$("<p>").html("Loaded at " + new Date()).appendTo(
document.body
);
showTab(location.hash || "#tabs-1");
$("#nav a").click(function() {
var hash = this.getAttribute("href");
if (hash.substring(0, 1) === "#") {
hash = hash.substring(1);
}
location.hash = hash;
showTab(hash);
return false;
});
function showTab(hash) {
$("div.tab").hide();
$("#tab-" + hash).show();
}
});
</script>
The full URL of the page is http://somedomain.com/includes/nonadmin_user_profile.php#tabs-5 and includes the tab number for the jQuery horizontal tab.
I am using this script to refresh and stay on the same page: echo "<script>window.location=window.location</script>";
On refresh here is the problem as it lands at this URL which does not include the tab number. http://somedomain.com/includes/nonadmin_user_profile.php
Any suggestions would be appreciated very much.
Here is another detail: The problem described above does not occur if I merely refresh the page with the browser refresh button or if I right click the page and refresh. In this instance the page refreshes and stays on the full url with the tab#.
Per Disaster Faster's request, the issue encountered was simply that the browser was not going to the desired location of the page. The form data was successfully submitted and correct page was loaded.
The solution to his issue was modifying the form's action attribute to include the location information (similar to adding location information to an anchor).
Original:
<form action="nonadmin_user_profile.php" method="post">
New:
<form action="nonadmin_user_profile.php#tabs-5" method="post">
Original Post:
The window.location = window.location redirect should include the location information.
JSFiddle: http://jsfiddle.net/6dqcmh9d/
If you click the button first, it'll report the URL with the location information because it hasn't been added to the URL. Then click the link and re-click the button. You'll receive the URL with the location information added.
If you want just the location information, you can use window.location.hash, but this will only produce the location on the page, not the URL of the page.
The problem you'll run into will be with the form submission. To submit a form without changing the page, you'll either have to submit the form to a new window (add target="_blank" to the form) or implement AJAX. In either case, we'd need a little more of your code to help with integrating it properly.
It is likely that the tab controls are being handled with onclick events or something similar, and are not listening for hash changes onload. You'll likely need to add some custom JS to force the tab change if there's a hash change.
What's wrong with using the reload() method?
document.location.reload(true);
From the docs:
The Location.reload() method Reloads the resource from the current
URL. Its optional unique parameter is a Boolean, which, when it is
true, causes the page to always be reloaded from the server. If it is
false or not specified, the browser may reload the page from its
cache.
If you need to integrate it into a PHP echo struct, use:
echo '<script>document.location.reload(true);</script>';
You should use reload() to refresh the page, eg:
window.location.reload();
Or given your example:
echo "<script>window.location.reload();</script>";
I have a website where the subscription form will appear when user click on a subscribe button and will add # to the url(http://signature-bravo.dev/#subscribe_form).
My question is how to make the page reload (usually when user click back button on browser) without showing the subscription form even the url is still http://signature-bravo.dev/#subscribe_form. It just appear when user click on a subscribe button.
How to archive this?
Thanks in advance!
If you are using jQuery this should work:
$(window).on('unload', function(){
window.location.hash = '';
});
It still leaves the '#', but nothing after.
If you don't want to use jQuery, you can use this code:
window.onunload=function(){
window.location.hash = '';
}
imagine the following scenario:
i have a jquery-mobile formular, it´s results are linking to its resultpage.
on the resultpage i have this back button:
this works fine to just update the content and keep the submitted form data,
but
what if a user came from a search-engine or similiar extern link, then my back button links back to the searchengine/externLink .
so how do i Differentiate between those who came from my form or anywhere else in a jqm-way ?
i have a "start-search-page" i would love to link to if the user didn´t came from the search and i don´t want to miss the ajax-link from my search to the resultpage, use the same button and idealy i don´t have to set any cookie.
is there any hint or smarter attempt than check the server url from document.referrer ?
thanks in advance
You can check current page url using below code:
var prevUrl = $.mobile.activePage.data('url');
in case u want to perform different actions based on previous URL.
then on save the URL in the global javascript variable and on click of the button check the previous URL and do the your functionality. eg
Before Navigating to page:
var prevUrl = $.mobile.activePage.data('url');
on click of button:
if (prevUrl=="myurl") {
//do something
$.mobile.changePage('#search')
}
else {
$.mobile.changePage('#nothing')
}