jquery ui 日期选择器无法使用选项卡

Question

当用户在 jquery ui 代码中切换选项卡时，他们可以单击按钮将数据添加到 jqgrid。唯一不起作用的是日期选择器；它会启动一次，之后当切换到新标签时它不会再次启动。

源文件代码；

<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);
        }
    );
});

这是正在加载的动态文档中的代码；

<?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();

非常感谢任何帮助

Answer 1

如果您将此托管在选项卡中，您将想要利用 activate 事件（在代码中看不到它，但它在问题中？）。请参阅 jQuery UI Tabs Widget 文档。

您将要在 activate 或您的 loadGrid() 函数中添加一些东西来初始化日期选择器：

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

当然，您必须让日期选择器成为 class 日期选择器才能工作。请参阅 jQuery UI Datepicker 文档。

jquery ui 日期选择器无法使用选项卡

jquery ui datepicker not working with tabs

php

jquery

tabs

jquery-ui

datepicker