2

I have a static page with a link that opens a modal Dialog that loads a sub-page. The sub-page includes an input with a Datepicker widget.

When I first open the Dialog, the sub-page loads and the Datepicker appears and functions normally.

When I close the Dialog and open it again, the sub-page loads, but the Datepicker does not appear, and there are no reported errors. I assume this might be because Dialog leaves remnants around when it's closed, so re-opening it loads in the sub-page again, but Datepicker ignores the duplicated instance.

The Dialog setup/call is simply:

$("a#Popup").click(function() {
  var subpage = $("div#SubPage")
    .dialog({ autoOpen: false, width: 480, minHeight: 280, modal: true });
  var addr = $("a#Popup").attr('href');
  subpage.load(addr);
  subpage.dialog('open');
  return false;
});

Is there a way to proper way to close the Dialog so it is removed cleanly and can still be opened again? I experimented with destroy(), but had problems with the Dialog functioning again.

I did notice that, since Dialog puts its generated code after my page's form tag, I can remove it all using:

$("form").nextAll().remove();

so I might try that in Dialog's close event, though it's hacky.

Improve this question
4
  • Most likely it is not initializing DatePicker a second time. The Dialog is created each time it's clicked, so how is it being removed? How is DatePicker being setup each time?
    – Twisty
    Commented Aug 21, 2018 at 17:53
  • @Twisty The Dialog is simply being closed, but it doesn't get removed from the DOM, it's only hidden. Each subsequent opening creates a new instance, which loads another instance of the sub-page. The DatePicker is created in the sub-page, so multiple instances of it are created as well. I'd be ok with either the Dialog just re-opening the existing instance w/o reloading the sub-page, or the Dialog being removed and recreated from scratch each time (though slight performance hit).
    – Francisco
    Commented Aug 22, 2018 at 15:48
  • Actually, re-using the Dialog isn't perfect. I have a page with 2 Dialogs, each of which have Datepickers. If the 1st Dialog is closed and the 2nd is opened, the Datepickers don't work at all, presumably because the Datepickers on the 1st one are still (hidden) on the page.
    – Francisco
    Commented Aug 22, 2018 at 15:59
  • It's hard to tell since you have not yet provided a complete example.
    – Twisty
    Commented Aug 22, 2018 at 16:10

1 Answer 1

Reset to default
0

jQuery's DatePicker has some odd quirks. Fit.UI (which internally uses jQuery's DatePicker) compensates for some of them, as well as provide a native experience on mobile devices, add various extra features, and provides a traditional Object Oriented API. So if you are okay with a solution that is not "pure jQuery", then consider this: https://fitui.org/Control-DatePicker.html

(I'm biased - I work with Fit.UI)

You should install the updated package on npm if you want to use it, or download the most recent version from GitHub.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.