我想从数据库加载事件日历,返回值失去效果和日期不显示
I want to load event calendar from Database, The return value lose effect and date does not show
我的javascript:
////////////////////////////// Events Loading ///////////////
$('body').on('click', '#eventbnt', function(e){
e.preventDefault();
//var container = $('#loadmorefollowers');
// $(container).html('<img src="img/loader.gif">');
var newhtml = '';
//alert("yes")
$.ajax({
url: urllink,
type: 'post',
data: {'action': "events"},
cache: false,
success: function(json) {
alert(json)
newhtml =json;
$('#ei-events').append(newhtml);
},
error: function(xhr, desc, err) {
console.log(xhr + "'n" + err);
}
}); // end ajax call
});
HTML: <div id="ei-events">
<div class="ei-event" data-start="2016-12-28 16:30" data-end="2014-12-28 19:20" data-loc="Madrid">
<div class="ei-name">Lorem ipsum dolor</div>
<div class="ei-description">Lorem ipsum dolor sit amet, consect ratatattatttt dadaddd haha</div>
</div>
<div class="ei-event" data-start="2016-09-29 16:30" data-end="2014-12-24 16:30" data-loc="London">
<div class="ei-name">Lorem ipsum dolor</div>
<div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing haha.</div>
</div>
<div class="ei-event" data-start="2016-10-1 22:30" data-end="2014-12-29 16:30" data-loc="Berlin">
<div class="ei-name">Lorem ipsum dolor</div>
<div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
</div>
<div class="ei-event" data-start="2016-10-21 22:30" data-end="2014-12-29 16:30" data-loc="Berlin">
<div class="ei-name">Lorem ipsum dolor</div>
<div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
</div>
</div>
<a href="#" id="eventbnt"> Load More</a>
我的PHP:
$start = "2016-10-29 17:30";
$end = "2016-10-30 08:30";
if($action == "events"){
echo json_encode('<div class="ei-event" data-start="'.$start.'" data-end="'.$end.'" data-loc="London">
<div class="ei-name">Club opening</div>
<div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
</div>
<div class="ei-event" data-start="2016-10-22 17:30" data-end="2016-10-24 08:30" data-loc="Paris">
<div class="ei-name">IT conf</div>
<div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
</div>');
}
事件在html页面中一起加载时显示良好;但是如果我通过JavaScript从PHP调用它,它就不会显示日历效果,Date也不会显示。HTML上的两个事件显示得很好,但是当我点击"eventbnt"加载PHP时。该效果不起作用,日期将不会同时显示变量中的一个。
请问,有什么问题吗?它是javascript不解释变量$startdate
或PHP?
见附件,前两个事件加载默认HTML而最后两个加载时,我点击"加载更多"与"eventbnt"
修改PHP以返回一个合理的json数据结构,如下所示
if($action == "events"){
$htm = '<div class="ei-event" data-start="'.$start.'" data-end="'.$end.'" data-loc="London">
<div class="ei-name">Club opening</div>
<div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
</div>
<div class="ei-event" data-start="2016-10-22 17:30" data-end="2016-10-24 08:30" data-loc="Paris">
<div class="ei-name">IT conf</div>
<div class="ei-description">Lorem ipsum dolor sit amet, consectetur adipiscing.</div>
</div>';
echo json_encode(array('htm'=>$htm);
}
然后修改javascript
$('body').on('click', '#eventbnt', function(e){
e.preventDefault();
$.ajax({
url: urllink,
type: 'post',
data: {'action': "events"},
cache: false,
dateType: 'json',
success: function(json) {
alert(json.htm)
$('#ei-events').append(json.htm);
},
error: function(xhr, desc, err) {
console.log(xhr + "'n" + err);
}
});
});
相关文章:
- 比较从函数和生成的日期对象
- Json数据包含日期和时间格式
- Javascript日期格式类似于ISO,但本地
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- 如何在JavaScript中延长当前日期
- 两位数的月份日期验证
- 更改angularjs中的日期-时间格式
- 将日期时间作为 JSON 发送将无法在我的视图中正确显示
- 将日期时间从json转换为可读格式
- NodeJS日期格式不起作用
- jquerydatetimepicker日期和时间应在框默认值中,而无需单击框
- 使用当前日期生成随机id
- primefaces日历可以禁用过去的日期和时间吗
- Javascript游戏输入失去焦点
- 提前阅读日期
- 在JavaScript中拆分日期字符串的更好方法是什么
- 查找最短和最长日期
- 将日期和时间转换为UTC格式的日期-Javascript
- jquery日期选择器失去了交互性
- 我想从数据库加载事件日历,返回值失去效果和日期不显示