Solved

Local Storage Issue Javascript

Posted on 2013-05-21
11
392 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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
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 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ajax jquery 3 25
Awk : two files math 8 20
Insert Button on a table 16 36
jQuery force form POST 7 43
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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…
Learn the basics of strings in Python: declaration, operations, indices, and slicing. Strings are declared with quotations; for example: s = "string": Strings are immutable.: Strings may be concatenated or multiplied using the addition and multiplic…
Learn the basics of lists in Python. Lists, as their name suggests, are a means for ordering and storing values. : Lists are declared using brackets; for example: t = [1, 2, 3]: Lists may contain a mix of data types; for example: t = ['string', 1, T…

792 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