how add localStorage to show and hide divs - javascript

how add localStorage to show/hide divs? Before asking this question I have see this article Use localStorage.setItem to keep same show/hide divs but that does not help me, still i can't do it by my self, so i need help! thanks.
my code
$(function() {
$("#mesfavgame").css("display", "none");
$(".AvGamesCheckBox").click(function() {
if (this.checked) {
$("#mesfavgame").hide();
}
else {
$("#mesfavgame").show();
}
});
});
if checkbox .AvGamesCheckBox is checked, localStorage hide message id="mesfavgame", if checkbox .AvGamesCheckBox is unchecked localStorage show message id="mesfavgame"
<div id="favorite">
<div id="mesfavgame"> You don't have any favorite game </div>
</div>

Try the following:
HTML:
<input type="checkbox" class="AvGamesCheckBox">
<div id="favorite">
<div id="mesfavgame"> You don't have any favorite game </div>
</div>
JS:
$(function() {
var status = localStorage.getItem('chkStatus');
if(status == 'true'){
$("#mesfavgame").css("display", "none");
$(".AvGamesCheckBox").attr('checked', true)
}
else{
$("#mesfavgame").css("display", "block");
$(".AvGamesCheckBox").attr('checked', false)
}
$(".AvGamesCheckBox").click(function() {
if (this.checked) {
$("#mesfavgame").hide();
}
else {
$("#mesfavgame").show();
}
localStorage.setItem("chkStatus", this.checked);
});
});

Local storage is easy enough to use.
What you should do, is keep a variable of all the changes made in the page from the default.
For example, let's say you got a div in the page that the user can show or hide:
#header-div
Which is hidden at the beginning.
You simply add it to an array when it is open and remove it when it is closed.
And then you save it to local storage
openedDivs= [];
$(".clickable-header").click(function() {
if (this.checked) {
$("#header-div").hide();
openedDivs= openedDivs.filter(function(value) { return value !== "header-div" });
localStorage.setItem("openedDivs", openedDivs);
}
else {
$("#header-div").show();
openedDivs.push("openedArray");
localStorage.setItem("openedDivs", openedDivs);
}
});
And then, simply on page load, get the variable from the storage using
localStorage.getItem("openedDivs")
And use it to apply it to your document.

$(function() {
$("#mesfavgame").css("display", "none");
$(".AvGamesCheckBox").click(function() {
if (this.checked && localStorage.getItem("isChecked") != null && localStorage.getItem("isChecked") == "true") {
$("#mesfavgame").hide();
localStorage.setItem("isChecked", "false")
}
else {
$("#mesfavgame").show();
localStorage.setItem("isChecked", "true");
}
});
});

Related

How can I keep the value of a checkbox with a page refresh on JQUERY? [duplicate]

I have some code here that is used to enable/disable a submit button when clicking a checkbox. This works fine, but I need the disabled/enabled state to persist on a page refresh
$(document).ready(function() {
var the_terms = $("#tandcCheck");
the_terms.click(function() {
if ($(this).is(":checked"))
$(".submit").removeAttr("disabled");
} else {
$(".submit").attr("disabled", "disabled");
}
});
});
Would a cookie be the best option for this, or a session?
Any modifications to the HTML won't persist between page calls. Yes, cookies would work, but I would suggest localStorage which is much simpler:
$(document).ready(function() {
// Restore the disabled value (if stored earlier)
if(localStorage.getItem("disabled") === "disabled"){
$(".submit").attr("disabled", "disabled");
}
var the_terms = $("#tandcCheck");
the_terms.click(function() {
if ($(this).is(":checked"))
$(".submit").removeAttr("disabled");
} else {
$(".submit").attr("disabled", "disabled");
}
// Record the disabled status in localStorage
localStorage.setItem("disabled", $(".submit").attr("disabled"));
});
});

jQuery group of checkbox issue

