I am using datepicker with php and jQuery to show events however this script will not work in IE and I cant figure out why. I think it has something to do with the $.get jQuery but not sure why this will not work
<?
// DB CONNECTION
?>
<link type="text/css" href="/css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>
<?
// DB QUERY DB
$sql = "SELECT MONTH(eStart) as mon, DAY(eStart) as day, YEAR(eStart) as year FROM events WHERE eStart LIKE '%$date%' ORDER BY eStart ASC";
$rows = $db->query($sql);
while ($record = $db->fetch_array($rows)) {
$dates .= "new Date(".$record[year].", ".$record[mon]."-1, ".$record[day]."),";
}
$dates = rtrim($dates, ',');
?>
<script type="text/javascript">
$(document).ready(function() {
var dates = [<?= $dates; ?>];
$('#datepicker').datepicker({
numberOfMonths: [1,1],
beforeShowDay: highlightDays
});
$('#datepicker').click(function(evt){
// put your selected date into the data object
var data = $('#datepicker').val();
$.get('/getdata.php?date='+ encodeURIComponent(data), function(data) {
$('#events').empty();
$('#events').html(data).show();
evt.preventDefault();
});
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (dates[i].getTime() == date.getTime()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
});
</script>
<style>
#highlight, .highlight {
background-color: #000000;
}
</style>
<div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div>
<div id="events" style="float:left;font-size: 10pt;height: 300px;">
<p>Select a date on the calendar to see events.</p>
</div>
<div style="clear:both"></div>
Here it is with no php, just the HTML output
<link type="text/css" href="/css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(document).ready(function() {
var dates = [new Date(2011, 11-1, 3),new Date(2011, 11-1, 11),new Date(2011, 11-1, 19),new Date(2011, 11-1, 26),new Date(2011, 12-1, 11),new Date(2012, 6-1, 16),new Date(2012, 7-1, 1),new Date(2012, 9-1, 20),new Date(2012, 10-1, 25)];
$('#datepicker').datepicker({
numberOfMonths: [1,1],
beforeShowDay: highlightDays
});
$('#datepicker').click(function(evt){
// put your selected date into the data object
var data = $('#datepicker').val();
$.get('/getdata.php?date='+ encodeURIComponent(data), function(data) {
$('#theevents').empty();
$('#theevents').html(data).show();
evt.preventDefault();
});
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (dates[i].getTime() == date.getTime()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
});
</script>
<style>
#highlight, .highlight {
background-color: #000000;
}
</style>
<div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div>
<div id="theevents" style="float:left;font-size: 10pt;height: 300px;">
<p>Select a date on the calendar to see theevents.</p>
</div>
<div style="clear:both"></div>