jQuery switch statement rendering two elements instead of one.

burnedfaceless
burnedfaceless used Ask the Experts™
on
I am having an issue where jQuery is rendering two elements instead of one. I appologize for the messy html I haven't cleaned it up yet.

If "Little Ogeechee" is selected from the switch than both of the consolidated panels are rendered.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Consolidated Utilities, Inc.">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
    <script src="https://code.jquery.com/jquery.js"></script>
	<script src="../js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../js/ratesmobile.js"></script>
	<script type = "text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-46277951-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
<noscript>
	<style>
		#NoJs {display: none;}
	</style>
</noscript>

<?php include '../includes/css.php';?>
<link href="../css/consolidated.css" rel="stylesheet">
	
	


    <title>Rates</title>

    <link href="../css/bootstrap.css" rel="stylesheet">
    
    <style type = "text/css">
    #center{margin-left:auto;
margin-right:auto;}
#rates{margin-left:30%; margin-right:30%;}
body {
  padding-top: 50px;
  background-color: #ccc;
}
		.subdivision ul {text-align: left;}

		
	
	</style>
    
	<style type = "text/css">
			#heading {margin-left:30%; margin-right:30%;}

	
		#logo {float: left;}

		@media (min-width: 768px) and (max-width: 979px)  and (orientation:portrait) {
  body {
    -webkit-transform: rotate(90deg);
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
}
}
</style>
	


  

   
    
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href = "../" >Consolidated Utilities</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="../about/">About Us</a></li>
             <li><a href = "../billing/">Billing</a></li>
			<li><a href="../affiliatedsystems/">Affiliated Sytems</a><li>
            <li class = "active"><a href="../rates/">Rates</a></li>
            <li><a href="../conservation/">Conservation Efforts</a></li>
            <li><a href="../contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
    
   
    
    <div class = "maxwidth">
    <div class="container">
      <div class="starter-template">
      		  <img src = "../images/logo.jpg" height = "120" width = "196" id = "logo">

		<h1 id = "heading">Rates</h1>
		<br/>
		<br/>
		<hr>
		<noscript>This page requires JavaScript to function.</noscript>
			<div id = "NoJs">

			<form id = "center">
			
				<div class="rates">

		<!-- This div will be used to render content from selected water system. "rates" id will allow me to render content using js -->

		<div id="rates"></div>

	</div>

			

			<select name="WaterSystem" id="WaterSystem">

				<option value="">---Select a subdivision---</option>

				<option value="Consolidated">Berwick Market Place</option>

				<option value="Consolidated">Berwick Lakes</option>

				<option value="CoastalLLC2">Cypress Lakes</option>

				<option value="Consolidated">Cedar Walk</option>

				<option value="Consolidated">Chapel Park</option>

				<option value="Consolidated">Cottages at Autumn Lakes</option>

				<option value="CoastalLLC5">Cottonvale Estates</option>

				<option value="Woodlawn">East Pines</option>

				<option value="CoastalLLC">Effingham Park of Commerce</option>


				<option value="Consolidated">Grand Oaks</option>

				<option value="GoldenIsles">Golden Isles</option>

				<option value="Consolidated">Glenwood Grove</option>

				<option value="Consolidated">Hampton Place</option>

				<option value="Consolidated">Highland Woods</option>

				<option value="Consolidated">Lakes at Black Creek</option>

				<option value="Consolidated">Lakes at Cottonvale</option>
				
				<option value="Consolidated">Larchmont Estates</option>

				<option value="Consolidated">Legacy Square</option>

				<option value="Consolidated">Laurel Oaks</option>

				<option value="Consolidated2">Little Ogeechee</option>

				<option value="GoldenIsles">Lots along Johnny Mercer Boulevard</option>

				<option value="Whitemarsh">Lots along Bryan Woods</option>

				<option value="Consolidated">Laurelwood</option>

				<option value="Consolidated">Laurel Green</option>

				<option value="Consolidated">Mosswood</option>

				<option value="CoastalLLC">Millcreek</option>			

				<option value="CoastalLLC1">Mingledorff (Copperfield)</option>			

				<option value="Coastal">McCall Plaza</option>

				<option value="Coastal">Magnolia Plaza</option>

				<option value="Woodlawn">Oatland Island</option>		

				<option value="Coastal">Olde Towne Plaza</option>

				<option value="CoastalLLC6">Rebel Estates</option>

				<option value="Consolidated">Regency</option>

				<option value="CoastalLLC">Ridgecrest</option>

				<option value="CoastalLLC1">South Pointe</option>			

				<option value="Consolidated">Southbridge</option>

				<option value="Consolidated">Salt Creek Landings</option>

				<option value="CoastalLLC1">Southern Hills</option>			

				<option value="CoastalLLC1">Sandy Woods</option>

				<option value="Consolidated">Stonebridge</option>

				<option value="Consolidated">Stonelake</option>

				<option value="Consolidated">The Enclave</option>

				<option value="CoastalLLC3">Twenty One Centre</option>

				<option value="Consolidated">Village at Berwick</option>

				<option value="Consolidated">Village at Autumn Lakes</option>

				<option value="Coastal">Waterford Park</option>

				<option value="Whitemarsh">Whitemarsh Estates</option>

				<option value="CoastalLLC1">White Bluff</option>

				<option value="Consolidated">Willow Lakes</option>

				<option value="Coastal">Westwood Heights</option>

				<option value="Coastal">Westwood Plaza</option>





			</select>

		</form>




		 
	</div>	    
	</div>
    </div><!-- /.container -->
    </div>
    
 <hr/>
