I have a javascript portfolio filter on a page that sorts logos by category, it assigns a category anchor link to the URL.
I'd like to use this anchor link URL to trigger an insertion of text. I can trigger the insertion of text via onclick with no problem using:
document.getElementById("insert-text").innerHTML
This works fine, but when you click on category logo & go to new page, I want to be able to hit "back" and still see the same results. The text insert disappears.
I was thinking something along these lines:
Get URL (with anchor)
if URL = certain category anchor
insert text
if URL = other category
insert other text
etc...
I think my logic is correct, but not sure of the syntax? Any suggestions would be greatly appreciated!
What you are asking to do is to save the state of a page so that when you go back to the page your browser returns to where you left off. This is what browsers use cookies for. Cookies are a set of key/value pairs that your browser stores and you can retrieve the values on. You could put a boolean in the cookie that signals whether your function has been triggered, on page load you can read the cookie and if it is set to true retrigger your function.
W3schools.com has a nice writeup on cookies to get you started.
This jsfiddle shows how you can expire the cookie logically.
document.cookie = 'ExpirationCookieTest=1; expires='+exp.toUTCString();
Related
How do I, using JavaScript, retain the state of the search page, when a user clicks into a search result, but then goes back to the main search page.
e.g.
HTML:
https://startech-enterprises.github.io/docs/guides/data-analytics/data-analytics.html
There are 5 elements that determine what is shown on the page:
What tags are clicked in the three filter menus, on the side
What search term is typed into the search menu bar, at the top
The pagination page that is selected, at the bottom
Problem is that whenever I go into the search result, and navigate back to the main search page, the search page resets itself, so I have to re-enter the search criteria again - which can be quite annoying.
If I click 'back' in the browser, the search page state is retained, but the search script stops working. Also, using the 'browser' back button only goes back one 'link' - so if the user clicks on several links in any page (returned from the search), they have to press the 'back' button many times, to get back to the main search page - which again isn't ideal.
Any ideas on how to solve this? Would seem like a fairly common problem?
The site is purely static, (generated using Markdown and Jekyll). Site interactivity is set with Vanilla JavaScript, and SASS/SCSS.
Pls do help!
Many thanks in advance.
Sachin
UPDATE: This has now been solved based on the answers given below
You can simply do it by saving the data in users device . You can do it by using cookies or by localStorage. I prefer localStorage because users can deny cookies easily.
Like this-
localStorage.setItem("tags",tagItemsInAnArray);
And laterlocalStorage.getItem("tags");
You can use localStorage to keep the search filter data. The concept is to keep all filter data in an array and keep that array in the localStorage of the browser before any redirection. Here is an official documentation with implementation of localStorage.
Here is a demo:
//before redirection
let filterData = [];
localStorage.setItem("searchFilter", JSON.stringify(filterData));
//after page-load
let cachedFilterData= JSON.parse(localStorage.getItem("searchFilter"));
if(cachedFilterData.length>0){
//cache data exist
}
//when you need to delete cache
localStorage.removeItem("searchFilter");
I have a page that hides the query string parameter on load by using the pushState method in javascript. For example this is the original url,
www.iprocess.com?acsn=23423432423432434;
what it does is it hides the acsn parameter on load. so it looks like this
www.iprocess.com
problem is when I click a link inside that page and then goes back to that page it only read www.iprocess.com without the query string parameter so the data does not load.
What I want is if the user go back to that page it loads the query String parameters at the same time hides it.
This the code:
window.history.pushState('currentpage', 'Title', window.location.pathname);
Instead of using pushState, use replaceState, this way it won't keep the parameter state in history.
Note really easy to make a live example, but here is a plnkr.
Please open the windowed mode ( in the top right corner)
I've tried doing some research on the various jquery history plugins, but I can't find any examples for my situation, so I'm starting to think maybe what I'm trying to do is not possible.
We have a very complicated search page that updates with ajax. Users search using a ton of options, and they get back a list of results which they can sort, page etc. Then if they click on one of the results, it navigates them to another page to view the details. However, if they click Back they do not return back to how the page appeared after all the ajax and javascript updates. They see the search page with none of their results.
I was hoping that I could pull of something with adding a hash before they navigated away, or using one of the jquery history plugins to achieve something similar, so that when they clicked Back, it wouldn't RELOAD the search page, but would just show them their cached version (how it last looked when they clicked on one of the results).
From what I've seen, it looks like most of the examples I've found for ajax and back buttons use a hash value that tells the page how to arrange itself, even allowing for bookmarking the page that includes the hash. I think for me that would mean that I'd basically have to serialize everything in the search page into a hash value, which doesn't seem practical unless I am totally misunderstanding how it works.
Does anyone out there know if this possible?
There are at least 2 ways to do what you want:
"Classic" - store all user search options in cookie or in session, like "last search". So, when user navigates to search page during session, you can read cookie / session and show last search results with that options.
"Modern" way - use HTML5 history API - on each search form a search options object and push it in via history.pushState - when user navigate to other page and then presses "back", browser will use this state to perform a search.
If it's that complex, better you develop your own solution without any plugin. Just use location.hash to get and set hash value and store all form input elements and their values after hash like a querystring input1=a&input2=b
On every form submit update hash querystring
If user navigates back in history read hash value parse it and update your form fields and submit to get search results automatically.
you can check out SammyJS this is the plugin I used for ajax history. Hope it helps
So, I want to change the display style of one of my divs, here's the code in my javascript:
document.getElementById("header1").style.display='none';
Now the problem... header1 is a div id on a different page, but I want to affect that from selecting an option on the current page. How do I go about doing that so that the header1 will be hidden when I go onto the next page?
Thank you in advance!
You cannot change the properties of an element that has not been loaded into the browser yet. You would have to use a cookie or the querystring to tell you to hide the element when the page is loaded.
Edit
You can redirect to a new page using the following javascript. Note: everything following the ? is part of the querystring.
// Redirect without querystring
window.location = "http://www.mySite.com/default.html"
// Redirect with querystring
window.location = "http://www.mySite.com/default.html?hide=true"
// Redirect with multiple values in querystring
window.location = "http://www.mySite.com/default.html?hide=true&test=1"
Check out get-query-string-values-in-javascript to see how to retrieve querystring values through javascript.
You could pass the value to the next page in a hidden form field or possibly via the url then when that page loads use that value to set the desired value on the page.
how about carrying the value/selection to the other page using local/session storage, or even indexDB, if you have a lot of information to carry or you are carrying across multiple pages. saves having unneeded POSTS and removes the need for any server side code
I have a web site that displays a table of contents, and I'd like to use the Google Plus One button as a kind of persistent "favourite" marker. So a user would Plus One a page, and then in my table of contents I would show that page as being "Plus Oned" somehow (either bold the entry, show a plus image or something similar).
So is there any way to call the Plus One api to find out if a URL has been "Plus Oned" by the current user?
Note that I don't want to get the plus one count (as shown at http://www.tomanthony.co.uk/blog/google_plus_one_button_seo_count_api/) and I don't want to have to manually intercept plus one clicks and store the details myself.
http://www.tomanthony.co.uk/blog/google_plus_one_button_seo_count_api/ may do what I want. The isSetByViewer parameter that is returned is possibly what I want, but simply calling the web service as described in the web page always returns a isSetByViewer value of false. I would assume that some other undocumented data or cookie/header information would have to be sent to the web service identify the current user.
There is a pos.plusones.getSignupState in the hidden API, which you can try to experiment with instead of pos.plusones.get. Other than that, I think you should specify the G+ user id in the userID parameter.
Furthermore, you can try to sniff the network traffic for the +1 button with wireshark, webkit inspector and chrome://net-internals (watch SPDY traffic to client6.google.com). OR you could try to debug the js code with step to find what variable makes the +1 button highlight.