I have two group of checkbox newBuilding & oldBuilding.
Idea over here is I can select checkbox only one of the group.
In each group there is checkbox name other area, so I when click on it, it will show and hide textbox next to it.
Now to achieve first point, lets for example that already we have oldBuilding checkboxes are checked and I if I click one of the newBuilding checkbox then it will remove the check from oldBuilding group but newBuilding checkbox will not get checked but just get focus, I have to click again to check.
What I found out that above issue happen when I call trigger event. How can I overcome the issue
Code for other area
$("#chkOldBuildingOtherAreas").change(function () {
if ($("#chkOldBuildingOtherAreas").is(":checked"))
$("#txOldOtherAreas").show();
else
$("#txOldOtherAreas").hide();
});
$("#chkNewBuildingOtherAreas").change(function () {
if ($("#chkNewBuildingOtherAreas").is(":checked"))
$("#txNewOtherAreas").show();
else
$("#txNewOtherAreas").hide();
});
Code for removing check mark from other groups
$("input[name='oldBuilding']").change(function () {
if ($("input[name='newBuilding']:checked").length > 0) {
$("input[name='newBuilding']").removeAttr('checked');
$("#chkNewBuildingOtherAreas").trigger("change");
}
});
$("input[name='newBuilding']").change(function () {
if ($("input[name='oldBuilding']:checked").length > 0) {
$("input[name='oldBuilding']").removeAttr('checked');
$("#chkOldBuildingOtherAreas").trigger("change");
}
});
My jsfiddle
https://jsfiddle.net/milindsaraswala/wchrwjnx/
https://jsfiddle.net/1ny36nwL/4/
var groups = ['.oldGroup', '.newGroup'];
$(groups.join(',')).find('input[type=text]').hide();
function resetGroup(selector) {
//clear and hide texts
$('input[type=text]', selector).val('').hide();
//uncheck boxes
$('input[type=checkbox]', selector).removeAttr('checked');
}
$("input[name='oldBuilding']").change(function(e) {
if (this.id == 'chkOldBuildingOtherAreas') {
$("#txOldOtherAreas").toggle();
}
resetGroup('.newGroup');
});
$("input[name='newBuilding']").change(function(e) {
if (this.id == 'chkNewBuildingOtherAreas') {
$("#txNewOtherAreas").toggle();
}
resetGroup('.oldGroup');
});
as you can see I added groups var which can contain multiple groups (not only two), but code need to be changed a little more for that to work
you need to detect id/class of current group by something like $(this).closest('.form-group').id and reset every group except current group. in that way you can leave only one change function which will be universal
oh and you also need to add some class for checkbox that contain text input, and if that checkbox is clicked, trigger toggle for input. so it won't be if (this.id == 'chkNewBuildingOtherAreas') { but something like if ($(this).hasClass('has-input'))
Try replacing this in your code. It should work.
$("#txOldOtherAreas").hide();
$("#txNewOtherAreas").hide();
$("input[name='oldBuilding']").change(function (e) {
$("input[name='newBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkOldBuildingOtherAreas") {
$("#txOldOtherAreas").show();
$("#txNewOtherAreas").hide();
} else {
$("#txNewOtherAreas").hide();
}
});
$("input[name='newBuilding']").change(function (e) {
$("input[name='oldBuilding']").removeAttr('checked');
e.target.checked = true;
if (e.target.id == "chkNewBuildingOtherAreas") {
$("#txNewOtherAreas").show();
$("#txOldOtherAreas").hide();
} else {
$("#txOldOtherAreas").hide();
}
});
You can try following code to fix the problem (Tested in fiddle):
$('#txNewOtherAreas, #txOldOtherAreas').hide();
$('input[name="oldBuilding"]').on('click', function(){
if($('input[name="newBuilding"]').is(':checked')){
$('input[name="newBuilding"]').removeAttr('checked');
$('#txNewOtherAreas').hide();
}
});
$('input[name="newBuilding"]').on('click', function(){
if($('input[name="oldBuilding"]').is(':checked')){
$('input[name="oldBuilding"]').removeAttr('checked');
$('#txOldOtherAreas').hide();
}
});
$('#chkNewBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txNewOtherAreas').show();
} else {
$('#txNewOtherAreas').hide();
}
});
$('#chkOldBuildingOtherAreas').on('click', function() {
if($(this).is(':checked')){
$('#txOldOtherAreas').show();
} else {
$('#txOldOtherAreas').hide();
}
});

Control display of a div based on data-* attribute

