tags:

views:

132

answers:

7
+3  Q: 

javascript error

My Script is working if

<script type="text/javascript">
$(document).ready(function() { 
    $('#holidayDate').datepicker(); 
    var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
    $("#tags").autocomplete({source:availableTags}); 
    $('#holidayDate').change(function() { 
        if ($(this).val().substring(0, 5) === '12/25') { 
            $('#tags').val('Christmas Day'); 
        }
        else { 
            $('#tags').val(''); 
        }                
    }); 
}); 
</script>

And its not working if I include multiple values using "if" or "else if"

<script type="text/javascript">
$(document).ready(function() { 
    $('#holidayDate').datepicker(); 
    var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
    $("#tags").autocomplete({source:availableTags}); 
    $('#holidayDate').change(function() { 
        if ($(this).val().substring(0, 5) === '12/25') { 
            $('#tags').val('Christmas Day'); 
        }
        if ($(this).val().substring(0, 5) === '01/01') { 
            $('#tags').val('New years Day'); 
        } 
        if ($(this).val().substring(0, 5) === '02/02') { 
            $('#tags').val('Groundhog Day'); 
        } 
        if ($(this).val().substring(0, 5) === '02/14') { 
            $('#tags').val('Valentine's Day'); 
        } 
        if ($(this).val().substring(0, 5) === '04/22') { 
            $('#tags').val('Earth Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '10/12') { 
            $('#tags').val('Columbus Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '07/04') { 
            $('#tags').val('Independence Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '10/31') { 
            $('#tags').val('Halloween'); 
        } 
        if  ($(this).val().substring(0, 5) === '11/11') { 
            $('#tags').val('Veterans Day'); 
        } 
        if  ($(this).val().substring(0, 5) === '12/07') { 
            $('#tags').val('Pearl Harbor Remembrance Day'); 
        } 
        else { 
            $('#tags').val(''); 
        }                
    }); 
}); 
</script>
+3  A: 

This line will cause an error

$('#tags').val('Valentine's Day');
Castrohenge
+5  A: 
$('#tags').val('Valentine's Day');

You got some quote problem here...
Should be:

$('#tags').val('Valentine\'s Day'); 

Note the backslash to escape the quote...

Macmade
+1  A: 

Could it be that it is broken due to

('Valentine's Day'); 

your single quote in the middle is closing the string.

Redlab
+2  A: 

You may also want to put $(this).val().substring(0, 5) into a variable in order to avoid fetching the data again on every conditional.

Rodrigo
A: 

try this code snip

<script type="text/javascript">
$(document).ready(function() { 
    $('#holidayDate').datepicker(); 
    var availableTags = ["New years Day", "Martin Luther King Day", "Groundhog Day", "Valentine's Day", "Washington's Birthday", "Easter", "Earth Day", "National Arbor Day", "Mother's Day", "Memorial Day", "Flag Day", "Father's Day", "Independence Day", "Labor Day", "Columbus Day", "Halloween", "Veterans Day", "Thanksgiving Day", "Pearl Harbor Remembrance Day", "Christmas Day"]; 
    $("#tags").autocomplete({source:availableTags}); 
    $('#holidayDate').change(function() { 
    substr = $(this).val().substring(0, 5);
        if (substr == '12/25') { 
            $('#tags').val('Christmas Day'); 
        }
        else if (substr == '01/01') { 
            $('#tags').val('New years Day'); 
        } 
        else if (substr == '02/02') { 
            $('#tags').val('Groundhog Day'); 
        } 
        else if (substr == '02/14') { 
            $('#tags').val('Valentine's Day'); 
        } 
        else if (substr == '04/22') { 
            $('#tags').val('Earth Day'); 
        } 
        else if  (substr == '10/12') { 
            $('#tags').val('Columbus Day'); 
        } 
        else if  (substr == '07/04') { 
            $('#tags').val('Independence Day'); 
        } 
        else if  (substr == '10/31') { 
            $('#tags').val('Halloween'); 
        } 
        else if  (substr == '11/11') { 
            $('#tags').val('Veterans Day'); 
        } 
        else if  (substr == '12/07') { 
            $('#tags').val('Pearl Harbor Remembrance Day'); 
        } 
        else { 
            $('#tags').val(''); 
        }                
    }); 
}); 
</script>
Jaison Justus
why not just tell him to use a switch statement? IF/ELSE of this magnitude makes code horrible! http://www.w3schools.com/js/js_switch.asp
Jakub
you are right.. please be sorry
Jaison Justus
+7  A: 

Others beat me to the answer here, but I would still like to make a small suggestion. When working with a lot of if and else if it's sometimes useful to swap it for an object map. Currently, in your code you're performing a lot of unnecessary lookups that should at least be stored into a variable instead, but using an object map could make this code a lot simpler:

var map = {
    "12/25": "Christmas Day",
    "01/01": "New Years Day",
    "02/02": "Groundhog Day",
    "02/14": "Valentine's Day",
    "04/22": "Earth Day",
    "10/12": "Columbus Day",
    "07/04": "Independence Day",
    "10/31": "Halloween",
    "11/11": "Veterans Day",
    "12/07": "Pearl Harbour Remembrance Day",
}
$('#holidayDate').change(function() {
    // Check our object map for the date, default to "" if there isn't one.
    $('#tags').val(map[$(this).val().substring(0, 5)] || ""); 
}); 

Much neater, IMO.

EDIT: Since you can't get it working, I created an example for you.

Andy E
Its not working [CODE]`<script type="text/javascript"> //i INCLUDED THESE TWO LINES HERE $(document).ready(function() { $('#holidayDate').datepicker(); //JQUERY DATEPICKER //YOUR CODE HERE ..}); </script>`[/CODE]
oneofthelions
@oneofthelions: updated my answer with a working example on jsfiddle.net.
Andy E
why was not our `getThirdMonday() ' ... working?
oneofthelions
@oneofthelions: i'm not sure, I don't see a `getThirdMonday()` function in your question. @mplungjan seems to have implemented it for you in his answer, however.
Andy E
+1  A: 

I have created an NthDay to handle last day of and have an easter implementation too

The last version - Complete example with autofill of date from holiday too

What remains is to make it a nice jQuery plugin

Here is some of the code - no more switch

var fixedHolidayMap = { // "Name of day":"MM/DD"
"New years Day"               :"01/01",
"Groundhog Day"               :"02/02",
"Valentine's Day"             :"02/14",
"Earth Day"                   :"04/22",
"Flag Day"                    :"06/14",
"Independence Day"            :"07/04",
"Halloween"                   :"10/31",
"Veterans Day"                :"11/11",
"Pearl Harbor Remembrance Day":"12/07",
"Christmas Day"               :"12/25"
}
var variableHolidayMap = { // "Name of day":"Nth,DDD,M" 
"Martin Luther King Day":"3,Mon,1",  // 3rd Mon in Jan 
"Washington's Birthday" :"3,Mon,2",  // 3rd Mon in Feb 
"National Arbor Day"    :"-1,Fri,4", // Last Fri of Apr
"Mother's Day"          :"2,Sun,5",  // 2nd Sun in May
"Memorial Day"          :"-1,Mon,5", // Last Mon of May 
"Father's Day"          :"3,Sun,6",  // 3rd Sun in Jun
"Labor Day"             :"1,Mon,9",  // 1st Mon in Sep
"Columbus Day"          :"2,Mon,10", // 2nd Mon in Oct
"Thanksgiving Day"      :"4,Thu,11"  // 4th Thu in Nov
};
var availableTags = ["Easter"]; // the odd one out
var fixedHoliday = [];
for (var o in fixedHolidayMap) { // build a holiday by dateString 
  availableTags[availableTags.length] = fixedHolidayMap[o];
  fixedHoliday[fixedHolidayMap[o]]=o;
}  
for (var o in variableHolidayMap) availableTags[availableTags.length] = o;
mplungjan
Why this is not working for me. Is this working with you. I checked and I have the exact script.
oneofthelions
Did you implement or comment out the "getThirdMondayInJanuary()" ??? It was meant as a pointer to a possible MLK day
mplungjan
I tried to implement. But My code would not load if I have that MLK syntax...is that right way of getting the third Monday?
oneofthelions
I missed a semicolon between res = availableTags[1] and break; -- I have added the missing function, let me know if it works for you
mplungjan
@mplungjan : Awesome. I was able to get thirdMondayInFebruary for Washington Day. Now I am trying for LastFridayInApril (National Arbor Day).Can you please explain me the funtion getThirdMondayInJanuary, specifically the last three lines. I would work on the rest.Thanks again
oneofthelions
@mplungjan: Got it. Thanks!
oneofthelions
Great... Should make the function more generic then. There is one from 1997 at irt.org ;)
mplungjan
I'm working on a NthDay function now. Let's see how it will shape up.
mplungjan
I want to make a jQuery plugin. I need some help with the varying holidays to make it only calculate if the year changes. Watch this space
mplungjan
Here is the latest versionhttp://www.plungjan.name/scripts/date/calendars/getholiday.htmlComments are welcome
mplungjan