Question

I’ve got a form that gets shown via a simplemodal popup and one of the form elements is a jquery ui datepicker. If you open the form, choose a date, close the modal, then open the form again and try and choose a date I get a javascript error (IE8) that’s in the title of the post. I haven’t tested it on other browsers as I am in work at the moment, but I need this working on IE8.

An example of the code that throws this error can be found at http://jsbin.com/uzewi4/10

I’m not very good at javascript, but I’m assuming simplemodal is destroying or doing something weird when you close the modal, which causes the datepicker to break. Any ideas how I can fix this?

Answer 1

It’s SimpleModal. From the docs:

CLONING AND ELEMENT REMOVAL

By default, SimpleModal will clone the data element that you pass in. When the dialog is closed, the cloned, unchanged, data element will be re-inserted into DOM in its original place. If the persist option is true, SimpleModal will “re-insert” the original element, with changes intact.

So it’s cloning the elements, and then replacing them with clones. Clearly DatePicker isn’t expecting that to happen (understandably).

Very odd behavior, but adding persist: true makes your example work:

$('.start').click(function (e) {
  $('#startform').modal({
    opacity:50,
    overlayCss: {backgroundColor:"#000"},
    overlayClose:true,
    persist: true             // <== This is the new bit
    });
  return false;
});  

http://jsbin.com/uzewi4/11

Off-topic: FWIW, jQuery UI itself has a perfectly nice dialog mechanism, including modality…