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");
Related
Current working code to go back one page:
onclick="location.href=document.referrer; return false;
This code allows me to go back by one page only. Are there any code snippets that would allow to go back multiple pages similar to a browser's back button?
I understand there is a go() method to use with window.history.go(-i) but that doesn't solve the need. I am hoping to show a list of pages visited for a user to click on the desired page. This is similar functionality to a browser's back button.
In essence, trying to go back sequentially instead of jumping back x number of pages.
Thanks in advance for all of your inputs.
I have a scenario where I want to return to a specific page after I navigate to different pages. The scenario is that a user makes a search, gets the results in the same page. He can then make updates on the a specific result on a different page. I would like to create a link that can bring the user back to the search result page. I am trying to user history.go(specificnumber), but how can I get the variable specificnumber from when the user make its first search to the number of page visited or loaded after the search. Or am I in the wrong direction for the implementation?
Maybe I misunderstood your question but if you just want to go to a previous page you can use window.history.back();
Otherwise if you want to save all input data from user (to user) and use it to navigate next you can just use document.cookies or localStorage.
I'm currently working on one project which uses jsp, javascript, spring among others. I have a search page implemented where user can search by different criteria. (e.g. http://localhost:8080/service/timesheet/view?status=A&size=100&sort=startDate,asc&page=0&f_startDate_gte=2016-02-01&f_endDate_lte=2016-02-29)
When I click on some entry in this page I am redictered to the new page where a single item is shown. Now I want in this page to have a button which will bring me back to the search page but with the previous configured criterias. But the thing is that I can acces to those single item pages also from other points in application. What would be the best way to do this? Does it need to be done with passing parameters from jacaScript and checking out what was the previous visited page? Thank you for your help!
put it in user session object with a key that uniquely identify it. then you can make the decision based on that key/object pair.
I feel like this is a rather complex question, but perhaps you guys have really good ideas on how to accomplish the following:
I have made a website that is going to be used by Target Group A. They will enter this website through the homepage.
But I also want Target Group B to use the same site, just with a different header and a slightly different homepage (one element is left out). These people will enter this website through a different page on the same site.
How can I let my (WordPress) website determine whether a visitor came in through the homepage for Target Group A or through the different page for Target Group B? Based on the page of entry, I want my site to show the correct header.
If there is a better way to do this, I am open for any suggestions.
You could start a session, and define a variable as soon as they join, if the variable is already set don't do anything.
// Start a session.
session_start()
// Only save the page if the user has not joined before.
if (!isset($_SESSION['has_joined_before'])) {
// Get the URL
$first_page = "http://".$_SERVER[HTTP_HOST].$_SERVER[REQUEST_URI];
// Save the first page somewhere.
// Don't save the first page again.
$_SESSION['has_joined_before'] = true;
}
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