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> 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
Archived
This topic is now archived and is closed to further replies.