使用.load插入页面片段时使用Jquery UI Datepicker
[英]Using Jquery UI Datepicker when using .load to insert page fragments
问题描述
I'm having trouble getting the jquery UI datepicker to initialize. 
我无法让jquery UI datepicker初始化。 I can initialize it just fine on a stand alone html file but when I use the jquery .load function to parse html to an existing container; 我可以在独立的html文件上初始化它，但是当我使用jquery .load函数将html解析到现有容器时，就可以初始化它了； the datepicker will not initialize. 日期选择器将不会初始化。 I'm using bootstrap v.3 and have tried a variety of jquery versions. 我正在使用bootstrap v.3，并尝试了各种jquery版本。
Here is my html (I have omitted the top part which is loaded from the index). 这是我的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>
Here is my html for the loaded page fragment 这是我的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>
The fragment is loaded with this javascript 该片段已加载此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();
Basically, the outer template of the page is rendered using a php kernel. 基本上，页面的外部模板是使用php内核呈现的。 Once the outer template is loaded, it loads the first page fragment (not shown). 加载外部模板后，它将加载第一页片段（未显示）。 Once the user clicks on the second nav option (addTrip) it uses .load to inject that fragment in to the main content div in the original markup. 用户单击第二个导航选项（addTrip）后，它将使用.load将片段插入原始标记中的主要内容div中。 Is this messing with the initialization? 这与初始化搞混了吗？
Sorry if this sounds like a duplicate question. 抱歉，这听起来像是重复的问题。 I did not find anything that adequately handled this case. 我没有找到任何可以适当处理此案的内容。
1 个解决方案
解决方案1
0 2014-06-06 02:57:27
when $( "#datepicker" ).datepicker(); 当$（“ #datepicker”）.datepicker（）;时 method is getting called there is no datepicker input in body hence datepicker is not initialized. 调用方法时，主体中没有输入日期选择器，因此未初始化日期选择器。 You can attach callback to load method to assign datepicker: 您可以将回调附加到load方法以分配datepicker：
.....
case 1:
// alert('You have selected Battle Tracker which is menu option #' + option);
$( "#mainContent" ).load( "modules/mainTracker.php #trackerInsert", function(){
$( "#datepicker" ).datepicker();
} );
break;
..........
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.