?
Solved

Local Storage Issue Javascript

Posted on 2013-05-21
11
Medium Priority
?
397 Views
Last Modified: 2013-05-30
I am using Local Storage to remember the button state a user clicks on. An example of buttons would be on the following page.

http://cheapasprints.com/shop/category/litho-flyers/

"Single sided" & "Double Sided" buttons. If a user click on the double sided button it gets highlighted. When the user navigates away from the page and back to the that page the Double Sided button state should be active with the certain div's showing for that case.

The issue i am having with the script that i have created is that once cookies are cleared and the user is visiting the website for the first time certain buttons are not pre highlited as per the script, and if they are prehighlighted, somewhere in when navigating the website they become unhighlited. I believe it is an issue with the script where it is not robust.

Please find script attached
The way it is currently working is that there is a hidden div layer which contains a certain text. Depending on what button they select the hiddent div layer (#state) text gets replaced and based on what that text is certain div layers are show or hidden. So the hidden #state layer is what stores the active states.


// JavaScript Document
var $ = jQuery.noConflict();	
jQuery(document).ready(function($){
// Your code here

if(localStorage.length){ // If the visit is not the first time
		
		// always show the current div class
		// $("div#state").html(localStorage.getItem("currentDiv"));
		var stateLeaflets = $('div#state.leaflets').html(localStorage.getItem("currentLeaflet"));
		var stateBooklet = $('div#state.booklets').html(localStorage.getItem("currentBooklet"));
		var stateFCBooklet = $('div#state.fcbooklets').html(localStorage.getItem("currentFCBooklet"));
		var stateFlyers = $('div#state.flyers').html(localStorage.getItem("currentFlyer"));
		
		var stateSPave = $('div#state.snap-pave').html(localStorage.getItem("currentSnapPave"));
		var stateFPave = $('div#state.flex-pave').html(localStorage.getItem("currentFlexPave"));
		var stateSwPave = $('div#state.swinger-pave').html(localStorage.getItem("currentSwingPave"));
		var stateWPave = $('div#state.water-pave').html(localStorage.getItem("currentWaterPave"));
		
		var stateSBags = $('div#state.bags-small').html(localStorage.getItem("currentSBag"));
		var stateMBags = $('div#state.bags-medium').html(localStorage.getItem("currentMBag"));
		var stateLBags = $('div#state.bags-large').html(localStorage.getItem("currentLBag"));
		
		$('li.single').show();  $('li.double').hide(); 
		
		
		// B&W Booklets Storage
		$("div.btn-group.booklets .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentBooklet", currentID);
			$("div#state.booklets").html(localStorage.getItem("currentBooklet"));
			
			// Get the current value in the state 
			var state = $('div#state.booklets').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }
			
			
		});
		
		// Full Colour Booklets Storage
		$("div.btn-group.fcbooklets .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentFCBooklet", currentID);
			$("div#state.fcbooklets").html(localStorage.getItem("currentFCBooklet"));
			
			// Get the current value in the state 
			var state = $('div#state.fcbooklets').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }
			
			
		});
		
		// Leaflets Storage
		$("div.btn-group.leaflets .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentLeaflet", currentID);
			$("div#state.leaflets").html(localStorage.getItem("currentLeaflet"));
			
			// Get the current value in the state 
			var state = $('div#state.leaflets').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }
			
			
		});
		
		// Flyers Storage
		$("div.btn-group.flyers .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentFlyer", currentID);
			$("div#state.flyers").html(localStorage.getItem("currentFlyer"));
			
			// Get the current value in the state 
			var state = $('div#state.flyers').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }
			
			
		});
		
		// Snap Pavement Storage
		$("div.btn-group.snap-pave .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentSnapPave", currentID);
			$("div#state.snap-pave").html(localStorage.getItem("currentSnapPave"));
			
			// Get the current value in the state 
			var state = $('div#state.snap-pave').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// Flex Pavement Storage
		$("div.btn-group.flex-pave .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentFlexPave", currentID);
			$("div#state.flex-pave").html(localStorage.getItem("currentFlexPave"));
			
			// Get the current value in the state 
			var state = $('div#state.flex-pave').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// Swinger Pavement Storage
		$("div.btn-group.swinger-pave .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentSwingPave", currentID);
			$("div#state.swinger-pave").html(localStorage.getItem("currentSwingPave"));
			
			// Get the current value in the state 
			var state = $('div#state.swinger-pave').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// Waterbase Pavement Storage
		$("div.btn-group.water-pave .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentWaterPave", currentID);
			$("div#state.water-pave").html(localStorage.getItem("currentWaterPave"));
			
			// Get the current value in the state 
			var state = $('div#state.water-pave').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// SBags Booklets Storage
		$("div.btn-group.bags-small .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentSBag", currentID);
			$("div#state.bags-small").html(localStorage.getItem("currentSBag"));
			
			// Get the current value in the state 
			var state = $('div#state.bags-small').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// MBags Booklets Storage
		$("div.btn-group.bags-medium .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentMBag", currentID);
			$("div#state.bags-medium").html(localStorage.getItem("currentMBag"));
			
			// Get the current value in the state 
			var state = $('div#state.bags-medium').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// LBags Booklets Storage
		$("div.btn-group.bags-large .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentLBag", currentID);
			$("div#state.bags-large").html(localStorage.getItem("currentLBag"));
			
			// Get the current value in the state 
			var state = $('div#state.bags-large').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		
		//convert the string of the last clicked div into a class and then work your magic
		//var currentDivID = localStorage.getItem("currentBooklet");
		//$("div.btn-group .btn").removeClass('active');
		//$("div.btn-group .btn#"+currentDivID).addClass('active');
		//convert the string of the last clicked div into a class and then work your magic
		var currentBooklet = localStorage.getItem("currentBooklet");
		var currentFCBooklet = localStorage.getItem("currentFCBooklet");
		var currentLeaflet = localStorage.getItem("currentLeaflet");
		var currentFlyer = localStorage.getItem("currentFlyer");
		
		var currentSPavement = localStorage.getItem("currentSnapPave");
		var currentFPavement = localStorage.getItem("currentFlexPave");
		var currentSwPavement = localStorage.getItem("currentSwingPave");
		var currentWPavement = localStorage.getItem("currentWaterPave");
		
		var currentSBag = localStorage.getItem("currentSBag");
		var currentLBag = localStorage.getItem("currentLBag");
		var currentMBag = localStorage.getItem("currentMBag");
		
		$("div.btn-group.booklets .btn").removeClass('active');
		$("div.btn-group.fcbooklets .btn").removeClass('active');
		$("div.btn-group.leaflets .btn").removeClass('active');
		$("div.btn-group.flyers .btn").removeClass('active');
		$("div.btn-group.snap-pave .btn").removeClass('active');
		$("div.btn-group.flex-pave .btn").removeClass('active');
		$("div.btn-group.swinger-pave .btn").removeClass('active');
		$("div.btn-group.water-pave .btn").removeClass('active');
		$("div.btn-group.bags-small .btn").removeClass('active');
		$("div.btn-group.bags-medium .btn").removeClass('active');
		$("div.btn-group.bags-large .btn").removeClass('active');
		
		$("div.btn-group.booklets .btn#"+currentBooklet).addClass('active');
		$("div.btn-group.fcbooklets .btn#"+currentFCBooklet).addClass('active');
		$("div.btn-group.leaflets .btn#"+currentLeaflet).addClass('active');
		$("div.btn-group.flyers .btn#"+currentFlyer).addClass('active');
		$("div.btn-group.snap-pave .btn#"+currentSPavement).addClass('active');
		$("div.btn-group.flex-pave .btn#"+currentFPavement).addClass('active');
		$("div.btn-group.swinger-pave .btn#"+currentSwPavement).addClass('active');
		$("div.btn-group.water-pave .btn#"+currentWPavement).addClass('active');
		$("div.btn-group.bags-small .btn#"+currentSBag).addClass('active');
		$("div.btn-group.bags-medium .btn#"+currentMBag).addClass('active');
		$("div.btn-group.bags-large .btn#"+currentLBag).addClass('active');
		
		
		// Get the current value in the b 
		var stateBooklet = $('div#state.booklets').text();
		var stateFCBooklet = $('div#state.fcbooklets').text();
		var stateLeaflets = $('div#state.leaflets').text();
		var stateFlyers = $('div#state.flyers').text();
		var stateSPave = $('div#state.snap-pave').text();
		var stateFPave = $('div#state.flex-pave').text();
		var stateSwPave = $('div#state.swinger-pave').text();
		var stateWPave = $('div#state.water-pave').text();
		var stateSBags = $('div#state.bags-small').text();
		var stateMBags = $('div#state.bags-medium').text();
		var stateLBags = $('div#state.bags-large').text();
		
		
		// based on the value in b show the relevant products
			   if(stateBooklet == 'double'){ $('li.single').hide(); $('li.double').show(); 
		} else if(stateFCBooklet == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateLeaflets == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateFlyers == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateSPave == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateFPave == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateSwPave == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateWPave == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateSBags == 'double'){ $('li.single').hide(); $('li.double').show(); 
		} else if(stateMBags == 'double'){ $('li.single').hide(); $('li.double').show(); 
		} else if(stateLBags == 'double'){ $('li.single').hide(); $('li.double').show(); 
		} else if(stateBooklet == 'single'){ $('li.single').show(); $('li.double').hide(); 
		} else if(stateFCBooklet == 'single'){ $('li.single').show(); $('li.double').hide(); 
		} else if(stateLeaflets == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateFlyers == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateSPave == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateFPave == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateSwPave == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateMBags == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateSBags == 'single'){ $('li.single').show(); $('li.double').hide(); 
		} else if(stateMBags == 'single'){ $('li.single').show(); $('li.double').hide(); 
		} else if(stateLBags == 'single'){ $('li.single').show(); $('li.double').hide(); }
		  
		
	} else {
		
		$("div.btn-group #single").addClass('active');
		$('li.single').show();  $('li.double').hide();
		
		
		// always show the current div class
		// $("div#state").html(localStorage.getItem("currentDiv"));
		var stateLeaflets = $('div#state.leaflets').html(localStorage.getItem("currentLeaflet"));
		var stateBooklet = $('div#state.booklets').html(localStorage.getItem("currentBooklet"));
		var stateFCBooklet = $('div#state.fcbooklets').html(localStorage.getItem("currentFCBooklet"));
		var stateFlyers = $('div#state.flyers').html(localStorage.getItem("currentFlyer"));
		
		var stateSPave = $('div#state.snap-pave').html(localStorage.getItem("currentSnapPave"));
		var stateFPave = $('div#state.flex-pave').html(localStorage.getItem("currentFlexPave"));
		var stateSwPave = $('div#state.swinger-pave').html(localStorage.getItem("currentSwingPave"));
		var stateWPave = $('div#state.water-pave').html(localStorage.getItem("currentWaterPave"));
		
		var stateSBags = $('div#state.bags-small').html(localStorage.getItem("currentSBag"));
		var stateMBags = $('div#state.bags-medium').html(localStorage.getItem("currentMBag"));
		var stateLBags = $('div#state.bags-large').html(localStorage.getItem("currentLBag"));
		
		//get the class of the booklet div that's just been clicked
		$("div.btn-group.booklets .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentBooklet", currentID);
			$("div#state.booklets").html(localStorage.getItem("currentBooklet"));
			
			// Get the current value in the state 
			var state = $('div#state.booklets').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }
			
			
		});
		
		//get the class of the fc booklet div that's just been clicked
		$("div.btn-group.fcbooklets .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentFCBooklet", currentID);
			$("div#state.fcbooklets").html(localStorage.getItem("currentFCBooklet"));
			
			// Get the current value in the state 
			var state = $('div#state.fcbooklets').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }
			
			
		});
		
		//get the class of the leaflets div that's just been clicked
		$("div.btn-group.leaflets .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentLeaflet", currentID);
			$("div#state.leaflets").html(localStorage.getItem("currentLeaflet"));
			
			// Get the current value in the state 
			var state = $('div#state.leaflets').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }
			
		}); 
		
		//get the class of the flyers div that's just been clicked
		$("div.btn-group.flyers .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentFlyer", currentID);
			$("div#state.flyers").html(localStorage.getItem("currentFlyer"));
			
			// Get the current value in the state 
			var state = $('div#state.flyers').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }
			
		});
		
		// Snap Pavement Storage
		$("div.btn-group.snap-pave .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentSnapPave", currentID);
			$("div#state.snap-pave").html(localStorage.getItem("currentSnapPave"));
			
			// Get the current value in the state 
			var state = $('div#state.snap-pave').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// Flex Pavement Storage
		$("div.btn-group.flex-pave .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentFlexPave", currentID);
			$("div#state.flex-pave").html(localStorage.getItem("currentFlexPave"));
			
			// Get the current value in the state 
			var state = $('div#state.flex-pave').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// Swinger Pavement Storage
		$("div.btn-group.swinger-pave .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentSwingPave", currentID);
			$("div#state.swinger-pave").html(localStorage.getItem("currentSwingPave"));
			
			// Get the current value in the state 
			var state = $('div#state.swinger-pave').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// Waterbase Pavement Storage
		$("div.btn-group.water-pave .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentWaterPave", currentID);
			$("div#state.water-pave").html(localStorage.getItem("currentWaterPave"));
			
			// Get the current value in the state 
			var state = $('div#state.water-pave').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// SBags Booklets Storage
		$("div.btn-group.bags-small .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentSBag", currentID);
			$("div#state.bags-small").html(localStorage.getItem("currentSBag"));
			
			// Get the current value in the state 
			var state = $('div#state.bags-small').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// MBags Booklets Storage
		$("div.btn-group.bags-medium .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentMBag", currentID);
			$("div#state.bags-medium").html(localStorage.getItem("currentMBag"));
			
			// Get the current value in the state 
			var state = $('div#state.bags-medium').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		// LBags Booklets Storage
		$("div.btn-group.bags-large .btn").click(function(){
			var currentID = $(this).attr("id");
			localStorage.setItem("currentLBag", currentID);
			$("div#state.bags-large").html(localStorage.getItem("currentLBag"));
			
			// Get the current value in the state 
			var state = $('div#state.bags-large').text();
			
			// based on the value in b show the relevant products
			if(state == 'double'){ $('li.single').hide(); $('li.double').show(); 
			} else if(state == 'single'){ $('li.single').show(); $('li.double').hide(); }

		});
		
		
		
		//convert the string of the last clicked div into a class and then work your magic
		var currentBooklet = localStorage.getItem("currentBooklet");
		var currentFCBooklet = localStorage.getItem("currentFCBooklet");
		var currentLeaflet = localStorage.getItem("currentLeaflet");
		var currentFlyer = localStorage.getItem("currentFlyer");
		
		var currentSPavement = localStorage.getItem("currentSnapPave");
		var currentFPavement = localStorage.getItem("currentFlexPave");
		var currentSwPavement = localStorage.getItem("currentSwingPave");
		var currentWPavement = localStorage.getItem("currentWaterPave");
		
		var currentSBag = localStorage.getItem("currentSBag");
		var currentLBag = localStorage.getItem("currentLBag");
		var currentMBag = localStorage.getItem("currentMBag");
		
		// Get the current value in the b 
		$("#state").html('single');
		
		// Get the current value in the b 
		var stateBooklet = $('div#state.booklets').text();
		var stateFCBooklet = $('div#state.fcbooklets').text();
		var stateLeaflets = $('div#state.leaflets').text();
		var stateFlyers = $('div#state.flyers').text();
		var stateSPave = $('div#state.snap-pave').text();
		var stateFPave = $('div#state.flex-pave').text();
		var stateSwPave = $('div#state.swinger-pave').text();
		var stateWPave = $('div#state.water-pave').text();
		var stateSBags = $('div#state.bags-small').text();
		var stateMBags = $('div#state.bags-medium').text();
		var stateLBags = $('div#state.bags-large').text();
		
		
		// based on the value in b show the relevant products
			  if(stateBooklet == 'double'){ $('li.single').hide(); $('li.double').show(); 
		} else if(stateFCBooklet == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateLeaflets == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateFlyers == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateSPave == 'double'){ $('li.single').hide(); $('li.double').show(); 
		} else if(stateFPave == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateSwPave == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateWPave == 'double'){ $('li.single').hide(); $('li.double').show();
		} else if(stateSBags == 'double'){ $('li.single').hide(); $('li.double').show(); 
		} else if(stateMBags == 'double'){ $('li.single').hide(); $('li.double').show(); 
		} else if(stateLBags == 'double'){ $('li.single').hide(); $('li.double').show(); 
		} else if(stateBooklet == 'single'){ $('li.single').show(); $('li.double').hide(); 
		} else if(stateFCBooklet == 'single'){ $('li.single').show(); $('li.double').hide(); 
		} else if(stateLeaflets == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateFlyers == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateSPave == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateFPave == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateSwPave == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateMBags == 'single'){ $('li.single').show(); $('li.double').hide();
		} else if(stateSBags == 'single'){ $('li.single').show(); $('li.double').hide(); 
		} else if(stateMBags == 'single'){ $('li.single').show(); $('li.double').hide(); 
		} else if(stateLBags == 'single'){ $('li.single').show(); $('li.double').hide(); }
		  
		  	
		
	}

});

