Currently I have 2 pages based on the following URL MyNewApp/purchase and MyNewApp/confirm. On the 2nd page that is /confirm I added a back button with the following
HTML
<button type="submit" class="btn" id="back">
Go Back
</button>
JS
$('button[id="back"]').click(function() {
this.form.action="backToPurchase";
this.form.method="GET";
});
After pressing the back button everything works fine except the URL changed to /MyNewApp/backToPurchase?_method=. How can I set the URL to /MyNewApp/purchase after pressing the back button ?
You Can't just change the URL as you wish.
Think about it, if you could change the URL like that it would be a big security problem.
BUT try to use POST instead, or just send the user to a new page so the URL will change, You have lots of options to solve it, just think.
This is technically the answer to your question, though you might want to think about a better way to do what you want.
window.history.pushState(null, null, “/new-url”);
I would recommend a better option, instead of submitting a form just for redirection, use the following:
$('#back').click(function() {// <-- selecting by id is much faster than selecting by attribute "id"
location.href = '/backToPurchase'; // or '/purchase';
// OR you can do the following :
history.back(); //this will performs as you clicked the back btn from the browser
});
Related
I have a situation where I want to rewrite the back history
for example I am at my page:
http://mysite.example.com
and I go to another page by clicking a link
http://mysite.example.com/sports
Now when I click back, I want to be able to have a parameter appended to the URL
so by click back the users will actually need to go here
http://mysite.example.com?backfrom=sports
Now I know that html5 has apis that I can use but for some reason its not for me
on my http://mysite.example.com/sports JavaScript I add this
<script>
history.replaceState(null, null, "?backfrom=sports");
</script>
but that just change the url and when I click the back button, I still end up at
http://mysite.example.com
What can I do to change the history in a way that when I click back button it includes the parameters.
I think there is onpopstate but I am not sure how can I make use of it.
I think of a possible solution which could be to add the script in the index page of http://mysite.example.com like this
<script>
$('body').on('click','.mylink', changehistory);
function changehistory(){
history.pushState(null,null,'?backfrom=sports');
}
</script>
this will fake the URL and now when I click back from
http://mysite.example.com/sports
I get back to
http://mysite.example.com?backfrom=sports
Thought I would share
Would need to know the selector button to return to the previous page, for jquery or javascript.
to be understood would be something like:
('back-button').click(function(){
});
I want this and I need that when you click back to return to the home of my web.
Thank you very much
HTML:
<button id="back-button">Go Back</button>
jQuery:
$('#back-button').click(function(){
window.history.back();//go back one page
});
Other possibilities:
window.location.history.go(-1);//go back one page
window.history.back();//go back one page
window.location.href = 'http://www.google.com'; //go to google.com
It's about as clear as mud, but I think he is either after this:
('#back-button').click(function(){
location.href = "/urlofyourhomepage/";
});
Or this:
('#back-button').click(function(){
window.history.back()
});
With a button being on the page with an ID of back-button.
Go Back
I don't (or at least I hope not) think that he wanted to intercept the back button functionality of the browser.
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')
}
I have a below anchor as below
<a onclick="return getFile('/log/sample.log');" href="/log/sample.log" target="_blank"> sample.log </a>
Because at my server, the log directory in href may be not correct. So the function "getFile" would change the href to the correct one after asking the server.
The first click always failed since the link was not correct, then after AJAX process in getFile was finished and the correct href was given, the clicks later on was ok.
The problem is how I forcefully let html wait ever at the first click until the href is changed, then do the query on the server.
Thanks in advance.
I guess my current way could be not in the correct direction by using "onclick" to implement the idea.
You want something like this
$(function() {
//assume you tagged all anchors you want to do this for with class=adjustlink
$('a.adjustlink').click(function(e) {
var thisAnchor = $(this); //save reference for later use
//this will either be true (see below) or undefined (falsy)
if(thisAnchor.data('myapp.linkHasBeenTested')) {
return; //continue on
}
// Stop the link from being navigated (the default for this event)
e.preventDefault();
//I'm assuming this is fetched as text but could just as well be JSON or anything else
$.get('/LinkAdjustment/', thisAnchor.attr('href')).done(function(result) {
thisAnchor.attr('href', result); //set the href
thisAnchor.data('myapp.linkHasBeenTested', true);
thisAnchor.trigger('click');
});
});
});
As an interesting side-note. You might be attempting to do something similar to the way REST is intended to be done. You might consider, first fetching a resource that will tell you up-front what the correct links are.
I would recomend setting the href to # initially. And in your getFile, set the href to the correct value and then programatically click the 'a' on success of your ajax
You will need to find the element to do this. It can either be done by setting an id and then using document.getElementById(), or would be easier to do do this using Jquery selectors, and it even has a .click() you can call after.
If you want persist with this flow make your ajax call synchronous, it will forcibly wait.
But this flow is not suggested, I would have rather updated these hrefs on page load or would have set a default url to my server page, which would then redirect to right log file
I have various links which all have unique id's that are "pseudo-anchors." I want them to affect the url hash value and the click magic is all handled by some mootools code. However, when I click on the links they scroll to themselves (or to the top in one case). I don't want to scroll anywhere, but also need my javascript to execute and to have the hash value in the url update.
Simulated sample code:
button 1
button 2
Home
So if you were to click on the "button 1" link, the url could be http://example.com/foo.php#button1
Does anyone have any ideas for this? Simply having some javascript return void kills the scrolling but also kills my javascript (though I could probably work around that with an onclick) but more importantly, prevents the hash value in the url to change.
The whole point of an anchor link is to scroll a page to a particular point. So if you don't want that to happen, you need to attach an onclick handler and return false. Even just adding it as an attribute should work:
button 1
A side of effect of the above is that the URL itself won't change, since returning false will cancel the event. So since you want the URL to actually change, you can set the window.location.hash variable to the value that you want (that is the only property of the URL that you can change without the browser forcing a reload). You can probably attach an event handler and call something like window.location.hash = this.id though I'm not sure how mootools handles events.
(Also you need all of the IDs to be unique)
You can use the code below to avoid scrolling:
linktxt
I'm probably missing something, but why not just give them different IDs?
button 1
button 2
Home
Or whatever convention you'd prefer.
Also, preventDefault
$(your-selector).click(function (event) {
event.preventDefault();
//rest of your code here
}
I found the solution. Here I save an old location from calling href
and restore it after scrolling
<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
if (window.pageYOffset!= null){
st=oldOffset;
}
if (document.body.scrollWidth!= null){
st=oldOffset;
}
setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>
and in body of page
<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a>
Thanks to sitepoint
An easier way would probably be to add it as a GET. That is, http://example.com/foo.php?q=#button1 instead of http://example.com/foo.php#button1
This won't have any effect on how the page is displayed (unless you want it to), and most scripting languages already have tools in place to easily (and safely) read the data.
Well here we are 7 years after this answer was published and I found a different way to make it work: just point the window.location.hash to a non-existent anchor! It doesn't work for <a>s but works perfectly in <div>s.
<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>
Worked fine in Chrome 56, Firefox 52 and Edge (IE?) 38. Another good point is that this doesn't produce any console errors or warnings.
Hope it helps somebody besides me.
There is a solution without any JavaScript at all:
I will not jump to the top
Use
button 1
where
function setHash(hash) {
event.preventDefault();
history.pushState(null, null, "#"+hash);
}
event.preventDefault() stops browser from what it normally would do on clicking, and history.pushState adds to the sessions history stack.
For further discussion, see here and here