jQuery UI DatePicker not appearing inside Bootbox modal loaded through Ajax

Question

I need to dynamically load a form into a Bootbox modal window. I'm loading the form through Ajax. In the form is a jQuery UI datepicker field.

Using the browser's debugger, when the form is loaded through Ajax, I can see the datepicker element added to the DOM. But, clicking the field doesn't do anything. The calendar doesn't appear, and more importantly, the datepicker DOM element doesn't change like it does when I load a datepicker field directly on the page.

Here's my Ajax call from the index page:

$.ajax({
    type: "post",
    timeout: "100000",
    url: "/cfc/site_functions.cfc",
    beforeSend: function (){ 
        bootbox.dialog({
            message: "Loading...",
            title: modal_title,
            onEscape:false,
            backdrop:true,
            closeButton:true,
            buttons: {
                "Cancel": {}
            }
        });
    },
    data: {
        method: "buildMyForm"
    },
    success: function(objResponse){
        $(".bootbox-body").html(objResponse);
    },
    error: function(xhr, ajaxOptions, thrownError){
        $(".bootbox-body").html("Error loading form.");
    }
});

Here's the Coldfusion function being called by the Ajax call which builds the form and initializes the datepicker field:

<cffunction name="buildMyForm" access="remote" returntype="any" returnformat="plain">

    <cfsavecontent variable="local.buildMyForm">

        <script type="text/javascript">
            $(document).ready(function(e) {
                $("#date_posted").datepicker({
                    showAnim: "slide"
                });
            });
        </script>

        <cfoutput>

            <form method="post" id="edit_form" name="edit_form">

                <div class="form-group">
                    <label for="date_posted" class="required">Date</label>
                    <input type="text" class="form-control" id="date_posted" name="date_posted" required autocomplete="off">
                </div>

            </form>

        </cfoutput>
    </cfsavecontent>

    <cfreturn local.buildMyForm>
</cffunction>

Any thoughts why the datepicker element would initialize, but then not work when you click the date field? There's a similar question but it's solution was to update the CSS because the datepicker calendar was showing with a lower z-index than the Bootbox modal. But, in my case, the datepicker element isn't being populated at all when you click the date field, so it's not just a matter of it being hidden.

Answer 1

Thanks to @EdenSource for helping narrow down the problem.

It seems there may have been some competition on when the datepicker code was firing. I updated the javascript in the CFC (the code that was being called by the ajax function to build the form) and it worked:

<script type="text/javascript">
    $(document).ready(function(e) {
        $("#date_posted").on("focus",function(){
            if(!$(this).hasClass("hasDatepicker")){
                $(this).datepicker({
                    showAnim: "slide"
                });
                $(this).addClass("hasDatepicker");
                $(this).datepicker("show");
            }
        });
    });
</script>