CODEWITHSUNDEEP
jqueryjquery-pluginsdatepickerinternet-explorer-9
Xtyan
Xtyan

Reputation: 33

Keith Wood Datepick in ie9 doesn't work on click

I'm using the Keith Wood Datepick plugin with JQuery 1.8.2. I have two calendar datepicker inputs. The user clicks first input (calendar is shown), then clicks the next input, so the second calendar is shown, closing the first.

In this step, in FF it's happening this error:

TypeError: inst.div is null
inst.div.remove();

but continues working. However, in the same step on Internet Explorer 9 the plugin stops running and doesn't work anymore. I need to refresh the page to recover functionality. Here is my JavaScript code:

$(function() {
     $('#date1,#date2').datepick();
});

Please check this sample: http://jsfiddle.net/wjwa5/8/.

It works fine with jQuery 1.4.4, but I need it to work in the 1.8.2 version.

Upvotes: 3

Views: 518

Answers (1)

merv
merv

Reputation: 76790

The problem is that the Datepicker hide() method makes an assumption as to how jQuery handles the parameters of it's own hide() method. Namely, back in jQuery 1.4.4, if you made a call like

$('#some-element').hide('',someCallback)

jQuery will consider the first element to be the speed parameter, and unless that parameter satisfies the expression

speed || speed === 0

jQuery will just ignore the parameters and execute the function like it was a plain old

$('#some-element').hide()

which means the callback will never get called.

Well, whoever implemented the code for the Datepicker recognized this behavior and, rather than altering the parameter to properly trigger the callback, came up with the workaround to just call the callback manually.

Here's an excerpt from 4.0.6 (OP version)

else { 
  // Note: This branch will always execute when one datepicker opening
  //       triggers the closing of another. Moreover, showAnim === ''
  var hideAnim = (showAnim == 'slideDown' ? 'slideUp' :
    (showAnim == 'fadeIn' ? 'fadeOut' : 'hide'));
  inst.div[hideAnim]((showAnim ? showSpeed : ''), postProcess);
}
if (!showAnim) {
  postProcess();
}

When the opening of one datepicker triggers the closing of the other, the above code will reduce to

inst.div.hide('', postProcess); // this is the jQuery.fn.hide function
postProcess();

Which works fine...in jQuery 1.4.4.

However, jQuery has been improved since then to the effect that, if you pass a callback to the hide method, jQuery will make sure that it gets called when it finishes. Hence, the problem you're experiencing is that the callback postProcess gets called twice.

Resolution

To just fix this so it no longer throws an exception in later jQuery versions, you only need to eliminate/comment out the lines

if (!showAnim) {
  postProcess();
}

If you additionally want the fix to be backward compatible with the older jQuery versions, you should also change

inst.div[hideAnim]((showAnim ? showSpeed : ''), postProcess);

to 

inst.div[hideAnim]((showAnim ? showSpeed : 0), postProcess);

Plunk (using 4.1.0)

Note: In 4.1.0 a workaround was introduced which just puts a test in the postProcess method to check for null values first. However, this ignores the core problem that the callback is called twice.

Upvotes: 1

Related Questions