如何在動態創建的jQuery UI對話框中使用datepicker？
[英]How to use datepicker in dynamically created jQuery UI dialog?
問題描述
我很難在動態創建的jQuery UI dialog（）中激活datepicker（）：
的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"
});
});
通過這樣的鏈接加載的外部頁面：
<a href="input.html" title="Input" class="page-popup">Input</a>
它只有一個表格可以選擇或更正日期：
input.html
<form method="post" action="?">
<input type="text" name="date" value="2000-01-01" class="datepicker">
<input type="submit">
</form>
如何激活不同對話框的日期選擇器？
2 個解決方案
解決方案1
0 2015-06-01 06:40:35
如下所示在對話框的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
問題在於該子頁面無法重新加載jquery.js和jquery-ui.js。 所以這是我的解決方案：
的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
<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>
jQuery 2.2.0升級后動態創建的jQuery UI對話框錯誤
[英]Dynamically created jQuery UI dialog error after jQuery 2.2.0 upgrade
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.