Search code examples
javascriptjqueryajaxdatepickersimplemodal

How do I put a jQuery datepicker in a SimpleModal dialog that its data comes from an ajax call?


I have a modal window appearing using SimpleModal with a jQuery datepicker attached to the textfield licenseExpiry. licenseExpiry is defined within the contents of the ajax call (SchoolDetails.php). However, when I click on the text box, nothing happens. I know that the callback is occurring because the console displays "opened", and the licenseExpiry object definitely exists in the DOM.

function SchoolDetails()
{
    $.ajax({url:'SchoolDetails.php', success: function(data)
    {
        $('#admin-modal-content').html(data);
        $('#admin-modal-content').modal({
            onShow : function() {
                console.log("opened");
                $( "#licenseExpiry" ).datepicker();
            },
            containerCss: {
                width: 500,
                height: 400
            }});

        }});
        return false;
    }

What am I doing wrong?

EDIT: I tried putting the function in the onShow callback in an onOpen callback and in SchoolDetails.php, that also doesn't work.


Solution

  • Changing the version of jquery-ui I was using from 1.9.2 to 1.10.3 fixed the issue for me. I left the rest of the code as is.