jquery ui datepicker not working with tabs

Question

When a user switches tabs in the jquery ui code they can click on a button to add data to a jqgrid. The only thing that is not working is datepicker; it will launch one time and after that when switching to a new tab it will not launch again.

source document code;

<link href="/Includes/Site.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/Includes/jqgrid/css/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/Includes/jqgrid/src/css/ui.jqgrid.css">
<script src="/Includes/jqgrid/js/jquery-2.1.4.min.js"></script>
<script src="/Includes/jqgrid/css/jquery-ui-1.11.4.min.js"></script>
<script src="/Includes/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="/Includes/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="/Includes/validation/dist/jquery.validate.min.js"></script>
<script src="/Includes/validation/dist/additional-methods.min.js"></script>

$("#tabs").tabs(
{
    //each tab activation
    activate:function(event, ui)
    { loadGrid(); },
    beforeActivate:function(event, ui)
    {
        var curTab = $('#tabs .ui-tabs-active');
        var curTabName = curTab.text();
        var pos = curTabName.search('-');
        var curID = curTabName.slice(0,pos); 

        var passFrmDiv = "div[id^=adddaydata" + curID + "]";

        $(passFrmDiv).html("");
    }
}); 

function loadGrid()
{
    var curTab = $('#tabs .ui-tabs-active');
    var curTabName = curTab.text();
    var pos = curTabName.search('-');
    var newID = curTabName.slice(0,pos); 

    //reset adddaydata
        $("div[id^=adddaydata" + newID + "]").text('');

    //load form
        var getFrmURL = '90daywellform.php?id=' + newID + '&d=' + $.now();
        var passFrmDiv = "div[id=wellform" + newID +"]";

        $.get(getFrmURL, function(data)
        { $(passFrmDiv).html(data); }); 
        //$(passFrmDiv).load('90daywellform.php?id=' + newID + ' #loadform');

    //load grid
        var getGrdURL = '90daygrid.php?id=' + newID + '&d=' + $.now();
        var passGrdDiv = "div[id=jqgrid" + newID +"]";

        $.get(getGrdURL, function(data)
        { $(passGrdDiv).html(data); }); 

        //$(passGrdDiv).load('90daygrid.php?id=' + newID);

};

//date picker function for adding wells info            
$("button[id^=addday]").click(function() 
{
    var curTab = $('#tabs .ui-tabs-active');
    var curTabName = curTab.text();
    var pos = curTabName.search('-');
    var newID = curTabName.slice(0,pos); //id of the current well
    //var dtTag = '#datepicker' + newID;

    $.get('get90maxday.php?id=' + newID,
        function(data) 
        { 
            var passMax = data;
            var getFrmURL = '90dayadddayform.php?id=' + newID + '&maxday=' + passMax + '&d=' + $.now();
            var passFrmDiv = "div[id^=adddaydata" + newID + "]";

            $.get(getFrmURL, function(data)
            { $(passFrmDiv).html(data); }); 

            //$().text(newID + " " + passAPI);
            //$("#gridarea").load('scadagrid.php?api=' + passAPI + '&start=' + passStart + '&end=' + passEnd);
        }
    );
}); 

And here is the code from the dynamic document that is being loaded;

<?php
$id = $_GET['id'];
?>  

<link href="/Includes/Site.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="/Includes/jqgrid/css/jquery-ui.css">
<script src="/Includes/jqgrid/js/jquery-2.1.4.min.js"></script>
<script src="/Includes/jqgrid/css/jquery-ui-1.11.4.min.js"></script>
<script src="/Includes/validation/dist/jquery.validate.min.js"></script>
<script src="/Includes/validation/dist/additional-methods.min.js"></script>

<tr>
    <td><label for="dt<?php echo $id; ?>">Date</label></td>
    <td><input id="dt<?php echo $id; ?>" name="dt<?php echo $id;?>" type="text"></td>
</tr>

var passID = $("input[id^=id]").val();
var dtPkr = "input[id=dt" + passID +"]";

$(dtPkr).datepicker();

Any assistance is greatly appreciated

Answer 1

You're going to want to tap into the activate event if you've got this hosted in a tab (don't see it in the code, but it's in the question?). See jQuery UI Tabs Widget documentation.

You're going to want to add, in activate or in your loadGrid() function, something to initialize the datepickers:

$(".datepicker").datepicker();

You would, of course, have to have the datepickers be of class datepicker for that to work. See jQuery UI Datepicker documentation.