<?php include '../copyright.php';?>

   
  </body>
</html>

Open in new window


$(function() {  
  $("#WaterSystem").change(function() {  
    var RtnMessage;
	var rates = $("#rates").empty();   
	var selectedValue = $("#WaterSystem").val(); 
		
	if (selectedValue) {
			
    switch(selectedValue){
      case 'Consolidated':
        rtnMessage = '<div class="panel panel-default subdivision"><di';
        rtnMessage += 'v class="panel-heading"><h3 class="panel-title ';
        rtnMessage += 'img-responsive">Consolidated Utilities, Inc.';
        rtnMessage += '</h3></div><div cass="panel-body"><br/><ul><li>';
        rtnMessage += '$32.00 Base Rate</li><li>$3.60 per 1,000';
        rtnMessage += ' gallons up to 5,000 gallons</li><li>$6.20 per ';
        rtnMessage += '1,000 gallons between 5,001-10,000 gallons</li>';
        rtnMessage += '<li>$7.20 per 1,000 gallons 10,001 and above';
        rtnMessage += '</li></ul></div><h4>Other Charges:</h4><p>';
        rtnMessage += '<div id = "lists"><ul><li>$100 dollar deposit';
        rtnMessage += ' to set up service</li><li>$40 service fee for ';
        rtnMessage += 'past due accounts</li><li>If a lock is cut ';
        rtnMessage += 'there will be a $50 fee</li><li>Other damages ';
        rtnMessage += 'can be $100 dollars or more depending on damage';
        rtnMessage += ' done.</li></ul></div></div></div>';		
        rates.append(rtnMessage);  
      break;
      case 'Consolidated2':
        rtnMessage += '<div class="panel panel-default subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
        rtnMessage += 'le img-responsive">Consolidated Utilities, Inc.';
        rtnMessage += '</h3></div><div class="panel-body"><ul>';
        rtnMessage += '<li>$18.00 Base Rate</li><li>$3.60 per 1,000 ';
        rtnMessage += 'gallons up to 5,000 gallons</li><li>$6.20 per ';
        rtnMessage += '1,000 gallons between 5,001-10,000 gallons</li>';
        rtnMessage += '<li>$7.20 per 1,000 gallons 10,001 and above';
        rtnMessage += '</li></ul><h4>Other Charges:</h4><p><ul><li>';
        rtnMessage += '$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li><li>Other damages can be $100 dollars or ';
        rtnMessage += 'more depending on damage done.</li></ul></div>';
        rtnMessage +='</div>';					
        rates.append(rtnMessage);  
      break;									
      case 'Coastal':
        rtnMessage = '<div class="panel panel-success subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-ti';
        rtnMessage += 'tle">Coastal Water Company, LLC</h3></div><div ';
        rtnMessage += 'class="panel-body"><ul><li>$31.50 Base Rate</li';
        rtnMessage += '><li>$4.00 per 1,000 gallons</li><li>$1.60 per';
        rtnMessage += ' 1,000 after 5,000 used</li></ul><h4>Other ';
        rtnMessage += 'Charges:</h4><p><ul><li>$100 dollar deposit to ';
        rtnMessage += 'set up service</li><li>$40 service fee for past';
        rtnMessage += ' due accounts</li><li>If a lock is cut there ';
        rtnMessage += 'will be a $50 fee</li><li>Other damages can be';
        rtnMessage += ' $100 dollars or more depending on damage done.';
        rtnMessage += '</li></ul></div></div>';										
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC':
        rtnMessage = '<div class="panel panel-success subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
        rtnMessage += 'le">Coastal Water Company, LLC</h3></div>';
        rtnMessage += '<div class="panel-body"><ul><li>$31.50 Base Rate';
        rtnMessage += '</li><li>$4.00 per 1,000 gallons</li><li>$1.60'
        rtnMessage += ' per 1,000 after 5,000 used</li></ul><h4>Other';
        rtnMessage += ' Charges</h4><p><ul><li>$100 dollar deposit to ';
        rtnMessage += 'set up service</li><li>$40 service fee for past';
        rtnMessage += ' due accounts</li><li>If a lock is cut there';
        rtnMessage += ' will be a $50 fee</li><li>Other damages can be';
        rtnMessage += ' $100 dollars or more depending on damage done.';
        rtnMessage += '</li></ul></p></div></div>';
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC1':
        rtnMessage = '<div class="panel panel-success subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
        rtnMessage += 'le">Coastal Water Company, LLC</h3></div><div ';
        rtnMessage += 'class="panel-body"><ul><li>$34.00 up to 5,000 ';
        rtnMessage += 'gallons</li><li>$2.50 per 1,000 after 5,000';
        rtnMessage += ' used</li></ul><h4>Other Charges</h4><p><ul>';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li><li>Other damages can be $100 dollars or';
        rtnMessage += ' more depending on damage done.</li></ul></p>';
        rtnMessage += '</div></div>';
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC2':
        rtnMessage = '<div class="panel panel-success subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
        rtnMessage += 'le">Coastal Water Company, LLC</h3></div><div ';
        rtnMessage += 'class="panel-body"><ul><li>$36.00 Flat Rate</l';
        rtnMessage += 'i></ul><h4>Other Charges</h4><p><ul><li>$100 do';
        rtnMessage += 'llar deposit to set up service</li><li>$40 serv';
        rtnMessage += 'ice fee for past due accounts</li><li>If a lock';
        rtnMessage += ' is cut there will be a $50 fee</li><li>Other ';
        rtnMessage += 'damages can be $100 dollars or more depending ';
        rtnMessage += 'on damage done.</li></ul></p></div></div></div>';
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC3':
        rtnMessage = '<div class="panel panel-success subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
        rtnMessage += 'le">Coastal Water Company, LLC</h3></div><div ';
        rtnMessge += 'class="panel-body"><ul><li>$45.00 flat rate</li>';
        rtnMessage += '</ul><h4>Other Charges</h4><p><ul><li>$100 doll';
        rtnMessage += 'ar deposit to set up service</li><li>$40 servic';
        rtnMessage += 'e fee for past due accounts</li><li>If a lock ';
        rtnMessage += 'is cut there will be a $50 fee</li><li>Other ';
        rtnMessage += 'damages can be $100 dollars or more depending ';
        rtnMessage += 'on damage done.</li></ul></p></div></div></div>';
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC4':
        rtnMessage = '<div class="panel panel-success subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-tit';
        rtnMessage += 'le">Coastal Water Company, LLC</h3></div><div ';
        rtnMessage += 'class="panel-body"><ul><li>$34.00 flat rate</l';
        rtnMessage += 'i></ul><h4>Other Charges</h4><p><ul><li>$100 ';
        rtnMessage += 'dollar deposit to set up service</li><li>$40';
        rtnMessage += ' service fee for past due accounts</li><li>If';
        rtnMessage += ' a lock is cut there will be a $50 fee</li>';
        rtnMessage += '<li>Other damages can be $100 dollars or more';
        rtnMessage += ' depending on damage done.</li></ul></p></div>';
        rtnMessage += '</div></div>';
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC5':
        rtnMessage = '<div class="panel panel-success subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-t';
        rtnMessage += 'itle">Coastal Water Company, LLC</h3></div>';
        rtnMessage += '<div class="panel-body"><ul><li>Average flat';
        rtnMessage += ' rate $30.00</li></ul><h4>Other Charges</h4>';
        rtnMessage += '<p><ul><li>$100 dollar deposit to set up ser';
        rtnMessage += 'vice</li><li>$40 service fee for past due acco';
        rtnMessage += 'unts</li><li>If a lock is cut there will be a';
        rtnMessage += ' $50 fee</li><li>Other damages can be $100 ';
        rtnMessage += 'dollars or more depending on damage done.</li>';
        rtnMessage += '</ul></p></div></div></div>';
        rates.append(rtnMessage);
      break;
      case 'CoastalLLC6'://where we left off
        RtnMessage = '<div class="panel panel-success subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-';
        rtnMessage += 'title">Coastal Water Company, LLC</h3></div>';
        rtnMessage += '<div class="panel-body"><ul><li>$40.00 flat ';
        rtnMessage += 'rate</li></ul><h4>Other Charges</h4><p><ul>';
        rtnMessage += '<li>$100 dollar deposit to set up service</li>';
        rtnMessage += '<li>$40 service fee for past due accounts</li>';
        rtnMessage += '<li>If a lock is cut there will be a $50 fee';
        rtnMessage += '</li><li>Other damages can be $100 dollars or ';
        rtnMessage += 'more depending on damage done.</li></ul></p>';
        rtnMessage += '</div></div></div>';
        rates.append(rtnMessage);
      break;
      case 'GoldenIsles':
        rtnMessage = '<div class="panel panel-brian subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-';
        rtnMessage += 'title">Golden Isles</h3></div><br/><ul><li>';
        rtnMessage += '$36.00 Flat Rate for Duplexes</li><li>$41.00 ';
        rtnMessage += 'Flat Rate for Homes</li></ul><h4>Other Charges';
        rtnMessage += '</h4><p><ul><li>$100 dollar deposit to set up ';
        rtnMessage += 'service</li><li>$40 service fee for past due ';
        rtnMessage += 'accounts</li><li>If a lock is cut there will ';
        rtnMessage += 'be a $50 fee</li><li>Other damages can be $100 ';
        rtnMessage += 'dollars or more depending on damage done.</li>';
        rtnMessage += '</ul></p></div</div></div>';
        rates.append(rtnMessage);
      break;
      case 'Whitemarsh':
        rtnMessage = '<div class="panel panel-warning subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-t';
        rtnMessage += 'itle">Whitemarsh Estates</h3></div><div class="';
        rtnMessage += 'panel-body"><ul><li>$34.00 up to 5,000 gallons';
        rtnMessage += '</li><li>$2.50 per 1,000 after 5,000 used</li>';
        rtnMessage += '</ul><h4>Other Charges</h4><p><ul><li>$100 ';
        rtnMessage += 'dollar deposit to set up service</li><li>$40 ';
        rtnMessage += 'service fee for past due accounts</li><li>If ';
        rtnMessage += 'a lock is cut there will be a $50 fee</li>';
        rtnMessage += '<li>Other damages can be $100 dollars or more ';
        rtnMessage += 'depending on damage done.</li></ul></p><div>';
        rtnMessage += '</div></div>';
        rates.append(rtnMessage);
      break;
      case 'Woodlawn':
        rtnMessage = '<div class="panel panel-danger subdivision">';
        rtnMessage += '<div class="panel-heading"><h3 class="panel-ti';
        rtnMessage += 'tle">Woodlawn</h3></div><div class="panel-';
        rtnMessage += 'body"><ul><li>$34.00 up to 5,000 gallons</li>';
        rtnMessage += '<li>$2.50 per 1,000 after 5,000</li></ul><h4>';
        rtnMessage += 'Other Charges</h4><p><ul><li>$100 dollar ';
        rtnMessage += 'deposit to set up service</li><li>$40 service';
        rtnMessage += ' fee for past due accounts</li><li>If a lock ';
        rtnMessage += 'is cut there will be a $50 fee</li><li>Other ';
        rtnMessage += 'damages can be $100 dollars or more depending ';
        rtnMessage += 'on damage done.</li></ul></p></div></div></div>';          
        rates.append(rtnMessage);
      break;					
      default:
        RtnMessage = "<h3>Mising Subdivision</h3>";
        rates.append(rtnMessage);
      }					
			
} 
    else {
		   rates.append(''); 

		}	
	}); 
});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
View Solution Only
Rainer Jeschor
Most Valuable Expert 2013
Awarded 2012

