Search jQuery

jQuery Forum

Using jQuery UI

manuel.mo..

tabs and datepicker

in Using jQuery UI • 8 years ago

hello,

i'm using jquery to implements tabs and datepickers.

tabs are loaded via ajax:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//IT" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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({
load: function(event, ui) {
var $curr_panel=$(ui.newPanel);
$curr_panel.find(".datepicker").datepicker();
}
});
});
</script>
</head>
<body>
<fieldset><legend>Ricerche</legend>
<div id="tabs">
<ul>
<li><a href="tab1.php">Tab 1</a></li>
<li><a href="tab2.php">Tab 2</a></li>
<li><a href="tab3.php">Tab 3</a></li>
</ul>
</div>
</fieldset>
</body>
</html>

in each tab have datepicker defined

<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">
<tr>
<td>da <input type="text" name="data_da1" id="data_da1" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}"></td>
<td>da <input type="text" name="data_da2" id="data_da2" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}"></td>
<td>da <input type="text" name="data_da3" id="data_da3" class="datepicker" pattern="\d{1,2}/\d{1,2}/\d{4}"></td>
</tr>
<tr><td colspan="3"><input type="submit" value="Salva"></td></tr>
</table>
</form>
</fieldset>
</div>

when i load the tab i get the following error:

Uncaught TypeError: undefined is not a function

what i try to do is to make appear the datepiker ui jquery object when the user click on the input text.

i'm already using it on other pages with no tabs and it works perfectly. i have problem with tab pages.

can someone help me?

Replies(3)

kbwood.au

Re: tabs and datepicker

8 years ago

According to the documentation , the ui parameter to the load callback only has a panel property, not newPanel .

manuel.mo..

Re: Re: tabs and datepicker

8 years ago

ok thank you for the correction.

still when i change tab i get the error

Uncaught TypeError: undefined is not a function

on the following line of code

$curr_panel.find(".datepicker").datepicker();

any suggestion?

p.s. if i alert the value like $curr_panel.find(".datepicker").val(); it works fine. it has to be something with .datepicker();

EDIT2: after removing all the references to jquery library in all tabs the problem is solved on the first activation (no errors and datepicker is showed). unfortunately if i activate another tab and select it back i get no errors but the datepicker does not show anymore.

manuel.mo..

Re: tabs and datepicker

8 years ago

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

Top Reply

Response title

Attachments

jQuery Forum

tabs and datepicker

Replies(3)

Re: tabs and datepicker

Re: Re: tabs and datepicker

Re: tabs and datepicker

Statistics

Tags

Actions

Related Posts