• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 399
  • Last Modified:

Local Storage Issue Javascript

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
ACEAFTY
Asked:
ACEAFTY
  • 5
  • 3
  • 2
1 Solution
 
leakim971PluritechnicianCommented:
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
 
ACEAFTYAuthor Commented:
Hi leakim971

I do have the else statement in the code (line 280)
0
 
leakim971PluritechnicianCommented:
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
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!

 
ACEAFTYAuthor Commented:
Hi leakim971

Any idea on how to do that?
0
 
leakim971PluritechnicianCommented:
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
 
ACEAFTYAuthor Commented:
Hi leakim971

Ok let me try this
0
 
Michel PlungjanIT ExpertCommented:
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
 
ACEAFTYAuthor Commented:
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
 
Michel PlungjanIT ExpertCommented:
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
 
ACEAFTYAuthor Commented:
Great coding skill
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now