I am showing articles in a list of divs. Each div has a data attribute that contains the status of the article.
<div id="article_1" data-status="read"> ... </div>
<div id="article_2" data-status="unread"> ... </div>
There is a button that toggles views to show "All Articles" or only "Unread" articles.
My toggle function looks like this, which is working fine:
function toggle(status) {
if (status == 'all') {
$('*').filter(function() {
if ($(this).data('status') == "read") {
$(this)[0].style.display = 'block';
}
});
}
else {
$('*').filter(function() {
if ($(this).data('status') == "read") {
$(this)[0].style.display = 'none';
}
});
}
}
Question: Is there a better (faster, efficient) way to select divs with data-status attribute and based on the status toggle the view?
Ref:
[1] Jquery select all elements that have $jquery.data()
[2] Show/hide multiple divs based on a value in their attribute
[3] filtering divs in jQuery and hiding them based on a custom data attribute tag
You can just select on the data-status attribute itself:
function toggle(status) {
if (status == 'all') {
$('[data-status=read]').css('display', 'block');
}
else {
$('[data-status=read]').css('display', 'none');
}
}
toggle('unread');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="article_1" data-status="read"> read </div>
<div id="article_2" data-status="unread"> unread </div>
I think you can go very simple here:
function toggle(status) {
if (status == 'all') {
$('*[data-status="read"]').show();
} else {
$('*[data-status="read"]').hide();
}
}
Hope that helps

Issue with checkbox listener in multifield

I have a multifield component with a 1 checkbox in each item. I am adding a listener so that if one check box is checked all others should be unchecked automatically. I am writing the listener with jquery. When I check the next item in multifield, the functionality works fine, however, it doesn't work when I check a previous checkbox in the multifield item.
whats around with this code:
Check =
function(e) {
$("input[name='./isActive']").each(function () {
if($(this).attr('id') !== e.id && $(this).attr('checked') && e.getValue() !== false) {
if (confirm('Do you want to replace Alert message?')) {
$(this).removeAttr('checked');
return;
} else {
e.setValue(false);
return;
}
}
});
}
Thanks in advance
Hope this resolve your issue
JS FIDDLE
$(document).ready(function(){
$('.multiChecks').change(function() {
if($(this).prop('checked')){
$('.multiChecks').not(this).removeAttr('checked');
}
}); });
$(document).ready(function(){
$('.multiChecks').change(function() {
var index = $( '.multiChecks' ).index( this );
if($(this).prop('checked')){
$('.multiChecks:gt('+index+')').removeAttr('checked');
$('.multiChecks:;t('+index+')').removeAttr('checked');
}
});
});

Set hidden input in modal form based on what button was clicked

I have a form that is laoded into a modal, there is a hidden input in it
<input type="hidden" name="transType" id="transType" value="">
There are two buttons that can open the form
Buy
Sell
I want to set the input#transType value based on what button is clicked, again the form is loaded in a modal and opened when the button is clicked
$(function(){
$('.trigger').click(function(e){
//modal stuff, good to go
var link = $(this).attr('href');
$.get(link, function(data){
modal.open({content: data});
//here is where I need to set the val
if ($(this).attr('id') == 'Buy')) {
$('#transType').val('Buy');
} else if ($(this).attr('id') == 'Sell')) {
$('#transType').val('Sell');
}
});
e.preventDefault();
});
});
I have it working with 2 separate click handlers, one for each button and setting the value that way, but would like a cleaner function that covers both buttons. How do I switch the hidden input's value based on the ID of the button (same class)?
SOLUTION
Thanks for the help guys, got it working. Had to change the construct of the funciton, I wasn't scoping 'this' correctly. Here is the final solution, in case anyone ever runs into this.
$(function(){
$('.trigger').click(function(e){
var link = $(this).attr('href');
if($(this).attr('id') == 'Buy') {
$.get(link, function(data){
modal.open({content: data});
$('#transType').val('buy');
});
}
if($(this).attr('id') == 'Sell') {
$.get(link, function(data){
modal.open({content: data});
$('#transType').val('sell');
});
}
e.preventDefault();
});
});
Here's a fiddle for you, the hidden input field (made it visible for showing) will allways have the id's value!
Code:
Jquery:
$('.trigger').click(function(e){
$('#transType').val($(this).attr('id'));
});
HTML:
<input type="text" name="transType" id="transType" value="">
Buy
Sell
SIDENOTE:
If you want to have a check / different value, you might want to go with this (but I don't see a reason to do this)
$('.trigger').click(function(e){
if($(this).attr('id') == 'Buy') {
$('#transType').val($(this).attr('id'));
}
else if($(this).attr('id') == 'Sell') {
$('#transType').val($(this).attr('id'));
}
else if ($(this).attr('id') == 'test') {
$('#transType').val($(this).attr('id'));
}
});
I Hope you are looking for this If I am not wrong!!!
Replace>>
if ($(this).attr('id') == 'Buy')) {
$('#transType').val('Buy');
} else if ($(this).attr('id') == 'Sell')) {
$('#transType').val('Sell');
}
With>>
$('#transType').val($(this).attr('id'));

Categories