cypher86 Posted March 17, 2015 Share Posted March 17, 2015 hello, i'm facing this problem. i have a main page with the definition of tab. each tab is a different page called by ajax when selected. in some tabs i'd like to add datepickers but i'm having trouble. when i load the tab the datepicker does not work. do you have any suggestion or a better way to do this? thanks here's the code i'm using main.php <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" /> <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" /> <script> $(document).ready(function() { $( "#tabs" ).tabs({ }); }); </script> </head> <body> <?php include ("../top.php"); ?> <br /> <fieldset><legend>Ricerche</legend> <div id="tabs"> <ul> <li><a href="tab1.php">Tab1</a></li> <li><a href="tab2.php">Tab2</a></li> <li><a href="tab3.php">Tab3</a></li> </ul> </div> </fieldset> </body> </html> tab1.php <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> $(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']; } </script> <div id="termConsegna" name="termConsegna"> <fieldset><legend>Termini Consegna</legend> <form class="cmxform" name="form_termine" id="form_termine" method="post" action="tab1.php"> <input type="hidden" id="submit" name="submit" value="1"> <table id="tab_termine" class="css-table"> <?php $i=1; while($sql->fetch()){ echo "<tr> <td>da <input type=\"text\" name=\"data_da$i\" id=\"data_da$i\" class=\"datepicker\" pattern=\"\d{1,2}/\d{1,2}/\d{4}\" $dateValidation value=\"".dbDateToNormal($da)."\"></td> <td> a <input type=\"text\" name=\"data_a$i\" id=\"data_a$i\" class=\"datepicker\" pattern=\"\d{1,2}/\d{1,2}/\d{4}\" $dateValidation value=\"".dbDateToNormal($a)."\"></td> <td><input type=\"text\" name=\"data_termine$i\" id=\"data_termine$i\" class=\"datepicker\" pattern=\"\d{1,2}/\d{1,2}/\d{4}\" $dateValidation value=\"".dbDateToNormal($termine)."\"></td> </tr>"; $i++; } ?> <input type="hidden" name="num_termini" id="num_termini" value="<?php echo $i; ?>"> <tr><td colspan="3"><input type="submit" value="Salva"></td></tr> </table> </form> </fieldset> </div> tab2.php <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> $(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']; } </script> <div id="ricAvanz" name="ricAvanz"> <fieldset><legend>Ricerca Avanzata</legend> <form class="cmxform" id="form_ricerca" name="form_ricerca" action="ricerca.php" method="post"> <input type="hidden" id="ricerca" name="ricerca" value="1"> <p><label>Data1: </label>da:<input type="text" name="da_comparizione" id="da_comparizione" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['da_comparizione']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>><label> </label>a:<input type="text" name="a_comparizione" id="a_comparizione" value="<?php if(isset($_POST['ricerca'])) echo $_POST['a_comparizione']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php if(isset($_POST['ricerca'])) echo $dateValidation; ?>></p> <p><label>Data2: </label><input type="text" name="asta_si" id="asta_si" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['asta_si']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>></p> <p><label>Data3: </label><input type="text" name="asta_ci" id="asta_ci" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['asta_ci']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>></p> <p><label>Data4: </label><input type="text" name="sloggio_pa" id="sloggio_pa" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?> value="<?php if(isset($_POST['ricerca'])) echo $_POST['sloggio_pa']; ?>" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}" <?php echo $dateValidation; ?>></p> <p><input type="submit" value="Cerca"></p> </form> <fieldset> <?php echo $fieldset; while (isset($_POST['ricerca']) and $ricerca->fetch()) echo "<p><a href=\"../esecuzioni/panel_generale.php\">.......</a></p>"; ?> </fieldset> </div> Quote Link to comment https://forums.phpfreaks.com/topic/295309-jquery-problem-with-ajax-tab-and-datepicker/ Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.