如何在动态创建的jQuery UI对话框中使用datepicker？
[英]How to use datepicker in dynamically created jQuery UI dialog?
问题描述
I have trouble to active the datepicker() in a dynamically created jQuery UI dialog(): 
我很难在动态创建的jQuery UI dialog（）中激活datepicker（）：
index.html 的index.html
$(document).ready(function() {
var $loading = $('<img src="./images/loading.gif" alt="loading">');
$('.page-popup').each(function() {
var $dialog = $('<div></div>')
.append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href'))
.dialog({
title: $link.attr('title'),
width: 600,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
$( ".datepicker" ).datepicker({
dateFormat: "yy-mm-dd"
});
});
The external page which gets loaded by a link like that: 通过这样的链接加载的外部页面：
<a href="input.html" title="Input" class="page-popup">Input</a>
it has just a form to select or correct the date: 它只有一个表格可以选择或更正日期：
input.html input.html
<form method="post" action="?">
<input type="text" name="date" value="2000-01-01" class="datepicker">
<input type="submit">
</form>
How can I activate the datepicker for the different dialogs? 如何激活不同对话框的日期选择器？
2 个解决方案
解决方案1
0 2015-06-01 06:40:35
Render the datepicker in the open event of the dialog as follows. 如下所示在对话框的open事件中渲染日期选择器。
$dialog
.load($link.attr('href'))
.dialog({
title: $link.attr('title'),
width: 600,
height: 300,
open: function(){
$( ".datepicker" ).datepicker({
dateFormat: "yy-mm-dd"
});
}
});
解决方案2
0 已采纳 2015-06-01 20:40:38
The problem was that the subpage can not reload jquery.js and jquery-ui.js. 问题在于该子页面无法重新加载jquery.js和jquery-ui.js。 So here my solution: 所以这是我的解决方案：
index.html 的index.html
<html>
<head>
<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $loading = $('<img src="./images/loading.gif" alt="loading">');
$('.page-popup').each(function() {
var $dialog = $('<div></div>').append($loading.clone());
var $link = $(this).one('click', function() {
$dialog
.load($link.attr('href'))
.dialog({
title: $link.attr('title'),
width: 600,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
return false;
});
});
$( ".datepicker" ).datepicker({
dateFormat: "yy-mm-dd"
});
});
</script>
</head>
<body>
<a href="input.html" title="Input" class="page-popup">Input</a>
</body>
</html>
input.html input.html
<html>
<head>
<!-- Don't load jquery and jquery-ui again!!! -->
<script type="text/javascript">
$( ".datepicker" ).datepicker({
dateFormat: "yy-mm-dd"
});
</script>
</head>
<body>
<form method="post" action="?">
<input type="text" name="date" value="2000-01-01" class="datepicker">
<input type="submit">
</form>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.