Commented:
Hi,
are you sure?
I copied basicly nearly all of your sources, and besides the bootstrap stuff it seems to work:
http://jsfiddle.net/EE_RainerJ/82L5b33b/

Perhaps you can make screenshots to explain what is wrong on your page?
Or do you have a public link where we can debug?

Thanks and HTH
Rainer
Rainer Jeschor
Most Valuable Expert 2013
Awarded 2012

Commented:
Ah, and one change I made.
In line three of the script, the variable is written "wrong". Javascript is case sensitive,
therefore I changed
var RtnMessage

Open in new window

to 
var rtnMessage = '';

Open in new window


And this might be also the solution to your Problem, as your initial code is always appending to the variable, but I changed it so that it gets initialized every time to be an empty string.

HTH
Rainer
burnedfaceless

Author

Commented:
I fixed the error that you noted.

There are two pages where this occurs, both use a seperate jQuery file, one page being designed for tablets and mobile and not containing the border that the desktop page contains.

If you select Little Ogeechee under the following links you will see undefined come up above it, even after this change.

The change did stop the multiple panels from displaying on the tablet.php page however it did not stop the undefined which was already appearing on the desktop page (even after the spelling correction).

Please select Little Ogeechee from the following selection.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Find out now!
burnedfaceless

Author

Commented:
That's not it either, hold on let me upload it again, that was an old version.
burnedfaceless

Author

Commented:
Please view the following two links and click on "Little Ogeechee".

consolidatedutilities.com/example/rates
consolidatedutilities.com/example/rates/tablet.php
Most Valuable Expert 2013
Awarded 2012
Commented:
Hi,
this is due to the "+="
Instead of
case 'Consolidated2':
        rtnMessage += '<div class="panel panel-default subdivision">';

Open in new window

where rtnMessage is undefined as you declare it without initialization value
var rtnMessage;

Open in new window


please use this
case 'Consolidated2':
        rtnMessage = '<div class="panel panel-default subdivision">';

Open in new window

so without the "+" - then you should not have an undefined.

Alternative:
Initialize the variable with a value like
var rtnMessage = '';

Open in new window


HTH
Rainer
burnedfaceless

Author

Commented:
Sorry for taking so long to do this - thanks.

That was really a dumb mistake I didn't take the time to look at my code thanks for doing that. I just really hate JavaScript but I will look at my stuff.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial