asked on
jQuery switch statement rendering two elements instead of one.
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.
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>
$(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('');
}
});
});
jQueryHTMLCSSBootstrap
Last Comment
burnedfaceless
Ah, and one change I made.
In line three of the script, the variable is written "wrong". Javascript is case sensitive,
therefore I changed
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
In line three of the script, the variable is written "wrong". Javascript is case sensitive,
therefore I changed
var RtnMessage
var rtnMessage = '';
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
ASKER
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.
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.
ASKER
Sorry I gave you the wrong URL please visit
http://www.consolidatedutilities.com/CU2/rates/
and
http://www.consolidatedutilities.com/CU2/rates/tablet.php
http://www.consolidatedutilities.com/CU2/rates/
and
http://www.consolidatedutilities.com/CU2/rates/tablet.php
ASKER
That's not it either, hold on let me upload it again, that was an old version.
ASKER
Please view the following two links and click on "Little Ogeechee".
consolidatedutilities.com/
consolidatedutilities.com/
consolidatedutilities.com/
consolidatedutilities.com/
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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.
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.
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