Question

I have a datepicker initialized such as:

$("#startDate").datepicker({
onSelect: dateChanged
});

This works in conjunction with the input:

<input type="text" id="startDate" value="" class="dateField"/>

that is in a table for a search over a jquery dataTable.

This works great in chrome, but fails to work in IE. My goal is to have today’s data populate the dataTable then when the start date changes to a previous date the onSelect should call the dateChanged function. The dateChanged function is responsible for querying the database again but with an earlier date.

In IE what happens is that when you select the text box for the date the calendar come up(good). When you select the desired date the calendar does not go away.

I have had a test function call with no problems. The difference is that the test function just has an alert and the dateChanged function has variables initialized and query calls. It seems to work fine until I create a variable of any sort.

Any suggestions would be helpful.

UPDATE

Here is a little more of the function I am trying to call:

function dateChanged(){  
        var StartTime = startDate.value;  
    var EndTime = endDate.value;  
    alert("hello");  
    var cmecProx2 = new cmec();  
...  
}

Most of the code I have I cannot share due to it being for a company I work for but from the code above I am not getting to the alert statement.

Answer 1

Some browsers don’t fire events in a timely fashion. So what works well in FF/Chrome may not work at all in IE. I’ve had good success in these situations by wrapping the event code in a timeout.

$("#startDate").datepicker({ onSelect: function(){setTimeout(dateChanged, 500);} });

This will delay the firing of dateChanged() by half a second, and–if timing is the problem–would give IE enough time to realize the onSelect event has fired.