How do I get the previous page with javascript on phonegap?
I want to go back (window.history.back()) only if I come from one specific html file, otherwise I want to go to another html page when back button is pressed.
So I want to know which one is the previous page on history.
I have been googling for a while and I didn't find an answer that suits for me.
If you want something built in you can use document.referrer to get the previous URL. But it might not be reliable for your needs. More info here, here and here
Another VERY simple option is to store the current page name in the session storage, read it and then decide what to do next.
//retrieve the previous page
var previouspage = window.sessionStorage.getItem("page"):
// if thee is no previous page you are on the first page
if (previousPage == undefined){
//do something if you want, this means it's the first page the user is seeing
}
//get current page address
var currentPage = window.location.href;
//store it
window.sessionStorage.setItem("page",currentPage);
//check if the previous page is the one you wanted.
if (previousPage == "the_page_you_wanted"){
// do something.
}
LocalStorage vs SessionStorage
Related
Not sure if this is possible, with or without jQuery. I have a page where there are two dropdown menus; one is showing today's car sales and the other is showing car sales from yesterday. Today's Sales is always rendered on page load; when a radio button is checked the Comparison Sales is then rendered and an extra path is added onto the URL.
The issue I have is that when a user is sent the url with the extra path (i.e the comparison menu has been selected prior to the link being sent) the text etc of the Today's Sales dropdown won't populate when they open the link.
So for eg:
URL with no comparison:
http://www.example.com/today/sales
URL with comparison dropdown open:
http://www.example.com/today/sales/compare/yesterday
I want to create an if statement to say something like
if(link.pasted) {
//do this
}
Again not sure if this is possible.
You seem to have redirected an entire page to a different URL when the user makes their selection, instead you should consider using a hash at the end of the url to indicate the "comparison" has taken place.
So you'll end up with two urls, both of which could be pasted into a browser
http://www.example.com/today/sales
http://www.example.com/today/sales#compare-yesterday
It is easy enough to apply the hash to the first url on a javascript action
$('input:radio.compareYesterday').click(function(){
location.hash = "compare-yesterday";
});
You can also watch for a change in the hash location, in order to perform some update to the view - I suggest you wrap that up in a function, as you'll be doing it onload too!.
function updateUI(){
if(location.hash == "#compare-yesterday"){
// do whatever happens when comparison is active
}
else{
// reset the UI to its default state
}
}
$(function(){
$(window).on('hashchange',updateUI);
// other onload stuff
updateUI();
});
This fiddle demonstrates however jsfiddle does not allow me a url that goes direct to the result in a way which passes the hash through - so although the code is there I cant demonstrate that it would also work if you went directly to the #compare-yesterday route.
This is the basis for how Single Page Applications deal with routing, and how to adjust the view depending on the users actions (or indeed, if they've followed a link into your SPA). You may like to have a look at frameworks such as Angular if you're interested in learning more.
Depending on the entire architecture of your page you could propably set a js variable to some value on dropdown selection. You can then check if this variable is set to determine if the user got to this page just now.
Is it possible to alter the url of a webpage so that it will activate specific click-activated features on the webpage without the user having to do the clicking?
To better illustrate my question I made this fiddle.
The page loads with a red box with information in it. The user can click the box once to see new information. They can click it again to see a third piece of information.
I would like to have urls that load the page with specific information showing. For example, if the main url for my page is http://www.mypage.com, then I would like to have urls http://www.mypage.com/#info2 and http://www.mypage.com/#info3 so that when the user enters the info2 (respectively, info3) url, the page loads with the second (respectively, third) piece of information showing.
Remarks: I have searched some other questions about activating scripts with hashtags, but have not found something I can understand or implement into what I want to do. In particular, I need my hashtag urls to be able to implement a sequence of several actions (e.g. two clicks to get info3 in the above example).
Remark 2: I am open to other solutions too. I just need someone to explain how to accomplish what I am trying to do.
You could use this after you define your click handlers.
if (window.location.hash == '#1'){
$("#info1").click();
}
if (window.location.hash == '#2'){
$("#info1").click();
$("#info2").click();
}
Not sure if any of this works -- I didn't devote much time on it, given the state of the question, but consider:
var hash_page = (window.location.hash+'').replace(/^#/,''); // get hash and parse
var page_number = hash_page.match(/\w+?(\d+)/)[1] || 1; // get the number
var next_page = page_number + 1; // get next number
$('#info'+page_number).click(function(){
window.location.hash = 'info' + next_page;
});
Assuming that your red box is a div like this:
<div class="redbox">...</div>
and that you have three blocks within it (info 1, 2, and 3):
<div class="redbox">
<div class="info1">...</div>
<div class="info2">...</div>
<div class="info3">...</div>
</div>
With jQuery you could do something simple like this:
jQuery(".redbox").click(function()
{
if(jQuery(".redbox .info3").is(":visible"))
{
return; // all done already
}
if(jQuery(".redbox .info2").is(":visible"))
{
jQuery(".redbox .info3").show();
return;
}
jQuery(".redbox .info2").show();
});
I'm not too sure why you'd like that in the URI. The only reason for such would be in case the user comes back to that same place and you'd want them to see the page in the same state. If that is important, then yes, you should use the window.location.hash to change the URI. That way, if the user comes back you can test the hash and setup the status as required on load. However, note that the hash does not get sent to the server. It is only a client thing.
My solution supposes that info2 and info3 are already loaded. It is also possible to use the load() function to load them dynamically. It depends on their size and whether you do or do not want that information to be visible when the user does "Show Source".
There is the reason why some systems use the "hashbang" feature in their website:
https://developers.google.com/webmasters/ajax-crawling/
Google, at some point, said they would drop that functionality, but it looks like they have not done so and actually continue to encourage people to use that methodology. Twitter has been using it for a while, but from what I can see they don't use it anymore.
I have 16 database results shown on my website. Using a load more button, the user can load the next 16 database items and they get appended into the container.
Im trying to make a way so that if the user clicks back after visiting a link, they will get shown the same amount of results as they had loaded.
My plan for this is to add a page number to the url after each load more function. When the user clicks back in the browser, i can then use that parameter in the LIMIT php claus.
So, in my ajax response, i append the data and then i wish to add a page number to the url, or update the page number if there already is one.
An example of what i want to achieve is:
www.mydomain.com/?page=1
I have made a jsfiddle with a basic button click function just for testing since im away from my laptop until later.
jsFiddle
And the code just incase:
var url = document.URL;
var pageID = '1';
$("#addtourl").click(function(){
// add page id to the url
alert(url);
});
Where the url is alerted i want to modify the URL. I already create a page ID so thats not an issue.
Thanks!
You can use the HTML 5 history.pushState function as explained here .
So basically I have two html pages in the same folder. One of them is the homepage, while the other is a page that basically is a form. Once the person fills out the form and clicks the submit button, I would like to make it so that it automatically changes the homepages information with the information written out on the form using DOM.
What I have tried:
Using an external & same JavaScript file for each HTML document, Firefox console said that the id is null
Using global variables, did not work.
If I haven't worded this well enough or if you don't understand, please comment and tell me!
Here's an example of what I tried to do, didn't work because the div with id type is in a different HTML document.
function submitform(){
var textbox = document.getElementsByName('name').item(0);
value= textbox.value;
window.alert(value);
document.getElementById('type').innerHTML = value;
}
Passing variables to one page from another requires some form of query with paramters, ie. newpage.php?newdata='This came from the old page'. You'll need to implement one of several options: as already mentioned, you could store the submitted data in cookies and then retrieve them on the subsequent page load, you could send the data back to the homepage using an actual submit query (see above) or you could use an AJAX routine to send the data to the home page without any type of submit action.
Form page:
function submitform(){
var textbox = document.getElementsByName('name')[0];
value = textbox.value;
localStorage["name"] = value; //save it in localStorage
} //for later use
Homepage:
function showStuff(){
var value = localStorage["name"]; //get the information back
document.getElementById('type').innerHTML = value; //put it in
}
localStorage is supported on all major browsers. If you need to support < IE9, try jStorage.
Try a DEMO: http://jsfiddle.net/DerekL/r4fXw/ or http://pastebin.com/SurbLhWZ
Why none of your attempts works
Using an external & same JavaScript file for each HTML document, Firefox console said that the id is null
Variables are not shared cross different webpages.
Using global variables, did not work.
Same as #1.
I'm having trouble searching for an answer to this, I think because the key words are too general and related to other things.
I have an index page with a records search form (AJAX) used to load records into the main div on the page. When the page first loads, the form is set to a specific state based on who the user and the contents of the div are loaded based on the same criteria. When the form is submitted the contents of the main div are replaced via AJAX.
If a user clicks a browsers REFRESH button, or goes to another page and clicks the browser BACK button, the index page comes up with the form in the same state it was when the user clicked BACK or REFRESH but the div contents are the original default contente. This makes it looks like the items listed are a result of the forms current state.
Is there a way way to detect if the page has been displayed from a a BACK or REFRESH browser action so that I could trigger the form to submit and update the contents based on the current state of the search form ($('#search_form_submit_button').click();)? Or, what is the proper thing to do for this?
Thanks - much appreciated!
If the form has a default value such as "" or "Search here.." you could check if the default value has changed and then submit the form:
// If the input value is different from the know default
if($("#search_form_input").val() != "Search here..") {
// Update the results on the page
$('#search_form_submit_button').click();
}
And call that on page ready - so inside the $(function(){ /* content here */ });
Also, have a look at History.js - https://github.com/browserstate/History.js
It provides a really complete history management system. It supports jQuery amongst several other libraries.
EDIT:
I will address some things Reno mentioned in his comment.
You can use this small library Session variables to persist data over page changes. Download the js file from that link and include it in the <head> of your document:
<script type="text/javascript" src="sessionvars.js"></script>
Then when a user makes a search, store the search in the sessvars object which is now available across pages:
sessvars.myObj = { searched: $("#Search_form_input").val() }
Then when the page loads, check if sessvars.myObj.search has a value in it. If it does then search for that value:
if(sesvars && sessvars.myObj && sessvars.myObj.searched) {
$("#Search_form_input").val(sessvars.myObj.searched);
$('#search_form_submit_button').click();
}
See the jQuery Address plugin.