Cristi Gradinaru asked 9 years ago
Hi,
I have some difficulties in creating a calculated column where I should insert a div and then execute a javascript in order to build a countdown timer.
So, column [rezervation_date] contains the date and time when an item is reserved and is defined as follows:
$col = array();
$col["title"] = "Data rezervare";
$col["name"] = "rezervation_date";
$col["width"] = "25";
$col["align"] = "center";
$col["editable"] = true;
$col["editoptions"] = array("size"=>20);
$col["editrules"] = array("required"=>false, "readonly"=>true);
$col["editoptions"] = array("size"=>20, "value"=>date('Y-m-d H:i:s'));
$col["search"] = false;
$cols[] = $col;
Column [rezervation_exp_date] contains the date and time when the item reservation expires – 12 hours after the reservation is submitted – and is defined as follows:
$col = array();
$col["title"] = "Expirare rezervare";
$col["name"] = "rezervation_exp_date";
$col["hidden"] = false;
$col["align"] = "center";
$col["width"] = "25";
$col["editable"] = true;
$col["editrules"] = array("required"=>false, "readonly"=>true);
$col["editoptions"] = array("size"=>25, "value"=>date('Y-m-d H:i:s', strtotime(date('Y-m-d H:i:s'))+43200));
$col["search"] = false;
$cols[] = $col;
All I need is a column where I should calculate the difference between the time when the reservation expires – column [rezervation_exp_date] – and the time when the table is generated and listed. The bellow example does not work…
$col = array();
$col["title"] = "Timer rezervare";
$col["name"] = "timer";
$col["hidden"] = false;
$col["align"] = "center";
$col["width"] = "20";
$col["editable"] = true;
$col["editrules"] = array("required"=>false, "readonly"=>true);
$col["condition"] = array('$row["rezervation_exp_date"] == "0000-00-00 00:00:00"', "Nerezervat", "<div class='timer' data-seconds-left=".(strtotime($row["rezervation_exp_date"])-strtotime(date('Y-m-d H:i:s')))."></div>");
$col["show"] = array("list"=>true,"edit"=>false,"add"=>false);
$col["search"] = false;
$cols[] = $col;
In HTML, before </head> tag:
<script src="js/jquery.simple.timer.js"></script>
<script>
$(function(){
$('.timer').startTimer({
});
})
</script>
Ex: I'm trying to use this simple timer http://csouza.me/jQuery-Simple-Timer/
In the database, in the column [timer] i'm getting something like:
<div class="timer" data-seconds-left="-1448208116"></div>
but the timer is not displayed…
Any ideas?
Abu Ghufran answered 9 years ago
Perhaps, You need to put the timer JS code in AfterShowForm event of grid dialog. As before that the element does not exist.
$opt["add_options"]["afterShowForm"] = 'function () {………}';
$opt["edit_options"]["afterShowForm"] = 'function () {………}';
This event is called when dialog of add/edit is opened.
Cristi Gradinaru answered 9 years ago
It doesn't seem to be working… or I'm not doing something right.
I need the counter to show in the grid after the inline editing is done and the save icon is clicked.
Abu Ghufran answered 9 years ago
For inline edit, you need to connect JS code with dataInit event.
$col["editoptions"]["dataInit"] = "function(){ setTimeout(function(){ link_counter('{$col["name"]}'); },200); }";
<script>
function link_counter(id)
{ … }
</script>
