Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2010
    Posts
    405
    Thanks
    17
    Thanked 2 Times in 2 Posts

    how to clean up hideous script

    I've gone back to work on an old page that I did while I was learning php/javascript/jquery. It kills an ajax query to a database, when I add it in. but before I can figure that out, I need to figure out how to clean/make sense of this javascript tag soup.

    This script below works, but I'm posting it to get suggestions on where/how to clean this ugly, ugly mess up (and maybe simplify it?)

    Code:
    $(document).ready(function(){
    
    	   $('#dropdown1a li ul li').hover(function(){
    		      $('#uniqueleaf').css({display:"block"},800);
    		      // set variables... if item hovered is leafshape picName = pic2
    		      var choice = $(this).attr('id');
    		      var picName = 'pic2';
    		      var url = (document[picName].src);
    	   
    		      // these all were to replace any of the possible choices if previously made. need to condense
    	   var re = /_(transparent|auriculate|cordate|cuneate|deltoid|elliptic|ensiform|falcate|filiform|flabellate|hastate|ligulate|obcordate|oblanceolate|oblong|obovate|ovate|ovatecordate|panduriform|peltiform|reniform|rhomboid|saggitate|spatulate|acicular|lanceolate|linear|scales|obelliptic|runcinate|scaly|orbicular|palmate|suborbicular|rhombic-obovate|obovate-lanceolate|obeliptic)/ig;
    	   url = url.replace( re, choice);
    
    	   document[picName].src = url;
     
    	   $('#uniquename').css({display:"block"},800);		   
    	   var picColor = 'pic4';
    	   var imgName = 'leafbg_13.gif';
    	   $('#pic4').attr("src", "images/leaf_shapes/23/leafbg_13.gif");
    	   if ($("#uniquevein").hasClass('chosen')) {
    		      
    		      var n = choice.split("_")[1];
    		      var choice2 = $("#veinshown").attr('class');	   
    		      $('#veinshown').attr("src", "images/veins/"+n+"_"+choice2+".png");
    	   };
      
    }); 
    		       
    /* now the continents */
    
    $('#search_button').click(function(){
    	   $('#result_notes').stop().animate({ opacity: 0 }, 1100, function() {
    				 $('#result_notes').css({display:"none"},400);
    				 /*animation completed*/
    		      });
    });
    
    $('.continent_li').hover(function(){
    		      $('#showmap').css({display:"block"},800);
    		       
    		       if ( $(this).attr("id") == "1") {
    				 $("#worldmap").attr('src', 'images/maps/world_africa.png');
    		      } else if( $(this).attr("id") == "2") {
    				 $("#worldmap").attr('src', 'images/maps/world_asia.png');
    		      } else if( $(this).attr("id") == "3") {
    				 $("#worldmap").attr('src', 'images/maps/world_europe.png');
    		      } else if( $(this).attr("id") == "4") {
    				 $("#worldmap").attr('src', 'images/maps/world_northamerica.png');
    		      } else if( $(this).attr("id") == "5") {
    				 $("#worldmap").attr('src', 'images/maps/world_oceana.png');
    		      } else if( $(this).attr("id") == "6") {
    				 $("#worldmap").attr('src', 'images/maps/world_southamerica.png');
    		      } else if( $(this).attr("id") == "7") {
    				 $("#worldmap").attr('src', 'images/maps/world_antarctica.png');
    		      } else {
    				 $("#worldmap").attr('src', 'images/maps/world.png');
    		      }	       
    		      
    		      
    });
    
    $('.continent_li').mouseleave(function(){
    	   $('#showmap').css({display:"none"},800);
    	   
    });
    
    $('.continent_li').click(function(){
    	   $('#showmap,#hideshow_continent').css({display:"none"},800);
    	   $('#location_tag').css('display','block');
    	   $('#continent_chosen').html($(this).attr("name"));
    });
    
    $('.subcontinent_li').click(function(){
    	   $('#showmap,#hideshow_subcontinent').css({display:"none"},800);
    	   $('#location_tag').css('display','block');
    	   $('#continent_chosen').html($(this).attr("name"));
    });
    
    $('.country_li').click(function(){
    	   $('#showmap,#hideshow_country').css({display:"none"},800);
    	   $('#location_tag').css('display','block');
    	   $('#continent_chosen').html($(this).attr("name"));
    });
    
    $('.state_li').click(function(){
    	   $('#showmap,#hideshow_state').css({display:"none"},800);
    	   $('#location_tag').css('display','block');
    	   $('#continent_chosen').html($(this).attr("name"));
    });
    
    $('#LBox1, #LBox1 li').click(function(){
    	   
    	   $('#showmap').css({display:"none"},800);
    	 
    });
    
    
    $('#LBox1').change(function(){
    	        
    	   $('#instruction').stop().animate({ opacity: 0 }, 1100, function() {
    		      $('#instruction').css({display:"none"},400);
    	     	 /*animation completed*/
    	    });
    		       
    	   $('#subcontinent').css({display:"block"},400);
    	   $('#subcontinent').stop().animate({ opacity: 1 }, 1100, function() {
    		     $('#leaves, #expand_flowers').css({opacity:0, display:'block'}, 100, function() { });
    		     $('#leaves, #expand_flowers').stop().animate({ opacity: 1 }, 700, function() { /* animation done */ });
    		     
    	   });
    	   
    });
    
    $('#LBox2').change(function(){
    	        $('#showmap,#hideshow_subcontinent').css({display:"none"},800);
    		$('.subcontinent_li').click(function(){
    		      	   $('#showmap,#hideshow_subcontinent').css({display:"none"},800);
    		           $('#continent_chosen').html($(this).attr("name"));
    });
    		$('#location_tag').css('display','block');
    		$('#ontinent_chosen').html($(this).attr("name"));
    		       $('#instruction').stop().animate({ opacity: 0 }, 1100, function() {
    				 $('#instruction').css({display:"none"},400);
    				 /*animation completed*/
    		      }); 
    	  $('#country').css({display:"block"},400);
    	   $('#country').stop().animate({ opacity: 1 }, 1100, function() {
    				 
    				 /*animation completed*/
    		      }); 
    });
    
    $('#LBox3').change(function(){
    	        $('#showmap,#hideshow_country').css({display:"none"},800);
    		
    		$('.country_li').click(function(){
    		       $('#showmap,#hideshow_country').css({display:"none"},800);
    		       $('#continent_chosen').html($(this).attr("name"));
    	        });
    		       $('#instruction').stop().animate({ opacity: 0 }, 1100, function() {
    				 $('#instruction').css({display:"none"},400);
    				 /*animation completed*/
    		      }); 
    	  $('#states').css({display:"block"},400);
    	   $('#states').stop().animate({ opacity: 1 }, 1100, function() {
    				 
    				 /*animation completed*/
    		      }); 
    });
    
    
    $('#LBox4').change(function(){
    	        $('#showmap,#hideshow_states').css({display:"none"},800);
    		
    		$('.state_li').click(function(){
    		       $('#showmap,#hideshow_states').css({display:"none"},800);
    		       $('#continent_chosen').append(" :: "+$(this).attr("name"));
    	        });
    		       $('#instruction').stop().animate({ opacity: 0 }, 1100, function() {
    				 $('#instruction').css({display:"none"},400);
    				 /*animation completed*/
    		      }); 
    	  $('#location_redo').css({display:"block"},400);
    	   $('#location_redo').stop().animate({ opacity: 1 }, 1100, function() {
    				 
    				 /*animation completed*/
    		      }); 
    });
    
    
    
    $('#dropdown1c li ul li').hover(function(){
    	   var choice = $(this).attr('id');
    	   
    	   var picName = 'pic2';
    	   var url = (document[picName].src);
    	   url = url.replace(/\b25\b/, choice);
    	   url = url.replace(/\b542\b/, choice);
    	   url = url.replace(/\b27\b/, choice);
    	   url = url.replace(/\b24\b/, choice);
    	   url = url.replace(/\b28\b/, choice);
    	   url = url.replace(/\b23\b/, choice);
    	   url = url.replace(/\b26\b/, choice);
    	   url = url.replace(/\b400\b/, choice);
    	   url = url.replace(/\b29\b/, choice);
    	   url = url.replace(/\b30\b/, choice);
    	   url = url.replace(/\b31\b/, choice);
    	   url = url.replace(/\b32\b/, choice);
    	   url = url.replace(/\b543\b/, choice);
    	   
    	   document[picName].src = url;
    });
    
    
    
    $('#dropdown1c li ul li').click(function(){
    	   var choice = $(this).attr('id');
    	   var picName = 'pic2';
    	   var url = (document[picName].src);
    	   url = url.replace(/\b25\b/, choice);
    	   url = url.replace(/\b542\b/, choice);
    	   url = url.replace(/\b27\b/, choice);
    	   url = url.replace(/\b24\b/, choice);
    	   url = url.replace(/\b28\b/, choice);
    	   url = url.replace(/\b23\b/, choice);
    	   url = url.replace(/\b26\b/, choice);
    	   url = url.replace(/\b400\b/, choice);
    	   url = url.replace(/\b29\b/, choice);
    	   url = url.replace(/\b30\b/, choice);
    	   url = url.replace(/\b31\b/, choice);
    	   url = url.replace(/\b32\b/, choice);
    	   url = url.replace(/\b543\b/, choice);
    	   
    	   document[picName].src = url;
    	   var pickins = $(this).text();
    	   
    
    	   
    	   $('#picked2').html(pickins).attr('class',choice);
    
    	       if ($("#uniquevein").hasClass('chosen')) {
    		      
    		      var n = choice.split("_")[1];
    		      var choice2 = $("#veinshown").attr('class');	   
    		      $('#veinshown').attr("src", "http://www.twigzy.com/images/veins/"+n+"_"+choice2+".png");
    	   };
    });
    
    $('#dropdown1c li ul li').mouseleave(function(){
    	
    	
    	 if ($("#picked2").filter('.25, .542, .27, .24, .28, .23, .26, .400, .29, .30, .31, .32, .543').length) {
    		      
    	   
    	   var choice = $('#picked2').attr('class');
    	   
    	   var picName = 'pic2';
    	   var url = (document[picName].src);
     
    	   url = url.replace(/\b25\b/, choice);
    	   url = url.replace(/\b542\b/, choice);
    	   url = url.replace(/\b27\b/, choice);
    	   url = url.replace(/\b24\b/, choice);
    	   url = url.replace(/\b28\b/, choice);
    	   url = url.replace(/\b23\b/, choice);
    	   url = url.replace(/\b26\b/, choice);
    	   url = url.replace(/\b400\b/, choice);
    	   url = url.replace(/\b29\b/, choice);
    	   url = url.replace(/\b30\b/, choice);
    	   url = url.replace(/\b31\b/, choice);
    	   url = url.replace(/\b32\b/, choice);
    	   url = url.replace(/\b543\b/, choice);
    	   
    	   document[picName].src = url;
    	}  else {
    		   var choice = "23";
    	   
    	   var picName = 'pic2';
    	   var url = (document[picName].src);
    
    	   url = url.replace(/\b25\b/, choice);
    	   url = url.replace(/\b542\b/, choice);
    	   url = url.replace(/\b27\b/, choice);
    	   url = url.replace(/\b24\b/, choice);
    	   url = url.replace(/\b28\b/, choice);
    	   url = url.replace(/\b23\b/, choice);
    	   url = url.replace(/\b26\b/, choice);
    	   url = url.replace(/\b400\b/, choice);
    	   url = url.replace(/\b29\b/, choice);
    	   url = url.replace(/\b30\b/, choice);
    	   url = url.replace(/\b31\b/, choice);
    	   url = url.replace(/\b32\b/, choice);
    	   url = url.replace(/\b543\b/, choice);
    	   
    	   document[picName].src = url; 
    	   };
    
    });
    
    
    	$('#dropdown1a').mouseleave(function(){
    	   
    
    	   if ($("#uniqueleaf").hasClass('chosen')) {
    		      $('#uniquename').css({display:"block"},800);
    		      $('#leafshown').css({display:"block"},800);
    		       var choice = $('#leafshown').attr('class').replace(/ /g,'');
    		       var picName = 'pic2';
    		       var url = (document[picName].src);
    		 
    		      var re = /_(transparent|auriculate|cordate|cuneate|deltoid|elliptic|ensiform|falcate|filiform|flabellate|hastate|ligulate|obcordate|oblanceolate|oblong|obovate|ovate|ovatecordate|panduriform|peltiform|reniform|rhomboid|saggitate|spatulate|acicular|lanceolate|linear|scales|runcinate|scaly|orbicular|palmate|suborbicular|rhombic-obovate|obovate-lanceolate|obeliptic|obelliptic)/ig;
    	
    		      url = url.replace( re, choice);
    
    		      document[picName].src=url;		      
    		      $('#uniquename').css({display:"block"},800);
    		      
    		      if ($("#uniquevein").hasClass('chosen')) {
    		      
    		            var n = choice.split("_")[1];
    		            var choice2 = $("#veinshown").attr('class');	   
    		            $('#veinshown').attr("src", "http://www.twigzy.com/images/veins/"+n+"_"+choice2+".png");
    		      };
    		      
    	   } else { 
    		      $('#uniquename').css({display:"none"},800);   
    	    }
    	    
    	    
    		       
    	});
    	
    	
    	  	       
    	   $('#dropdown1a li ul li').click(function(){
    		      
    		      $('#uniqueleaf').css({display:"block"},800);
    		      $('#pic4').attr("src", "http://www.twigzy.com/images/leaf_shapes/23/leafbg_13.gif");
    		      $('#uniqueleaf').attr('class','chosen');
    		      var chosen_leaf = $(this).attr('id');
    		      $('#leafshown').removeClass().addClass(chosen_leaf);
    		      $('#uniquename,#picked1').css({display:"block"},800);
    		      var pickins = $(this).text();
    		      document.getElementById('picked1').innerHTML = pickins ;
    		      $('#leafmargin,#leafvenation,#submit_div,#colors').css({display:"block"},10).stop().animate({ opacity: 1 }, 1100, function() { /*animation completed*/ });
    		      var pass_it = $(this).attr('value');
    		      document.formsearch1.s1.value=pass_it;
    	   });
    	   
    	   
    
    	    $('#dropdown1d li ul li').hover(function(){
    		      
    		      var which_leaf = $("#leafshown").attr('class');
    		      var n = which_leaf.split("_")[1];
    		      $('#uniquevein').css({display:"block"},800);
    		      var choice = $(this).attr('name');	   
    	 
    		  var which_leaf = $("#leafshown").attr('class');
    		      var n = which_leaf.split("_")[1];
    		      $('#uniquevein').css({display:"block"},800);
    		      var choice = $(this).attr('name');	   
    		      $('#veinshown').attr("src", "http://www.twigzy.com/images/veins/"+n+"_"+choice+".png");  
    	   });
    	    
    	    
    	   
    	   
    	  
    	  $('#dropdown1d li ul li').mouseleave(function(){
    	    if ($("#uniquevein").hasClass('chosen')) {
    		      var which_leaf = $("#leafshown").attr('class');
    		      var n = which_leaf.split("_")[1];
    		      var pass_it = $(this).attr('id');
    		      var vein = $('#veinshown').attr('class');
    		      var vein2 = vein+".png";
    		      var vein_name = "http://www.twigzy.com/images/veins/"+n+"_"+vein2
    		      $('#veinshown').attr('src',vein_name);
    	   } else { 
    		     $('#uniquevein').css({display:"none"},800);   
    	    }
    		       
    	});
    	  
    	    
    	   
    	   $('#dropdown1d li ul li').click(function(){
    		      var which_leaf = $("#leafshown").attr('class');
    		      var n = which_leaf.split("_")[1];
    		      var pass_it = $(this).attr('id');
    		      var vein = $(this).attr('name');
    		      var vein2 = vein+".png";
    		      var vein_name = "http://www.twigzy.com/images/veins/"+n+"_"+vein2
    		      document.formsearch1.s3.value=pass_it;
    		      var pickins = $(this).text();
    		      document.getElementById('picked4').innerHTML = pickins ;
    		      $('#uniquevein').css({display:"block"},800).attr('class','chosen');
    		      $('#veinshown').removeClass().addClass(vein).attr('src',vein_name);      
    	   }); 
       });
    	  
    
        function show(id) {
            var state = document.getElementById(id).style.display;
                if (state == 'block') {
                    document.getElementById(id).style.display = 'none';
                } else {
                    document.getElementById(id).style.display = 'block';
                }
            }
    	
    
    
    
     function show2(id) {
            var state = document.getElementById(id).style.display;
                if (state == 'none') {
    		      var toot = id;
                    document.getElementById(id).style.display = 'block';
    		document.getElementById(id).style.opacity = '1';
                } else {
                    document.getElementById(id).style.display = 'block';
    		document.getElementById(id).style.opacity = '1';
                }
            }
      
       function ajaxFunction(ID, Param)
       {
          var loaderphp = "/leafsearch.php";
    
          var xmlHttp;
          try
           {
             // Firefox, Opera 8.0+, Safari
             xmlHttp=new XMLHttpRequest();
           }catch(e){
             // Internet Explorer
             try
             {
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
             }catch(e){
                try
                {
                   xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }catch(e){
                   alert("Your browser does not support AJAX!");
                   return false;
                }
             }
          }
          
          xmlHttp.onreadystatechange=function()
          {
             if(xmlHttp.readyState==4)
               {
                  //the line below reset the third list box incase list 1 is changed
                  document.getElementById('LBox4').innerHTML = "<option value=''></option>";
                  
                  //THIS SET THE DAT FROM THE PHP TO THE HTML
                document.getElementById(ID).innerHTML = xmlHttp.responseText;
               }
          }
           xmlHttp.open("GET", loaderphp+"?ID="+ID+"&ajax="+Param,true);
           xmlHttp.send(null);
       }

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    The key to code refactoring and cleaning is: work incrementally.

    You won't be able to just do everything at once. Get a good IDE that will help you by making refactoring easier (WebStorm would be an example) and then start small: give variables meaningful names, extract, inline -- play around, see what feels good. Of course, there also are some more specific things to optimize, for example when it comes to jQuery.

    Of course -- the basis of doing all this is knowing what it even means to write good code. So if you don't know what good code is supposed to look like: get a book and learn about it!

    Just a really quick look at your code and I get the following thoughts:

    • Cache your jQuery objects (google it if you don't know what I mean)
    • Remove pointless comments (the best comments are those you don't need, because the code documents itself; but if you do write one, don't just restate what the code already tells you)
    • Format your code correctly (seriously, this should not even be any work if you're using anything but notepad to write your code)
    • That big-*** if/else block can easily be rewritten to a much nicer switch/case
    • Get rid of code duplication by extracting functions
    • Give variables and functions meaningful names (not entirely bad here, but 'show2'? Really?)


    Again, that was just scrolling through the code, not even thinking about what it even does.

    Hope this helps.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •