Search code examples
jqueryjquery-uidatepickerjquery-ui-tabs

Jquery datepicker inside jquery tabs

I have a malfunctioning set of jquery datepickers that are only not working since I put them inside a jquery tabs plugin.

Here are the codes: the main page(index):

   <?php
include 'all.php';
?>
<html>
    <head>
        <meta charset=iso-8859-1" />
        <link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />
        <link rel="stylesheet" type="text/css" href="css.css"></link>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>    
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
        <script type="text/javascript" src="maskMoney.js"></script>

        <title>Financeiro</title>
    </head>

    <body>
        <script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            }
        });
    });
    </script>


        <div>
<div id="tabs">
    <ul>
        <li><a href="financeiro_ver.php">Buscar saída</a></li>
        <li><a href="financeiro_criar.php">Criar saída</a></li>
    </ul>
</div>
            </div>
        <script type="text/javascript" src="view.js"></script>
        <script type="text/javascript" src="create.js"></script>
    </body>
</html>

The javascript codes for the tabs (referring to the datepickers): tab 1 ( "Buscar saída" ):

$(
    function(){
        $("#data1 , #data2").datepicker({ 
            dayNames              : ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sabado"], 
            dayNamesMin           : ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"], 
            changeMonth           : true,
            changeYear            : true,
            monthNames            : ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],
            monthNamesShort       : ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],
            showAnim              : "fadeIn",
            dateFormat            : "yy-mm-dd"
        });
    }
    );

the tab 2 ( "Criar saída" ):

$(
    function(){
        $("#data").datepicker({ 
            dayNames              : ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sabado"], 
            dayNamesMin           : ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"], 
            changeMonth           : true,
            changeYear            : true,
            monthNames            : ["Janeiro","Fevereiro","Março","Abril","Maio","Junho","Julho","Agosto","Setembro","Outubro","Novembro","Dezembro"],
            monthNamesShort       : ["Jan","Fev","Mar","Abr","Mai","Jun","Jul","Ago","Set","Out","Nov","Dez"],
            showAnim              : "fadeIn",
            dateFormat            : "yy-mm-dd"
        });
    }
    );

Problem : The respected javascript effects only happen the first time the tab is opened , if you chenge tabs and the change back it will crash.

PS.: moneyMask is not working either (worked before tabs) , but I think its part of the same problem.

Solution

  • You need to do some more configuring of your tabs since you are ajax loading them.

    When you load new html anywhere within a page , you need to bind plugins to that new html after it loads, even if it has the same structure, ID's etc as the html it replaces.

    You can do this within the load option of tabs which fires after ajax content has loaded. You may also want to look at cache option that only loads ajax content once in each tab.

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

    You can also bind to the tabsload event anywhere in your code, not just in the tabs initialization code.

    See Events tab in Tabs docs