Open in new window

cookies.js
0
Comment
Question by:ACEAFTY
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39193832
user is visiting the website for the first time certain buttons are not pre highlited

You've :
if(localStorage.length){ // If the visit is not the first time
// your code
}

but you don't have :
if(localStorage.length){ // If the visit is not the first time
// your code
}
else { // If the visit is the first time
}
0
 
LVL 1

Author Comment

by:ACEAFTY
ID: 39193876
Hi leakim971

I do have the else statement in the code (line 280)
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39193894
My bad!
Could you just put an alert (or use console if you know) statement to check the values in the if and in the else section
0
Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

 
LVL 1

Author Comment

by:ACEAFTY
ID: 39193915
Hi leakim971

Any idea on how to do that?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39193945
I think you did not understood me...
Not sure where you've the buttons... so here randomly what I mean :

if(localStorage.length){ // If the visit is not the first time
alert(localStorage.getItem("currentSnapPave"));
// your current code
}
else { // If the visit is the first time
// you current code
alert(localStorage.getItem("currentSnapPave"));
}
0
 
LVL 1

Author Comment

by:ACEAFTY
ID: 39193964
Hi leakim971

Ok let me try this
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 39194017
Sorry to be the bearer of bad news, but your code is very inefficient and impossible to maintain. for example I see you already missed the leaflets in your code.

