Checked boxes on one page are carrying over to a new page - javascript

I am building a site for work.
It consists of four pages which are the exact same structure but different content.
The structure is three columns, the first is a vertical series of check boxes, the second is a logo, the third is another vertical series of check boxes.
The goal is to,
Be able to go to page one, click the check boxes needed, and keep those boxes checked upon refresh.
Then you should be able to click a link to the second page and have a fresh set of check boxes.
The content is there, the links are there, all of the check boxes are there and remain upon refresh.
The problem I'm having is that when I check a few boxes on page one and then click on the link to page two, the same check boxes are still checked, even though it's an entirely new page and new content.
I tried linking each of the four pages to their own JavaScript file and that didn't change anything. I am new to developing and am not sure what to try next.
Here is the JavaScript code I am using:
jQuery(function(){
if (localStorage.input) {
var checks = JSON.parse(localStorage.input);
jQuery(':checkbox').prop('checked', function(i) {
return checks[i];
});
}
});
jQuery(':checkbox').on('change', function() {
localStorage.input = JSON.stringify(jQuery(':checkbox').map(function() {
return this.checked;
}).get());
});
This works great if it's a one page site but again, when I visit one of the other pages, the check boxes don't refresh.
If anyone can, please help me with this.

You're storing the checkbox information in input on localStorage for every page. The data is just an array of true/false values indicating whether or not the checkboxes on a page are checked.
If you run this code on another page which has checkboxes then they'll be put into that state.
You need to store the information in a way that identifies which page it's on, e.g.
localStorage[window.location.href] = ...
Or
localStorage.setItem(window.location.href, ...)
You could also store the state of the checkboxes against their names/ids to avoid coupling the state to the order of the boxes on the page e.g.
let state = {
'choice0': true,
'choice1': false,
...
}

Related

javascript: back button + auto-search (triggers on page load) works on initial state of the form and not the last state of the form

might be best explained with an example/scenario:
I have several checkboxes on my form. "Open" and "Opening soon" are the default options that has been ticked.
JS will trigger on page load and does an initial search based on the 2 options mentioned above. Let's assume only 50 records are returned with these 2 options.
If I select another option (let's say "closed"), JS will auto-trigger again and does an API/AJAX call to retrieve the results. Let's assume again that 75 records are returned with these 3 options.
As an example, let's assume one of the results is a link to something called "KFC branch X". If I clicked "KFC Branch X" link, the page will open on the same browser tab.
If I then clicked the back button, I am expecting to see 75 records (based on no.3). I instead get only 50 records.
What changes do I need to make so that I get 75 records vs 50 records based on my example/scenario? Thank you!
PS.
I do not want to open the link on a new tab. I have a feeling this is bad user experience based on what I've heard/experienced.
I've already thought of suggesting disabling the auto-search feature (on page load) which may or may not work. (I have not tried it yet)
As a test, I tried this code (which does --not-- work)
//"this" in the code below pertains to the checkbox element that is ticked/unticked
if (this.checked) {
this.setAttribute("checked", true);
} else {
this.setAttribute("checked", false);
}
I can see the DOM/HTML of the page getting modified (using inspect feature of browser). I can see "checked=true" or "checked=false" getting added/inserted to the checkbox DOM.

Verifying a radio input has been checked to display div on separate page

I am having an issue of hiding and displaying content on a separate page if a certain radio input has been checked. Currently I am trying to hide special content if the user hasn't checked one radio input. I have code that works for that page which switches the banner to allow them to go to the page after they complete this task, but when I go to the next page the content doesnt show up.
Here is my current script for the banner to hide and show based on the radio input being checked.
if ($('input[name=sexo-field]:checked').length > 0) {
$("#pdfFlipButton").show();
$("#pdfFlipButtonOff").hide();
} else {
$("#pdfFlipButton").hide();
$("#pdfFlipButtonOff").show();
}
But how would I go about showing or hiding a div on the next page based on these parameters?
This is not easy and you have 3 not good ways:
The page that must be affected, is a child page and send data from parent page to child page.
In both page create ajax functions, send direction from one and another must check the server in a few seconds:
setInterval(function(){
//if radio checked
}, 3000);
As mentioned in comments, submit radio button and refresh second page.
As #adeneo said, you can wrap the radio button in the form element and after submitting that form, catch values on the next page which the form points on. Or as #Michael Alexander Montero said, you can use sessionStorage which I would rather recommend.
Here is the documentation of how to use sessionStorage. In your case it would be for example:
sessionStorage.setItem('radiochecked', true);
And in the next page you will add following line:
if(sessionStorage.getItem('radiochecked') {
// display the panel
}

Using jQuery to determine if a user has copied and pasted a full URL into their browser?

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.

Storing JQuery string values in localStorage

So I'm webmastering this page full of ebulletins and ppl are asking options to sort different bulletins by their importance. So I created this nice little JQuery thingy:
$(document).ready(function() {
$("#show_all").click(function() {
localStorage.setItem("show","all");
$("div#tiedotteet_infonet div").css("display","block");
});
});
So the div element which display value I'm changing is none in css and I'm using JQuery to switch it to block but I also wan't to store this click into localStorage to key-value-pair "show" and "all", so I can make code to check which is the users preference when she comes back to the page. The button and similarly constructed buttons work fine in the way that they are showing or hiding the div elements (and the bulletins inside them) when the user is clicking different buttons. But the code won't store anything to localStorage according to Chrome. I'm obviously doing something wrong here. What that might be?

Is there any CallBack function which is called before/after data is loaded in Angular Js ng-Grid?

Presently i have a Angular Js Grid which is pagination Enabled say 5 records per page for example and total number of records is 2000, so there are going to be 400 pages in All.
when pagination in ng-grid is handled the gridOption data is specified per page which means for 1st page the gridOption will be 1-5 rows for 2nd 6-10 rows and so on........
Here i have implemented a selection functionality through checkboxes thus whenever a row is selected[checkBox becomes selected] and it's stored in selectedItems array and i show selected items in another grid like this.....
Now when i move on to second page[pagination] and select further rows like this ...
The real trouble lies here when i again go back to the previous page i.e page 1 the checkboxes will not be checked because in pagination we load data runtime thus the pages shows following result...
Hope you must have understood my problem....
what i need here is a callback before/after data is loaded so that i can select the checkboxes as i have the number of selection preserved
OR any other workaround for my problem will be much helpful too.
Thanks!.
Can you store the checked value on the data model where you are storing the row values? Then you come back and its just checked by Angular bindings?
I am not sure of your setup, but I do this in a similar situation.
I have been working on this for a couple days now.
While I am still unable to preserve selection across pagination, I am able to clear selections while simultaneously "deselecting" the select all checkbox.
The allSelected variable is not exposed in the gridScope but you are able to grab it and address it using the following code.
// Use this to deselect all options.
$scope.gridOptions.$gridScope.toggleSelectAll(null, false);
// use this to find the allSelected variable which is tied to the
// (the ng-model related to the select all checkbox in the header row)
var header = angular.element(".ngSelectionHeader").scope();
// use this to turn off the checkbox.
header.allSelected = false;
I'll follow up again if I manage to get the "reselecting" to work as documented, but for now I might remain content with this.

Categories

Resources