Multiple pages requiring auto refresh with different options saved on each - javascript

I am currently working on a project where the user lands on a page to build custom looping maps. When the user picks the type of map, a new browser tab (this is directed to happen, I have no say in the matter) opens with that particular map looper. There are controls for speed, start and stop times, and a checkbox to enable a 15 minute auto refresh. Currently, I use JQuery to capture the dropdowns and checkbox, save the values to a cookie, and then load those back when the page refreshes.
This obviously works fine, except that in meteorology, I may need two maps open and looping. Sometimes even more. If I use cookies, that second map will use the values as the first. If I change the options for the second map, the first one will refresh with those options. This is not ideal.
I see sessions and cookies the same. If I am opening tabs, those values will persist through each map looper. My other option is maybe use a hashtag on the URL and keep the values selected there and parse that back in on the refresh. Am I missing something? I would rather not use hashtags because it seems messy, but I cannot figure out how to have multiple tabs using different values within the cookie. What if the user has 10 tabs open? My question is, for this application, which is the best solution to implement?
We utilize javascript/JQuery and php within the pages. Our product must be compatible with Chrome, Firefox, and IE.

Prepend a unique id to the cookie data that matches an individual map. So option1 on map2 becomes map2option1

By tab you mean webbrowser tab or just div on the same page?
If your tabs are elements on one page just decorate them with uniq data
<div class="mytab" data-session="1">
//tab data
</div>
<div class="mytab" data-session="2">
//tab data
</div>
when you refreash data:
$('.mytab[data-session]').each(function(){
$.post('/refres', { sessionId : $(this).data('session')}, function(html){
$(this).html(html);
})
});

If you use new tabs on every tab create hidden session key
<input type="hidden" value="#Guid.NewGuid().ToString()" id="sessionKey" />
on refresh and save pass it to controller. It is hidden for user

Related

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

After redirecting to a php page with request parameters and processing them, how to I return to the same page without the parameters?

I have one PHP page that tests $_REQUEST['delete'] to see if it exists.
If it does, then I delete the item number that it references from a list and redirect to a different tab. The tab switch is done by hiding and exposing different divs.
However, the URL displayed in the browser URL field still has the URL ?delete=nn in it. This can lead to a second delete if I inadvertently submit again without changing the shown URL.
How can I remove the parameters when I shift tabs? Or equivalently, can I switch to the new tab via my URL, e.g. URL ?tab=2.
It's a lot of code to show, so I am looking for some suggestions about how to structure. Right now, I create a 'page' with three divs, one for each 'tab' with one being the default.
After handling the delete, the page is reconstructed and the default tab is presented.
The URL isn't modified, of course, since I used it to create the page. Here is the 'pseudo-code':
<?php
... head stuff
... definition of tabs with onClicks for switching to named tab
... create content of div for 1st tab
... start creating content of div for 2nd tab
... examine $_REQUEST for 'delete'
... if it exists then
... alter contents of data to eliminate item nn from list
... then
... continue content of div for 2nd tab using altered data
... then create content of div for 3rd tab
... add content for javascript that manages tab switching, login, etc.
... echo the entire contents of the page for presentation.
... the javascript switches to the default tab on load.
I would like to have the url in the browsers url field NOT have the parameters when the page gets loaded.
I believe I stated the question poorly. I did look at the 'Funk Doc' suggestion, and it does work by putting a new entry on the History stack, but as I examined it, I realized that what I actually wanted was the refresh button of the browser to refresh the screen without using any of the Post or Get variables that might have been present when the screen was drawn originally. I realized this, when I changed to be sure that I was Posting the form variables, and upon hitting refresh, it asked about re-sending the form. The 'pushState' seemed to still retain the Post variables. I tried setting them to different values, but it didn't seem to affect anything.
The issue was that I delete a value in a list by line number, which deletes it from a file. If I use the refresh button, then the line number in the request is again deleted in the altered file. I want the user to have to click on the link to cause the delete, not have a delete happen if they refresh the page.
Suggestions or comments still invited, but I will consider withdrawing the question since it was stated poorly.
Thanks,

How to display content from the current page on a new page

I have a webpage where a dynamic table is generated when the user specifies certain things. I want to display the results in a different format (in a report style) without running the queries again (to maintain consistent results).
I checked this question and related ones, but they pull content from a page, where as what I want is to push the content to a new page.
Basically what I want is to display #my-table on a new tab when the button is clicked.
You can store your data in localStorage or sessionStorage. later on, you can access same data on another page.

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 Retain text in Text box using Javascript?

I have A page for registering user Details and from this page I have an option for adding his Sate/Continent. After Adding Sate/Continent he can navigate to his previous page.. But At this time Already filled Data's are missing so that he can have to enter again this.. Is there any possibility to solve this using javascript??
Since you are navigating away from page you can either use some server side code to create a session and retain values between pages. Or you can use js cookies to retain the values like
document.cookie="continent=asia";

Categories