[英]jquery countdown in dynamically created html
i need a little help using the jquery countdown keith wood - jquery countdown plugin 我需要使用jQuery countdown keith wood的一些帮助-jQuery countdown插件
I am creating several countdowns by retrieving data from mysql database (php ajax call) and putting it into a div: 我正在通过从mysql数据库(php ajax调用)中检索数据并将其放入div中来创建多个倒计时:
in php (getdetails.php -> gets $mid and $time from mysql-database): 在php中(getdetails.php->从mysql数据库获取$ mid和$ time):
$mrow="TimeCounter inserted here:"
$mrow.="<div id=\"RowDiv\"><div id=\"timecount".$mid."\"><script> $('#timecount".$mid."').countdown({until: ".$time."}); </script></div></div>";
$mrow.="TimeCounter ends here";
in JS i set the innerHTML with the data i got: 在JS中,我用得到的数据设置了innerHTML:
var url="getDetails.php";
var what="getTimeData";
console.log("call getTimeData");
var p1 = $.post(url,{what:what,selId:selValue,conName:"GId"});
p1.done(function(data){
console.log("Data -> : "+ data);
document.getElementById("CounterDiv").innerHTML=data
});
console.log(data) shows me the set html: console.log(data)向我展示了设置的html:
<div id="RowDiv" ><div id="timecount2"><script> $('#timecount2').countdown({until: 1454713200}); </script></div></div>
I get no errors but i dont see the counter... I do see the surrounding TimeCounter inserted here: TimeCounter ends here on the page. 我没有收到任何错误,但是我没有看到计数器...我确实看到了周围的TimeCounter插入到这里:TimeCounter在页面上到此结束。 I suppose it is a client / server side issue. 我想这是客户端/服务器端的问题。 Maybe i need to call the function again after setting the innerHTML with the data. 设置数据的innerHTML之后,也许我需要再次调用该函数。 But i dont know how. 但是我不知道如何。
How can i solve this? 我该如何解决? Any ideas? 有任何想法吗?
Instead of adding an inline script within your HTML element, you can initiate the counter within your callback/success function of jQuery.post()
. 您可以在jQuery.post()
回调/成功函数中启动计数器,而不是在HTML元素中添加内联脚本。 In order to do this, you will have to change your PHP and JS like below: 为此,您将必须像下面那样更改您的PHP和JS:
PHP 的PHP
$mrow="TimeCounter inserted here:"
$mrow.="<div id=\"RowDiv\"><div id=\"timecount" . $mid . "\" data-time=\"" . $time . "\"></div></div>";
$mrow.="TimeCounter ends here";
JS JS
var url = "getDetails.php",
what = "getTimeData";
$.post(url, {what:what,selId:selValue,conName:"GId"}, function(data){
$('#CounterDiv').html(data).find('[id^="timecount"]').countdown({until: $(this).data('time')*1});
});
UPDATE: I don't know the plugin, but the scope of this
might get changed when .countdown()
is called. 更新:我不知道这个插件,但范围this
时候可能会改变.countdown()
被调用。 In such a case, you can use .each()
function of jQuery to pass the element. 在这种情况下,可以使用jQuery的.each()
函数来传递元素。 Here is how you do that: 这是您的操作方式:
$.post(url, {what:what,selId:selValue,conName:"GId"}, function(data){
var $counters = $('#CounterDiv').html(data).find('[id^="timecount"]'),
$el,t;
$counters.each(function(index,element){
$el = $(element);
t = $el.data('time')*1;
$el.countdown({until: t});
});
});
Haven't tested the code but the point of my suggestion would be to avoid sending HTML in response and make getdetails.php
respond with $mid
and $time
like: 还没有测试代码,但是我的建议是避免发送HTML作为响应,并使getdetails.php
使用$mid
和$time
进行响应,例如:
$data = array(
'mid' => $mid,
'time' => $time
);
$response = json_encode($data);
Your JS code should look something like: 您的JS代码应类似于:
var url = "getDetails.php";
var what = "getTimeData";
console.log("call getTimeData");
$.post(url, {what: what, selId: selValue, conName: "GId"}, function (data) {
console.log("Data -> : " + data);
var id = 'timecount' + data.mid;
var row = '<div id="RowDiv"><div id="' + id + '"></div</div>';
$("#CounterDiv").html(row);
$('#' + id).countdown({until: data.time});
}, 'json');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.