OnChange not firing in IE11
- by bulletproof
The date picker we use is created in a javascript library. It has a dropdown for the month and year and when these change it fires an onChange event to run a function that refreshes the dates displayed. Below is the function that creates the calendar.
function makeCalendar(intWhatMonth,intWhatYear,bViewOnly) {
if (bViewOnly) {intWhatMonth-=1;}
var strOutput = '';
var intStartMonth=intWhatMonth;
var intStartYear=intWhatYear;
var intLoop;
var strTemp='';
var strDateColWidth;
dteCur.setMonth(intWhatMonth);
dteCur.setFullYear(intWhatYear);
dteCur.setDate(dteToday.getDate());
dteCur.setHours(0);dteCur.setMinutes(0);dteCur.setSeconds(0);dteCur.setMilliseconds(0);
if (!(bViewOnly)) {
strTemp='<form name="spiffyCal">';
}
// special case for form not to be inside table in Netscape 6
if (scNN6) {
strOutput += strTemp +'<table width="210" border="3" class="cal-Table" cellspacing="0" cellpadding="0"><tr>';
}
else {
strOutput += '<table width="210" border="3" class="cal-Table" cellspacing="0" cellpadding="0">'+strTemp+'<tr>';
}
if (!(bViewOnly)) {
strOutput += '<td class="cal-HeadCell" align="center" width="100%"><a href="javascript:'+this.varName+'.clearDay();"><img name="calbtn1" src="'+strDefBtnImgPath+'btn_del_small.gif" border="0" width="12" height="10"></a> <a href="javascript:'+this.varName+'.scrollMonth(-1);" class="cal-DayLink"><</a> <SELECT class="cal-ComboBox" id="cboMonth" NAME="cboMonth" onChange="'+this.varName+'.changeMonth();">';
for (intLoop=0; intLoop<12; intLoop++) {
if (intLoop == intWhatMonth) strOutput += '<OPTION VALUE="' + intLoop + '" SELECTED>' + msNames[intLoop] + '<\/OPTION>';
else strOutput += '<OPTION VALUE="' + intLoop + '">' + msNames[intLoop] + '<\/OPTION>';
}
strOutput += '<\/SELECT><SELECT class="cal-ComboBox" id="cboYear" NAME="cboYear" onChange="'+this.varName+'.changeYear();">';
for (intLoop=this.minYearChoice; intLoop<this.maxYearChoice; intLoop++) {
if (intLoop == intWhatYear) strOutput += '<OPTION VALUE="' + intLoop + '" SELECTED>' + intLoop + '<\/OPTION>';
else strOutput += '<OPTION VALUE="' + intLoop + '">' + intLoop + '<\/OPTION>';
}
strOutput += '<\/SELECT> <a href="javascript:'+this.varName+'.scrollMonth(1);" class="cal-DayLink">></a> <a href="javascript:'+this.varName+'.hide();"><img name="calbtn2" src="'+strDefBtnImgPath+'btn_close_small.gif" border="0" width="12" height="10"></a><\/td><\/tr><tr><td width="100%" align="center">';
}
else {
strOutput += '<td class="cal-HeadCell" align="center" width="100%">'+msNames[intWhatMonth]+'-'+intWhatYear+'<\/td><\/tr><tr><td width="100%" align="center">';
}
firstDay = new Date(intWhatYear,intWhatMonth,1);
startDay = firstDay.getDay();
if (((intWhatYear % 4 == 0) && (intWhatYear % 100 != 0)) || (intWhatYear % 400 == 0))
msDays[1] = 29;
else
msDays[1] = 28;
strOutput += '<table width="210" cellspacing="1" cellpadding="2" border="1"><tr>';
for (intLoop=0; intLoop<7; intLoop++) {
if (intLoop==0 || intLoop==6) {
strDateColWidth="15%"
}
else
{
strDateColWidth="14%"
}
strOutput += '<td class="cal-HeadCell" width="' + strDateColWidth + '" align="center" valign="middle">'+ msDOW[intLoop] +'<\/td>';
}
strOutput += '<\/tr><tr>';
var intColumn = 0;
var intLastMonth = intWhatMonth - 1;
var intLastYear = intWhatYear;
if (intLastMonth == -1) { intLastMonth = 11; intLastYear=intLastYear-1;}
for (intLoop=0; intLoop<startDay; intLoop++, intColumn++) {
strOutput += this.getDayLink(true,(msDays[intLastMonth]-startDay+intLoop+1),intLastMonth,intLastYear,bViewOnly);
}
for (intLoop=1; intLoop<=msDays[intWhatMonth]; intLoop++, intColumn++) {
strOutput += this.getDayLink(false,intLoop,intWhatMonth,intWhatYear,bViewOnly);
if (intColumn == 6) {
strOutput += '<\/tr><tr>';
intColumn = -1;
}
}
var intNextMonth = intWhatMonth+1;
var intNextYear = intWhatYear;
if (intNextMonth==12) { intNextMonth=0; intNextYear=intNextYear+1;}
if (intColumn > 0) {
for (intLoop=1; intColumn<7; intLoop++, intColumn++) {
strOutput += this.getDayLink(true,intLoop,intNextMonth,intNextYear,bViewOnly);
}
strOutput += '<\/tr><\/table><\/td><\/tr>';
}
else {
strOutput = strOutput.substr(0,strOutput.length-4); // remove the <tr> from the end if there's no last row
strOutput += '<\/table><\/td><\/tr>';
}
if (scNN6) {
strOutput += '<\/table><\/form>';
}
else {
strOutput += '<\/form><\/table>';
}
dteCur.setDate(1);
dteCur.setHours(0);dteCur.setMinutes(0);dteCur.setSeconds(0);dteCur.setMilliseconds(0);
dteCur.setMonth(intStartMonth);
dteCur.setFullYear(intStartYear);
return strOutput;
}
this.makeCalendar=makeCalendar;
We have recently upgraded to IE11 and it is not firing this event anymore. I've tested this in an earlier version of IE and also in Chrome and it works as expected. The functions called from the anchor tags are working as expected.
Creating a dropdown with an onChange event in html works in IE11.
Has anyone come across anything like this in IE11?
I have checked the console and it is showing no errors.
