Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Local Storage Issue Javascript

Posted on 2013-05-21
11
Medium Priority
?
398 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

609 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