Deep linking by appending the url based on user selection - javascript

I am trying to implement deep linking in a website.
For example, I have a sample website domain.com/
I have 3 check boxes and based on that filter is happening on web page. If i check first check box, content
in web page being filtered with 1st check box values.
Now, my requirement is to update the browser url as well with domain.com/?p1=filter1
Also, If i load the new url, it should directly show me the web page with the first filter already selected and results as per first filter.
I want to implement this using javascript, jquery.
Where do I start and how to implement? Please help.

Related

How to pass Filters Params to Url and Preload the page with filters using Select Tag > In Webflow [Finsweet]

Scenario of the function:
I want to pre-load the filters on another page when submitting a form from another page.
So in this page >> {LINK1}
I created a parameter and pass the values to another page.
In the another page, which is this: {LINK2}
The URL parameter values will be pre-loaded on the select tags.
I look up in this finsweet article:
https://www.finsweet.com/cms-library/add-ons#add1
That It’s possible to use this.
But I’m using select fields and haven’t found any resources that matches the functionality that I want to achieve.
I tried the finsweet attributes Filter but it only works on 1 collection list. I have 4 Collection List that needed to be filter with only using two select tags [countries, cities].
Live links to re-create the scenario only:
Under (Tell me the Rules Form Section) // creating the url parameters and pass it to another page
https://ride-beam-v2.webflow.io/rider
// getting the url parameters and set it to the 2 select tags
https://ride-beam-v2.webflow.io/beam-safe-academy
So to finalize, I only want to pre-load the filters if the parameter URL exists in that page.
If anyone, knows jquery or how finsweet cms library works or how filter is loaded into the DOM Elements and can guide me to the issue. It would be a great help not only to me but also to other Webflow developers that’s having the same issue as mine.

Navigating back to Search Page with same state (JavaScript)

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");

Saving previous page parameters js, jsp

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.

How to prepopulate few fields in a form, in a survey

I have a share point survey. When we responding to the survey, as we know, it will open NewForm.aspx. this page contains a ListFormWebpart in which questions from survey list will be displayed.
Now, i need to add few labels before the questions and these label values should be prepopulated from query string. What i am trying to achieve from this is, i wll created a link
with some values in query string and send to specific users. different users might have different values in query string. Whenever they click on the link, it should open the survey with prepopulated label values along with questions in list.
I am not sure, how to do it. I have tried to add some html control to web part(using share point designer) and through JavaScript i have tried to set query string values. Then i tried to put asp controls and trued. it didn't work. I am trying since last 2 days. No progress. I am using SharePoint 2003, WSS2.0
Can anybody, please help me to implement this solution.
You may find it easier to create a webpart with a custom form that enters data into the survey list.
The survey lists are useful as they are quite flexible, but your solution will likely make it hard to change your list in future. That means that a webpart specific for this survey may be a valid design decision for you.
An issue with your current implementation is that passing values specific to different users through the query string does not give you any guarantee that enterprising users will not change those values.
This may not really be an issue depending on your situation, but a custom control will allow you to query the current user and make decisions that way.
I have written some Java Script for reading query string, parsing and assigning values to controls based on their ControlID. I have used Content Editor Web Part to add this JavaScript to the Existing Survey page. Then this script has done job of prepopulating the fields.

Show user information on mousehover

On Mouse-over i wish to show user information such as User Id, User Name, User Location, User Age etc. All this info would be coming from database. As well, this information would be in a rectangular block that would actually come-up on Mouse-over.
I am aware that JavaScript could be use to show div (in mouse-over) but don't know how to fetch from database?
Plus the application is a Windows Based Asp.net Application. I am not aware whether that could be possible in Windows based as i'm web based developer.
Thanks for all your inputs.
You could use the jQuery qtip plugin that can display dynamic content, see a documentation at
http://craigsworks.com/projects/qtip/docs/tutorials/#dynamic
and a demo at
http://craigsworks.com/projects/qtip/demos/content/loading
The url parameter should point at an aspx page that show the text that is loaded from database.

Categories