Solved

Local Storage Issue Javascript

Posted on 2013-05-21
11
388 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
  • 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
 
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
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:ACEAFTY
ID: 39193964
Hi leakim971

Ok let me try this
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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 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 …

708 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now