Forums
"It's no secret that web developers are generally considered the red headed stepchildren of programming, and with good reason," writes Joe. "With its proliferation of forgiving and loosely structured languages and the huge demand for web developers in our modern web-centric world, it's not surprising that the field is practically overrun by script monkeys with no real programming background. Armed with a shelf full of books on all the latest web technologies and a subscription to Experts' Exchange, they enthusiastically pound away at their keyboards day after day, happily and cluelessly producing oceans of spaghetti code so bad that even Olive Garden wouldn't serve it."
"Over the course of a decade in web development, I've seen so much terrible code that it takes something truly unholy to elicit more from me than a deep sigh and a weary eye-rubbing... but, every once in a great while, the devil still opens hell's source repository and looses upon my screen a horror so foul that even one as jaded as myself weeps in bitter despair. This is one such horror. I apologetically present to you: the date selector of the damned.
Joe continues, "the premise is so simple it could be from Chapter 1 of a Javascript book: a date field that pops-up a calendar to easily select a month, day and year. It's a single line of jQuery or, if this were done in the days of old, an integration of a third-party component. In either case, any web developer with a week of experience under his belt should be able to implement such a requirement with a couple dozen lines of code in half an hour.
"Unfortunately, my predecessor had far more than a week of experience -- not just with Javascript, but with jQuery as well -- when he wrote his utterly incomprehensible implementation of this simple javascript task."
<script type="text/javascript">
var GlobalVars = {};
// final Date string to be passed to SAP is stored here
GlobalVars.MyDate = '';
// date fields user is interested in looking up result history for
GlobalVars.Day = '';
GlobalVars.Month = '';
GlobalVars.Year = '';
$(document).ready(function () {
$('#goBtn').live('click', function () {
RedirectToResults();
});
if (GlobalVars.MyDate != '') {
// parse Date value
GetCurrentDate(GlobalVars.MyDate);
}
else {
// populate form with current date
GetCurrentDate('');
}
});
function RedirectToResults() {
// validate user input
GlobalVars.SelectedIndex = 0;
// clear error field
ClearErrorMessage();
// ck month selection field
if ($('#MonthSelect option:selected').val() > 1) {
// store selected index
GlobalVars.SelectedIndex = $('#MonthSelect option:selected').val();
// string to int please
GlobalVars.SelectedIndex = parseInt(GlobalVars.SelectedIndex);
// set query filter based on selected value
switch (GlobalVars.SelectedIndex) {
case 2:
{
GlobalVars.Month = '01';
break;
}
case 3:
{
GlobalVars.Month = '02';
break;
}
case 4:
{
GlobalVars.Month = '03';
break;
}
case 5:
{
GlobalVars.Month = '04';
break;
}
case 6:
{
GlobalVars.Month = '05';
break;
}
case 7:
{
GlobalVars.Month = '06';
break;
}
case 8:
{
GlobalVars.Month = '07';
break;
}
case 9:
{
GlobalVars.Month = '08';
break;
}
case 10:
{
GlobalVars.Month = '09';
break;
}
case 11:
{
GlobalVars.Month = '10';
break;
}
case 12:
{
GlobalVars.Month = '11';
break;
}
case 13:
{
GlobalVars.Month = '12';
break;
}
}
}
else {
// warn user
alert('You Must Choose a Month!');
return;
}
// ck day selection field
if ($('#DaySelect option:selected').val() > 1) {
// store selected index
GlobalVars.SelectedIndex = $('#DaySelect option:selected').val();
// string to int please
GlobalVars.SelectedIndex = parseInt(GlobalVars.SelectedIndex);
// set query filter based on selected value
switch (GlobalVars.SelectedIndex) {
case 2:
{
GlobalVars.Day = '01';
break;
}
case 3:
{
GlobalVars.Day = '02';
break;
}
case 4:
{
GlobalVars.Day = '03';
break;
}
case 5:
{
GlobalVars.Day = '04';
break;
}
case 6:
{
GlobalVars.Day = '05';
break;
}
case 7:
{
GlobalVars.Day = '06';
break;
}
case 8:
{
GlobalVars.Day = '07';
break;
}
case 9:
{
GlobalVars.Day = '08';
break;
}
case 10:
{
GlobalVars.Day = '09';
break;
}
case 11:
{
GlobalVars.Day = '10';
break;
}
case 12:
{
GlobalVars.Day = '11';
break;
}
case 13:
{
GlobalVars.Day = '12';
break;
}
case 14:
{
GlobalVars.Day = '13';
break;
}
case 15:
{
GlobalVars.Day = '14';
break;
}
case 16:
{
GlobalVars.Day = '15';
break;
}
case 17:
{
GlobalVars.Day = '16';
break;
}
case 18:
{
GlobalVars.Day = '17';
break;
}
case 19:
{
GlobalVars.Day = '18';
break;
}
case 20:
{
GlobalVars.Day = '19';
break;
}
case 21:
{
GlobalVars.Day = '20';
break;
}
case 22:
{
GlobalVars.Day = '21';
break;
}
case 23:
{
GlobalVars.Day = '22';
break;
}
case 24:
{
GlobalVars.Day = '23';
break;
}
case 25:
{
GlobalVars.Day = '24';
break;
}
case 26:
{
GlobalVars.Day = '25';
break;
}
case 27:
{
GlobalVars.Day = '26';
break;
}
case 28:
{
GlobalVars.Day = '27';
break;
}
case 29:
{
GlobalVars.Day = '28';
break;
}
case 30:
{
GlobalVars.Day = '29';
break;
}
case 31:
{
GlobalVars.Day = '30';
break;
}
case 32:
{
GlobalVars.Day = '31';
break;
}
}
}
else {
// warn user
alert('You Must Choose a Day!');
return;
}
// ck year selection field
if ($('#YearSelect option:selected').val() > 1) {
//store selected index
GlobalVars.SelectedIndex = $('#YearSelect option:selected').val();
// string to int please
GlobalVars.SelectedIndex = parseInt(GlobalVars.SelectedIndex);
// set query filter based on selected value
switch (GlobalVars.SelectedIndex) {
case 2:
{
GlobalVars.Year = '2011';
break;
}
case 3:
{
GlobalVars.Year = '2012';
break;
}
}
}
else {
// warn user
alert('You Must Choose a Year!');
return;
}
// build completed Date String
GlobalVars.MyDate = GlobalVars.Month + '/' + GlobalVars.Day + '/' + GlobalVars.Year;
// query SAP for user result history
window.location = '/SearchResults?MyDate=' + GlobalVars.MyDate
}
function GetCurrentDate(MyDate) {
if(MyDate != '') {
// show current date on form
var Index1 = MyDate.indexOf('/');
var Index2 = MyDate.lastIndexOf('/');
var Month = MyDate.substring(0, Index1)
var Day = MyDate.substring(Index1 + 1, Index2);
var Year = MyDate.substr(Index2 + 1, 4);
var temp = parseInt(Month, 10);
temp++;
// populate month
$('#MonthSelect').val(temp);
temp = parseInt(Day, 10);
temp++;
// populate Day
$('#DaySelect').val(temp);
// populate Year. This app was developed in 2011, so look at current year
// and intialize the YearSelect list with every year between (and including)
// current year and 2011
if (Year != '2011') {
var StartYear = 2011;
var EndYear = parseInt(Year);
var Diff = EndYear - StartYear;
var i = 0;
var OptionValue = 2;
// set StartYear to 2010 so we don't goof up the loop logic
StartYear = 2010;
while (i <= Diff) {
// increment year
StartYear++;
// add to YearSelect list
$('#YearSelect').children().last().after('<option value=' + OptionValue + '>' + StartYear + '</option>');
// increment values
i++;
OptionValue++;
}
// select the EndYear value
$('#YearSelect').val(Diff + 2);
}
else {
$('#YearSelect').replaceWith(
'<select id="YearSelect" style="width:50%;height:10%;float:left;clear:both" tabindex="4">' +
'<option value="1"></option>' +
'<option value="2">2011</option>' +
'</select>'
);
// select 2011
$('#YearSelect').val(2);
}
}
else {
// get current date and time from server
$.getJSON('/GetDateTime)', null, function (data) {
// parse result
if (data != null) {
// show current date on form
var Index1 = data.indexOf('/');
var Index2 = data.lastIndexOf('/');
var Month = data.substring(0, Index1)
var Day = data.substring(Index1 + 1, Index2);
var Year = data.substr(Index2 + 1, 4);
var temp = parseInt(Month, 10);
temp++;
// populate month
$('#MonthSelect').val(temp);
temp = parseInt(Day, 10);
temp++;
// populate Day
$('#DaySelect').val(temp);
// populate Year. This app was developed in 2011, so look at current year
// and intialize the YearSelect list with every year between (and including)
// current year and 2011
if (Year != '2011') {
var StartYear = 2011;
var EndYear = parseInt(Year);
var Diff = EndYear - StartYear;
var i = 0;
var OptionValue = 2;
// set StartYear to 2010 so we don't goof up the loop logic
StartYear = 2010;
while (i <= Diff) {
// increment year
StartYear++;
// add to YearSelect list
$('#YearSelect').children().last().after('<option value=' + OptionValue + '>' + StartYear + '</option>');
// increment values
i++;
OptionValue++;
}
// select the EndYear value
$('#YearSelect').val(Diff + 2);
}
else {
$('#YearSelect').replaceWith('<select id="YearSelect" style="width:50%;height:10%;float:left;clear:both" tabindex="4">' +
'<option value="1"></option>' +
'<option value="2">2011</option>' +
'</select>'
);
// select 2011
$('#YearSelect').val(2);
}
}
});
}
}
</script>
<fieldset id="bottomset">
<legend style="font-size:8pt">Date Selection:</legend>
<label id="MonthLabel" class="ResultLabel" style="float:left;">Month: </label>
<select id="MonthSelect" style="width:30%;height:10%;float:left;clear:both" tabindex="2">
<option value="1"></option>
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
<option value="5">4</option>
<option value="6">5</option>
<option value="7">6</option>
<option value="8">7</option>
<option value="9">8</option>
<option value="10">9</option>
<option value="11">10</option>
<option value="12">11</option>
<option value="13">12</option>
</select>
<label id="DayLabel" class="ResultLabel" style="float:left;clear:both">Day: </label>
<select id="DaySelect" style="width:30%;height:10%;float:left;clear:both" tabindex="3">
<option value="1"></option>
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
<option value="5">4</option>
<option value="6">5</option>
<option value="7">6</option>
<option value="8">7</option>
<option value="9">8</option>
<option value="10">9</option>
<option value="11">10</option>
<option value="12">11</option>
<option value="13">12</option>
<option value="14">13</option>
<option value="15">14</option>
<option value="16">15</option>
<option value="17">16</option>
<option value="18">17</option>
<option value="19">18</option>
<option value="20">19</option>
<option value="21">20</option>
<option value="22">21</option>
<option value="23">22</option>
<option value="24">23</option>
<option value="25">24</option>
<option value="26">25</option>
<option value="27">26</option>
<option value="28">27</option>
<option value="29">28</option>
<option value="30">29</option>
<option value="31">30</option>
<option value="32">31</option>
</select>
<label id="YearLabel" class="ResultLabel" style="float:left;clear:both">Year: </label>
<select id="YearSelect" style="width:50%;height:10%;float:left;clear:both" tabindex="4">
<option value="1"></option>
</select>
<br />
<button id="goBtn" type="button" style="float:left;clear:both">Go >></button>
</fieldset>
Joe adds, "it should be mentioned that my predecessor was a poster child of diligence when it came to staying on top of modern industry trends: jQuery, ASP.Net MVC framework, ajax, you name it. He was the very model of an enlightened modern-day senior web developer, and the plethora of problems that had plagued the company's web apps in the two years he had worked there were entirely the fault of his clueless and idiotic junior... at least according to him. Let his tale be a cautionary one, that a man must first learn the alphabet before he aspires to be Shakespeare.
[Advertisement]
BuildMaster allows you to create a self-service release management platform that allows different teams to manage their applications. Explore how!