can't load datepicker into ajax tab

Question

i can't have a datepicker work inside tab loaded via ajax. here the script on my main page:

    <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>

on the tab i need the datepicker i have the following:

    <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>

when i switch on the tab i get the following errors and the datepicker does not work:

    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

can anyone help me?

Does [this](http://stackoverflow.com/questions/24740773/synchronous-xmlhttprequest-on-the-main-thread-is-deprecated) help? — Phylogenesis, Mar 16 '15 at 09:00

tech-gayan · Answer 1 · 2015-03-16T10:08:26.737

0

try to load the datepicker after ajax complete.

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

added tab load functionality. please edit this according to your requirements and try.

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

edited Mar 16 '15 at 10:08

answered Mar 16 '15 at 09:07

tech-gayan

1,373
1
10
25

with your advice i don't get this error anymore "VM552:2 Uncaught TypeError: Cannot read property 'setDefaults' of undefined". still the others persists. i tried to comment "$.datepicker.setDefaults( $.datepicker.regional[ "it" ] );" with no results. any suggestion? – Manuel Mar 16 '15 at 09:35
is it happening only after the Ajax call?. in the initial page do you getting this error. – tech-gayan Mar 16 '15 at 09:38
in the main page i don't get this error (the code is in the first post). do you need any other detail? thanks for help – Manuel Mar 16 '15 at 09:46
edited the answer. this is like re initiating the Date picker after ajax call. but bettor try this first. – tech-gayan Mar 16 '15 at 09:49
perfect! the errors are gone. still can't show the datepicker... :( – Manuel Mar 16 '15 at 09:52
edit: i tried to insert an alert inside ajaxComplete and it doesn't get fired.... (thats why no errors i think) – Manuel Mar 16 '15 at 10:00

score 0 · Accepted Answer · answered Mar 20 '15 at 15:17

found the problem! the code: 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>

nothing else on the tab page since all de definition is already present in the main page

can't load datepicker into ajax tab

2 Answers2