Jquery datepicker à l'intérieur des onglets jquery

J'ai un mauvais fonctionnement de jquery datepickers qui ne fonctionnent que depuis que je les ai mis dans un plugin jquery tabs.Jquery datepicker à l'intérieur des onglets jquery

Voici les codes: la page principale (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>

Les codes javascript pour les onglets (se référant aux datepickers): onglet 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" 
     }); 
    } 
    );

l'onglet 2 ("saída Criar"):

$(
    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" 
     }); 
    } 
    );

Problème: Les effets javascript respectés ne se produisent que la première fois que l'onglet est ouvert, si vous déplacez les onglets et le retour en arrière, il va planter.

PS: moneyMask ne fonctionne pas non plus (travaillé avant les onglets), mais je pense que c'est la partie du même problème.

Source

2012-06-17 Giovanni Di Toro

Vous devez configurer davantage vos onglets car vous les ajaxez. Lorsque vous chargez du nouveau HTML n'importe où dans une page, vous devez lier les plugins à ce nouveau HTML après son chargement, même s'il a la même structure, ID, etc. que le html qu'il remplace.

Vous pouvez le faire dans l'option load des onglets qui se déclenchent après le chargement du contenu ajax. Vous pouvez également regarder l'option cache qui charge uniquement le contenu ajax une fois dans chaque onglet.

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

Vous pouvez également lier à l'événement tabsload partout dans votre code, non seulement dans le code d'initialisation des onglets.

Voir onglet Evénements dans Tabs docs

Source

2012-06-17 20:04:17 charlietfl

aucune idée sans voir ce qu'ils sont, si elles sont en html ou des objets, ou savoir où ils viennent à partir de – charlietfl

avoir un tag metf charset utf-8? – charlietfl

Le jeu de caractères ne fonctionne pas à l'intérieur de l'onglet div, mais à l'extérieur, c'est bien. –

Insted d'id #tabs utiliser une classe pour datepicker

<script type="text/javascript"> 
    $(function() { 
     $(".datepicker").datepicker(); 
    }); 
</script>

Source

2013-03-18 10:19:43

Jquery datepicker à l'intérieur des onglets jquery

Répondre

Questions connexes