Here is the first couple of hundred lines cut down to 25 with the addition of an object holding the name of the var you want to use and the matching DIV. You need to be consistent in your naming and use of plural and singular. But this is a start.

You REALLY need to refactor the whole thing to resemble what I already did for you.
If you do, you will have fixed the problem or at least made it an order of magnitude easier to find the issue. As it stands I will not even begin to look

// JavaScript Document
var $ = jQuery.noConflict();  
var divs = {
  "Booklet"  : "booklets",
  "FCBooklet": "fcbooklets",
  "Flyer"    : "flyers",
  "Leaflet"  : "leaflets",
  "SnapPave" : "snap-pave",
  "FlexPave" : "flex-pave",
  "SwingPave": "swing-pave",
  "WaterPave": "water-pave",
  "SBag"     : "bags-small",
  "MBag"     : "bags-medium",
  "LBag"     : "bags-large"
} // NOTE: No comma on the last item

var states = {}
jQuery(document).ready(function($){
// Your code here

if (localStorage.length){ // If the visit is not the first time
    $('li.single').show();  $('li.double').hide(); 
    
    $.each(divs,function(key, div) { 
      states[key] = $('div#state.'+div).html(localStorage.getItem("current"+key));
      $("div.btn-group."+div+" .btn")
      .removeClass("active")
      .click(function(){
        var currentID = $(this).attr("id");
        localStorage.setItem(key, currentID);
        $("div#state."+div).html(localStorage.getItem(o));
        // Get the current value in the state 
        var state = $("div#state."+div).text();
        // based on the value in b show the relevant products
        $('li.single').toggle(state == 'single'); $('li.double').toggle(state == 'double'); 
      });
    });

Open in new window

0
 
LVL 1

Author Comment

by:ACEAFTY
ID: 39198971
Hi mplungjan

Thanks for the prompt response.

If I were to give you this project to fix the issues in the code with access details. How much would you charge to get this done. Is this something you would be interested in doing?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39199604
Had the code been slightly smaller, I would already have done it :)

Yes I would be interested in assisting you. My email is in my profile but I cannot start until next week since I  am not near a good editor on a real computer until then.
0
 
LVL 1

Author Closing Comment

by:ACEAFTY
ID: 39208461
Great coding skill
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question