Hi I wrote a code which has local storage applied to the options on the page. The only problem I am having is that I am unable to save the page which the options had searched. As you can see in the js fiddle. The options stay the same as which they were selected even after refresh. But when you click on the search function. It takes you to that image with those options applied. But when you refresh the page it goes back to the original. How would I keep the same display after refresh
This is my code for the local storage, it works for the options but not for the display of what the search has produced.
$('#browsepagebutton').on('click', function() {
$('select').each(function() {
var id = $(this).attr('name');
var value = $(this).find("option:selected").val();
console.log("SetItem : " + id + " with value : " + value)
localStorage.setItem(id, value);
});
});
$(document).ready(function() {
$('select').each(function() {
var id = $(this).attr('name');
if (localStorage.getItem(id) !== null) {
var value = localStorage.getItem(id);
$(this).val(value)
}
});
})
Js fiddle of code https://jsfiddle.net/387tnzoy/4/ (Note the function wont work)
The js fiddle does show the code just so that you can get an idea of what is happening for example. When I apply filters such as animation on life of pi and click the submit button it will only show the life of pi image undreneath the options because it is the only one set with that option. The only problem now is that I want local storage to save that page. So that when I refresh it is still on that display.
$('select option').each(function() {
var id = $(this).attr('name');
if (localStorage.getItem(id) != null && id=='name') {
$(this).attr("selected", "selected");
}
});
You'll just need to run the filtering after populating the options. Note that they will still flash on the screen before the JavaScript is run so you might want to keep them hidden until that.
$(document).ready(function() {
$('select').each(function() {
var id = $(this).attr('name');
var value = localStorage.getItem(id);
$(this).val(value)
});
$('#browsepagebutton').click(); // Add this
})
Updated fiddle: https://jsfiddle.net/387tnzoy/6/
There are multiple issue with your fiddle as described below.
Remove onclick="saveValues()" from Search button.
Check on document ready if localstorage has value than play with your localStorage checking code
Your Year dropdown have similar values for multiple options like <option value="5">2013</option>
<option value="5">2014</option>
<option value="5">2015</option> as you can see same value 5 here
And yes #kaivosukeltaja mentioned you have to click Search if localstorage has value on ready event
I have updated fiddle you can find here
Related
I have a select with options that have values that are populated with jQuery based on data attributes from divs. When a user select an option, the div with the data attribute that matches the value of the option is displayed. Now I'm trying to create a deep linking option, so when I have a url like https://my-site.com/page/#option-2 the option-2 is preselected in the select and the div with data attribute option-2 is displayed. So far I have this javascript:
$(window).on('load', function() {
let urlHash = window.location.hash.replace('#','');
console.log(urlHash);
if ( urlHash ) {
$('.dropdown').val(urlHash);
$('body').find('.location').removeClass('is-active');
$('body').find(`.location[data-location-hash=${urlHash}]`).addClass('is-active');
}
});
If I enter the url https://my-site.com/page/#option-2 the site goes in infinite loop and never loads without displaying any error in the console.. If I refresh the page while loading, the console.log is displayed with the correct string that I'm expecting, but the .location[data-location-hash=option-2] is not displayed and the option is not selected... I'm using the same code for the change function of the dropdown and is working, but it's not working in the load function.. Is there anything I'm missing?
JSFiddle, if it's of any help:
https://jsfiddle.net/tsvetkokrastev/b0epz1mL/4/
Your site is looping because you are doing a window.location.replace To get the urlHash you should use
$(window).on('load', function() {
var href = location.href; // get the url
var split = href.split("#"); // split the string
let urlHash = split[1]; // get the value after the hash
if ( urlHash ) {
$('.dropdown').val(urlHash);
$('body').find('.location').removeClass('is-active');
$('body').find('.location[data-location-hash='+urlHash+']').addClass('is-active');
}
});
https://codepen.io/darkinfore/pen/MWXWEvM?editors=1111#europe
Solved it by using a function instead of $(window).on('load').. Also added $( window ).on( 'hashchange', function( ) {}); to assure that the js will run again after the hash is changed.
Here is an updated jsfiddle: https://jsfiddle.net/tsvetkokrastev/b0epz1mL/5/
I have several buttons including divs which they have the same name. unfortunately I can not change the names, they are generated by cms.
So for example when I click only on first button, only the first div is hidden or displayed, and that's fine.
But after refresh page it opens or closes all divs depending is the first div closed or opened, and that I do not want it.
here is the code:
<button class="a">Button</button>
<div class="target"></div>
<button class="a">Button</button>
<div class="target"></div>
$('.a').click(function() {
$(this).next(".target").slideToggle(function() {
localStorage.setItem('visible', $(this).is(":visible"));
});
});
$('.target').toggle(localStorage.getItem('visible') === 'true');
here you can see jsfiddle example: https://jsfiddle.net/pj3gs0z9/3/
So my question is, is it possible to store only clicked button information, and after page refresh display or hide div from only clicked button ?
Thank you
It is possible, but probably not in your case. If you tell us you can't change your button properties, and they are exactly the same, then you won't be able to store different data in your localStorage.
Isn't there any way where you can add some additional information to your button ? It could be a class, an id, a name, or even a data-XXX attribute.
By the way, how are your buttons generated ? are they hard coded, or fetched from a database, or ... ?
EDIT
Here is a way of adding different classes to all of your buttons (althoguh I recommend adding data attributes, but whatever floats your boat) :
let buttons = document.getElementsByTagName('button'); // Array of your buttons
let index = 0;
for (let button of buttons) {
button.className += 'myCustomClass-' + ++index; // Add a custom class to your buttons
}
// Now in your local storage, you can store the class of the button !
EDIT 2 I would store it like this :
// On click, in VanillaJS (sorry, haven't used JQuery in a while)
button.onclick = () => {
let visibleButtons = localStorage.getItem('visible-buttons') || [];
visibleButtons.push(button.className.match(/(myCustomClass-[0-9]*)/)[0]);
}
This is one quick solution, but because of a slideToggle you gonna have a small flash of milliseconds of a visible div unless you first have them hidden and then based on localStorage display them.
$('.a').click(function() {
$(this).next(".target").slideToggle(function() {
localStorage.setItem('visible-' + $(this).index(), $(this).is(":visible"));
});
});
$.each($('.target'), function(k, trg) {
$(trg).toggle(localStorage.getItem('visible-' + $(trg).index()) === 'true');
});
I have code where I want to keep more than one checkboxes state(checked) when the jsp page reloads after coming back from controller.I can successfuly retrieve the selected values in sesssion but am unable to get the check boxes checked.
My code snippet is as follows:
<%!public String portarray[] = null;%>
<%if (request.getSession().getAttribute("portselected") != null) {
portarray = (String[]) request.getSession().getAttribute("portselected");
for (int i = 0; i < portarray.length; i++) {%>
alert(
<%=portarray[i]%>
);
$("#\"removebasket"+<%=portarray[i]%>+"\"").attr("checked", true);
$('#removebasket13989')[0].checked = true;
firstly use document.ready to only do this when the page is fully loaded.
also, use .prop() for setting the check state
// only when page fully loads
$(document).ready(function() {
// use prop
$('.myCheckbox').prop('checked', true);
});
you should also make sure that $("#\"removebasket"+<%=portarray[i]%>+"\"") is correct byt viewing the source of your page when it reloads
I am making a large form with several radio buttons. I want to display one question at a time. So I would need to use js to hide the div after the radio button is clicked. I have a working solution for each question, but I am hoping to create one script to load for all the questions whether than 25 separate scripts. Here is what I have:
jQuery(document).ready(function ($) {
$('input[name="item_meta[12]').change(function () {
var val1 = $("input[name='item_meta[12]']").val();
if (val1 != "") {
$('#frm_field_12_container').css('display', 'none');
}
});
});
$('input').change(function () {
var currentIndex = //get your integer from a substring call here inside the name attribute or where the integer is found in the current element
var val1 = $(this).val();
if (val1 != "") {
$('#frm_field_' + currentIndex + '_container').css('display', 'none');
}
});
You will have to make it specific to what you are doing, and clean it up, but this is the concept to use when doing a repetitious method on something. My bad, you don't need the loop. Trying to answer while at work. :( Bad idea.
I've created some hidden drop-down fields that I'm attempting to keep hidden until appropriately selected.
I'm trying to do this with mootools - I've put in 'alerts' so that I can see the variables getting passed along at each step.
The first hidden dropdown shows appropriately and the value displays accordingly, but when a value is selected from the 2nd dropdown the value is 'undefined' and the 3rd dropdown does not display.
I've been looking it over time and time again but cannot figure out why this won't work. Any advice would be greatly appreciated. I'm new to mootools & Javascript so it may be a simple fix I'm just not seeing.
You can view the JSFiddle for this - it contains all the html/javascript.
This works. Instead of relying on this, I changed it to use the passed Event object, then got the target from that.
window.addEvent('domready', function() {
$('numberStyle').addEvent('change', function() {
var targ = $(this.get('value'));
$$('.sub-1').setStyle('display', 'none');
targ.setStyle('display', 'block');
alert('TargID = ' + targ.id);
targ.addEvent('change', function(evt) {
var targID1 = $(evt.target).get('value');
alert('The value is of sub-1 is ' + targID1);
$$('.sub-2').setStyle('display', 'none');
$(targID1).setStyle('display', 'block');
});
});
});