在使用.load插入页面片段时使用Jquery UI Datepicker
Using Jquery UI Datepicker when using .load to insert page fragments
我在初始化jquery UI datepicker时遇到了麻烦。我可以在单独的html文件中初始化它但当我使用jquery .load函数将html解析到现有容器时;日期选择器将不会初始化。我正在使用bootstrap v.3,并尝试了各种jquery版本。
这是我的html(我省略了顶部的部分是从索引加载的)。
<link href="css/customApp.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">TheWarOnCost.com</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Settings</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li id="dashNav1" class="active"><a onclick="dashNav(1);">The War Room</a></li>
<li id="dashNav2"><a onclick="dashNav(2);">Record New Battle</a></li>
<li id="dashNav3"><a onclick="dashNav(3);">Remove Battle</a></li>
</ul>
<ul class="nav nav-sidebar">
<li id="dashNav4"><a onclick="dashNav(4);">Goal Tracker</a></li>
<li id="dashNav5"><a onclick="dashNav(5);">Year to Date Report</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div id="mainContent">
<!-- Main content inserted here on nav click -->
</div>
</div>
</div>
</div>
这是我加载的页面片段的html
<div id="addTripInsert">
<h1 class="page-header">New Battle Stats</h1>
<div class="row placeholders">
<div id="clearFix"> </div>
<div class="col-xs-12 col-sm-12 placeholder aTiC_Wrap" style="xbackground-color:rgba(0,0,255,.4); height:100px;">
<div class="col-xs-12 col-sm-12 addTripInputs" style="background-color: rgba(66, 139, 202, .3); border-radius:10px; height:75px;">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" class="svgNum">
<circle id="svg_1" r="16.93171" cy="20" cx="20" stroke-width="2" stroke="#428bca" fill="#ffffff"/>
<text font-weight="bold" xml:space="preserve" text-anchor="middle" font-family="Sans-serif" font-size="29" id="svg_2" y="31" x="20" stroke-linecap="null" stroke-linejoin="null" stroke-width="0" stroke="#428bca" fill="#ef3bff">1</text>
</svg>
<h4 class="aTi_Title" style="width:117px;">Trip Date</h4>
<div class="col-xs-12 col-sm-7 aTi_content">The date this battle was waged.</div>
<div class="col-xs-12 col-sm-5 aTi_content"><input id="datepicker"></div>
</div>
这个片段是用这个javascript
加载的function dashNav(option){
$("li").click( function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
switch(option)
{
case 1:
// alert('You have selected Battle Tracker which is menu option #' + option);
$( "#mainContent" ).load( "modules/mainTracker.php #trackerInsert" );
break;
case 2:
// alert('You have selected Add shopping trip which is menu option #' + option);
$( "#mainContent" ).load( "modules/addTrip.php #addTripInsert" );
break;
case 3:
// alert('You have selected Remove shopping trip which is menu option #' + option);
$( "#mainContent" ).load( "modules/removeTrip.php #remTripInsert" );
break;
case 4:
// alert('You have selected Goal Tracker which is menu option #' + option);
$( "#mainContent" ).load( "modules/goalTracker.php #goalTrackerInsert" );
break;
case 5:
// alert('You have selected Year to date savings which is menu option #' + option);
$( "#mainContent" ).load( "modules/ytdSavings.php #ytdsInsert" );
break;
default:
}
}
$( "#datepicker" ).datepicker();
基本上,页面的外部模板是使用php内核呈现的。一旦外部模板被加载,它将加载第一个页面片段(未显示)。一旦用户单击第二个导航选项(addTrip),它就会使用.load将该片段注入到原始标记的主内容div中。这会干扰初始化吗?抱歉,如果这听起来像一个重复的问题。我没有找到任何能充分处理这个案子的东西。
when $("#datepicker").datepicker();方法正在被调用,在主体中没有数据拾取器输入,因此数据拾取器没有初始化。您可以将回调附加到load方法以分配日期选择器:
.....
case 1:
// alert('You have selected Battle Tracker which is menu option #' + option);
$( "#mainContent" ).load( "modules/mainTracker.php #trackerInsert", function(){
$( "#datepicker" ).datepicker();
} );
break;
..........
相关文章:
- jQuery Datepicker可以在Safari中工作,但不能在FF或Chrome中工作
- jQuery Datepicker从日期开始设置默认值
- jQuery DatePicker:多个输入出现错误
- jQuery Datepicker onSelect event get class
- 添加jquery Datepicker后,文本框的初始值不会显示
- 存在事件的单元格的jQuery DatePicker背景色(加载时)
- ASPX页面上的jQuery Datepicker()
- jQuery Datepicker BeforeShowDay 第二个参数
- Jquery Datepicker日期格式在Asp.net中不起作用
- Qinit触发器函数在JQuery DatePicker上不起作用
- 具有多个ID的jQuery DatePicker
- jquery datePicker beforeShowDay不适用于2014年
- jQuery DatePicker on Focus
- jquery datepicker datepicker beforeShowDay明年不工作
- jQuery DatePicker在初始化后不会在ShowDay之前呈现
- 为什么当我使用JQuery DatePicker时,Google Code Prettifier停止工作(反之亦然)
- 在 SQL 查询中使用 Jquery DatePicker 输出
- jquery datepicker Uncatch TypeError: Object [object Object]
- jQuery Datepicker onChange 事件不起作用
- jQuery Datepicker,事件 AFTER select,而不是 “onSelect”