这段时间由于帮公司做套餐打包项目,在做到时间价格表的时候出现一个问题:使用fullCalendar日历插件的时候出现点击进入时间价格表页面第一次日历插件和规则页面全部能加载出来,但是第二次加载的时候却只能加载下面规则的页面.
下面贴出代码:
1.日历插件页面.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="/tnt_back/css/jquery-ui-1.8.1.custom.css">
<link rel="stylesheet" href="/tnt_back/js/formValidator/css/validationEngine.jquery.css" type="text/css" media="screen" charset="utf-8" />
<!-- FullCalender -->
<link rel='stylesheet' type='text/css' href='/tnt_back/js/fullcal/css/fullcalendar.css' />
<link rel="stylesheet" href="/tnt_back/css/hotelcalender.css?20151105" type="text/css"/>
<!-- Jquery and Jquery UI -->
<script type="text/javascript" src="/tnt_back/js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="/tnt_back/js/jquery-ui-timepicker-addon.js"></script>
<!-- Jquery and Jquery UI -->
<script src="/tnt_back/js/formValidator/js/jquery.validationEngine.js" type="text/javascript"></script>
<script src="/tnt_back/js/formValidator/js/jquery.validationEngine-en.js" type="text/javascript"></script>
<script type='text/javascript' src='/tnt_back/js/fullcal/fullcalendar.js?20151015'></script>
</head>
<body>
<script type="text/javascript">
$(function(){
$('#myCalendar').fullCalendar({
header: {
right: 'next today',
center: 'title',
left: 'prev'
},
aspectRatio:4,
theme: true,
editable: true,
allDaySlot: false,
timeFormat: 'HH:mm{ - HH:mm}',
viewDisplay: function (view) {//动态把数据查出,按照月份动态查询
var url = "/tnt_price/timePrice/route/queryGoodsTimePriceList.do";
var specDate = $.fullCalendar.formatDate(view.start, "yyyy-MM-dd");
$("#myCalendar").fullCalendar('removeEvents'); //清空上次加载的日志.
$("#fullmonthprojects").empty();
$.post(url, {unitId:"${unitId}",distId:"${userId}",packType:"${packType}",specDate:specDate,productId:"${productId}",categoryId:"${categoryId}"},function (data) {
for(var i=0;i<data.length;i++) {
............
$td.find("div.fill_data").html("<ul>"+liArray.join('')+"</ul>").css({'height':'auto'});
}
}); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
}
});
setTimeout(
function () {
var selectdate = new Date();
$('#myCalendar').fullCalendar('gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate());
}, 100
);
});
</script>
<div id="myCalendar" class="time_price">
</div>
</body>
</html>
2.进入时间价格表链接的代码:
$(function(){
$(".showAutoTimePrice").live("click",function(){
$time_price_dlg = null;
var param = $(this).attr("param");
if ($(this).attr("tt") != 'DIST_PROD_PRODUCT') {
alert("您访问的时间价格表类型错误.");
return false;
}
current_time_price_param = eval("(" + param + ")");
var distId = current_time_price_param.distId;
var channelId = current_time_price_param.channelId;
var packageId = current_time_price_param.saleUnitId;
var packageType = current_time_price_param.packageType;
var combineType = current_time_price_param.combineType;
var packType = current_time_price_param.packType;
var categoryId = current_time_price_param.categoryId;
var time_price_param = {'distId':distId,'unitId':packageId,'packType':packType,'categoryId':categoryId};
if ($time_price_dlg == null) {
$time_price_dlg = $("<div style='display:none' class='time_price_dlg_div'>");
$time_price_dlg.appendTo($("body"));
}
//进入时间价格页面.
$time_price_dlg.load(get_time_price_base_url(), current_time_price_param, function() { $time_price_dlg.dialog( { title : "时间价格表", width : 1000, modal : true, content:$time_price_dlg }); });
});
});
测试的时候两天的都没有找到原因,后来一步步分析过程,当时想的时候可能是js的问题,经过排查排除这一可能性,后来又推测可能是加载dialog的时候出现的问题(以上为原始的做法),后来换了个加载dialog的方式,如下:
timePriceDialog = new xDialog("/tnt_price/timePrice/route/queryDistRouteTimePrice.do",time_price_param,{
width:1000,
//height:1000,
title:"自动打包时间价格表"
});
经过测试可行,据我推测可能是load的加载方式导致..