Javascript hides jquery datepicker?
I have an iOS-like folder in my website in javascript. there's some html forms inside the folder (meaning that you can see the form only after you open the folder). Also, i'm trying to implement jquery datepicker inside the folder, but it doesn't work probably because of the the folder javascript code that hides the folder contents when the page loads. I'm not that proficient in javascript so I would be really gratefull if someone points me on how to modify the code for the datepicker to work.
here's the iOS-like folder js code :
$(function() {
$(".folderContent").hide();
//arrange the background image starting position for all the rows.
//This will allow the background image cut illusion when showing the folder content panel
$(".row").each(function() {
});
//when a folder is clicked,
//position the content folder after the clicked row
//and toggle all folder / app icon that is not the one clicked.
//and toggle the folder content panel
$(".folder").click(function(event) {
var folderContent = $(".folderContent");
folderContent.remove();
var folderContentShown = folderContent.css("display") != "none";
var clickedFolder = $(this);
clickedFolder.parent(".row").after(folderContent);
folderContent.find(".folderName").html( );
$("body").find(".folder, .app").not(clickedFolder).each(function() {
if (!folderContentShown) $(this).animate({
opacity: 0.00
}, "slow");
else $(this).animate({
opacity: 1.00
}, "slow");
});
//clickedFolder.animate({opacity: folderContentShown ? 1.00 : 0.70}, "slow");
folderContent.slideToggle("slow");
event.preventDefault();
});
});
and here's the datepicker code
<script type="text/javascript">
$(function(){
$.datepicker.setDefaults(
$.extend($.datepicker.regional["ru"])
);
$("#datepicker").datepicker();
});
</script>
If i remove the iOS-like js code - the datepicker works fine, so it's definitely a problem with the iOS-like code.
Thanks in advance.
UPDATE:
the last file included in html (slide.js) is the code that is at the top of the post. full开发者_运维知识库 html code :
<html>
<head>
<link href="slide.css" type="text/css" rel="stylesheet" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.csss" rel="stylesheet" />
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="js/i18n/jquery-ui-i18n.js" type="text/javascript"></script>
<script type="text/javascript" src="slide.js"></script>
</head>
<body>
<table class='buttons_table'>
<tr><td>
<div class='row2'>
<div class='folder2'><span class='button gray medium'>xxxx</span></div>
</div>
</td></tr>
</table>
<div class='folder2Content'><span class='folder2Name'>
<form action='xxx.php' method='post'>
<table class='input_text'>
<tr>
<td>date : </td>
<td>
<script type="text/javascript">
$(function(){
$.datepicker.setDefaults(
$.extend($.datepicker.regional["ru"])
);
$("#datepicker").datepicker();
});
</script>
<input id="datepicker" type="text" name="year" />
</td>
</tr></div></span></table>
The reason why when you hide the area, datepicker no longer works is because you no only hide it, but actually remove it from the DOM tree. even though you later add it back in, all the attached events and data are lost in the process. Fortunately jQuery can actually accommodate this with the .detach() function. So, instead of using .remove(), you can use .detach() instead to retain the attached events and data.
folderContent.detach();
See it in action: http://jsfiddle.net/william/qfXKb/21/.
加载中,请稍侯......
精彩评论