无法将datepicker加载到ajax标签中

时间:2015-03-16 08:56:33

标签: jquery ajax jquery-ui datepicker

我无法通过ajax加载标签中的日期选择器工作。 这是我主页上的脚本:

    <head>
    <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
    <title>Studio90DMS - Ricerca Generale</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
    <script src="../lib/datepicker-it.js"></script>
    <script type="text/javascript" src="../lib/rollover.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="../css/screen.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="../css/jqueryobject.css" />
</head>
<script>
    $(document).ready(function() {
        $( "#tabs" ).tabs({
        });
    }); 
</script>
选项卡上的

我需要datepicker我有以下内容:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="../lib/datepicker-it.js"></script>
<script>
    $(document).ready(function() {
        $.datepicker.setDefaults( $.datepicker.regional[ "it" ] );
        $( ".datepicker" ).datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "dd/mm/yy",
            beforeShowDay: highlightOddsEven,
            showOtherMonths: true,
            selectOtherMonths: true
        });
    }); 

    function highlightOddsEven(date) {
        //return [true, date.getDate() % 2 == 1 ? 'odd' : ''];
        return [true, date.getDate() % 2 == 1 ? 'oddEven' : 'oddEven'];
    }

    $('#form_termine').on('submit', function(e){
        e.preventDefault();
        var formSrc = $(this).attr('action');
        var formMethod = $(this).attr('method');
        var formData = $(this).serialize();
        $.ajax({
        url: formSrc,
        type: formMethod,
        data: formData,
        success: function(data){
            //work with returned data from requested file
            $("#termConsegna").html(data);
        }
        });
    });
</script>

当我打开选项卡时,我收到以下错误,并且datepicker不起作用:

    Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
VM551:15 Uncaught TypeError: Cannot read property 'regional' of undefined
VM552:2 Uncaught TypeError: Cannot read property 'setDefaults' of undefined

任何人都可以帮助我吗?

2 个答案:

答案 0 :(得分:0)

尝试在ajax完成后加载datepicker。

$(document).ajaxComplete(function () {
     $.datepicker.setDefaults( $.datepicker.regional[ "it" ] );
     $( ".datepicker" ).datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy",
        beforeShowDay: highlightOddsEven,
        showOtherMonths: true,
        selectOtherMonths: true
    });
});

添加了标签加载功能。请根据您的要求编辑,然后尝试。

$( "#tabs" ).tabs({
  load: function(event, ui) {
    var $curr_panel=$(ui.panel);
     $curr_panel.find(".datepicker").datepicker()
   }
 });

答案 1 :(得分:0)

发现了问题! 代码: main.php

<script>
$(document).ready(function() {
    $( "#tabs" ).tabs({
        load: function(event, ui) {
            var $curr_panel=$(ui.panel);
            //$( "div" ).find( "input" ).css( "background-color", "red" );
            //alert($curr_panel.find(".datepicker").val());
            $.datepicker.setDefaults( $.datepicker.regional[ "it" ] );
            $curr_panel.find(".datepicker").datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd/mm/yy",
                beforeShowDay: highlightOddsEven,
                showOtherMonths: true,
                selectOtherMonths: true
            });
        }
    });
});

function highlightOddsEven(date) {
    //return [true, date.getDate() % 2 == 1 ? 'odd' : ''];
    return [true, date.getDate() % 2 == 1 ? 'oddEven' : 'oddEven'];
}
</script>

标签页上没有其他内容,因为主页中已经存在所有de定义