Develop Reference

Handlebars countdown with data from ajax call

I've been looking for the way to solve this problem but I couldn't find any.
I have a list of scheduled tasks, I get some data from each one, doing an AJAX call and display it throught handlebars:
function getScheduledTasks(URL_address){
$.ajax({
url: URL_address,
success: function(data){
var source = $("#scheduled-task").html();
var template = Handlebars.compile(source);
$('.scheduledBody').append(template(data));
},
error: function(data) {
console.log('error', data);
}
});
}
HTML:
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Next Execution</th>
</tr>
</thead>
<tbody class= "scheduledBody">
<script id="scheduled-task" type="text/x-handlebars-template">
{{#each schedules}}
<tr>
<th>{{name}}</th>
<td>{{type}}</td>
<td data-countdown="{{timeSs}}"></td>
</tr>
{{/each}}
</script>
</tbody>
</table>
The thing is, I have the time in milliseconds in timeSs, I would like to process it with some javascript function and get the countdown working in the same "script tag".
I've seen that exist some jquery function that makes this easy, but I have the library blocked in my work network.
I would appreciate any help.
Thanks.

Change td value on dynamic div content

I have created dynamic table inside div.
<div id="data"></div>
Script to load data
<script>
$.ajax({
url:"<?php echo base_url().'input_real/getDetReal';?>",
cache:false,
type:"POST",
data:{id:id},
success:function(msg){
$("#data").html(msg);
}
});
Content HTML:
<table id="datatable2" class="table table-bordered" style="width: 100%">
<thead >
<tr>
<th>#</th>
<th>Code</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td id="dt1"></td>
</tr>
<tr>
<td></td>
<td></td>
<td id="dt2"></td>
</tr>
</tbody>
</table>
How to change value of td with id=dt1
I try
$("#dt1").html("New data"); //not work
$("#dt1").text("New data"); //not work
$("#data #dt1").html("New data"); // not work

Since you said that:- I have created dynamic table inside div
So you need to do like below:-
$('#data').find('#dt1').html("New data");
i.e. - reference dynamically created element with it's imidiate static parent (find by traversing up-side).
Note:- Multiple same id for different elements are incorrect, when you are trying to use those id in jQuery. Use class instead of id for this purpose.

You have to put your $("#dt1").html("New data"); code into success function like that :
$.ajax({
url:"<?php echo base_url().'input_real/getDetReal';?>",
cache:false,
type:"POST",
data:{id:id},
success:function(msg){
$("#data").html(msg);
$("#dt1").html("New data");
}
});

Data table initialize after table body replace (ajax)

I have a datatable it have a search box (date range filter) once i click the search button table body replace according to the filter(ajax).
my problem is i cant initialize table after ajax success.
HTML
<table data-page-length="20" id="occupancy" class="ui small celled table segment display" cellspacing="0"
width="100%">
<thead>
<tr>
<th>Date</th>
<th>Arrivals</th>
<th>Departures</th>
<th>Occupied</th>
<th>Available</th>
<th>Occupancy</th>
</tr>
</thead>
<tbody id="occupancyBody">
</tbody>
</table>
Ajax
type: 'POST',
url: "../system/user/modules/" + MODULE_NAME + "/controller.php",
data: "action=filterOc&" + url_data,
success: function (resultData) {
$('#occupancyBody').html(resultData);
$('#occupancy').dataTable();
}
});
sample screenshot

You can use below mentioned code to reinitialize table after ajax call.
While defining datatable, you can store in a variable.
var myTable = $('#occupancy').DataTable({ // all your configuration });
Now after ajax call you can call below line.
myTable.ajax.reload();
also remove this line in ajax:success function.
$('#occupancy').dataTable();
Let me know if it not works.

Please check here
$(document).ready(function(){
var table = $('#occupancy').dataTable();
$.ajax({
type: 'POST',
url: "../system/user/modules/controller.php",
data: "action=filterOc&",
success: function (resultData) {
$('#occupancyBody').html(resultData);
table.ajax.reload();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/dataTables.bootstrap.css" rel="stylesheet"/>
<table data-page-length="20" id="occupancy" class="ui small celled table segment display" cellspacing="0"
width="100%">
<thead>
<tr>
<th>Date</th>
<th>Arrivals</th>
<th>Departures</th>
<th>Occupied</th>
<th>Available</th>
<th>Occupancy</th>
</tr>
</thead>
<tbody id="occupancyBody">
</tbody>
</table>

The ajax.reload() API function should only work if you included the ajax option in Datatable's initialization (see here).
In this case, I'd recommend to add destroy:true to the initialization of Datatables, something like this:
$('#occupancy').DataTable({ destroy:true})
This would allow you to re-create the table every time the ajax call is successful.

hi i guess you selected wrong body id :
$('#occupancyBody').html(resultData);
but in your html :
<tbody id="dailyAct">
hope it's help,

Use link found in the a tag to make an AJAX request on click

I have a table with dynamic values example below. I want to use the url in my dynamic url in my a tag with AJAX request base on what ID the user clicks on. When user clicks on ID 1 in the table below I want to pass the url in that a tag to my script in the AJAX url section. I would be thankful for any help
<table >
<thead>
<th data-field="status">ID</th>
<th data-field="actions">action</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a id="test" href="test.php?id=1" >1</a></td>
</tr>
<tr>
<td>2</td>
<td><a id="test" href="test.php?id=2" >2</a></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$("#test").click(function(){
$.ajax({url: "", success: function(result){
$("#div1").html(result);
}});
});
});
</script>

NOTE: You shouldn't use the same id for multiple elements on the same page. I changed your ID to use class instead
I also added a preventDefault() to prevent the link from doing its normal job (unless you want to in which case remove that line)
$(document).ready(function(){
$(".test").click(function(e){
theURL = $(this).attr('href');
console.log(theURL); // can be removed just included for testing
e.preventDefault();
$.ajax({url: theURL, success: function(result){
$("#div1").html(result);
}});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<thead>
<th data-field="status">ID</th>
<th data-field="actions">action</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a class="test" href="test.php?id=1" >1</a></td>
</tr>
<tr>
<td>2</td>
<td><a class="test" href="test.php?id=2" >2</a></td>
</tr>
</tbody>
</table>

change ID to class - IDs need to be unique <a class="test" href="test.php?id=1">...
prevent the link from being followed
use load - it is simpler
Like this
$(function(){
$(".test").click(function(e){
e.preventDefault();
$("#div1").load(this.href); // or if you insist: $.ajax({url: this.href,...
});
});
PS: If the links are inserted by script, you need to delegate - here I assume the table had an ID and exists at page load
$("#tableId").on("click",".test",function(e){

How do I use data returned from PHP to build out an HTML table?

I have a php file that is reaching out and touching a mongo db and building a bunch of table tags. When I replace the script tag code below with the php code it works fine and builds out the table.
When I try to get the php results from the called page I manage to get the table text into the data variable ... if I alert it I see all the table tags and data that is generated from my .php page ... but I'm not sure how to embed that code inline in the HTML right after the th tags ... if I do a document.write(data) inside the script it seems to overwrite the whole page with just the data that was generated from the .php page ... it doesn't append it after the th row. Thank you in advance for any advice.
<table class="table table-striped table-hover">
<tr>
<th>Agency</th>
<th>POC</th>
<th>POC Phone</th>
<th>Address</th>
</tr>
<script>
var data_from_ajax;
$.get('build-agency-table.php', function(data) {
data_from_ajax = data;
alert(data);
});
</script>
</table>
And this is returned by the php script
<tr><td>BACODA</td><td>Kristi Smith</td><td>211.444.2222</td>

I think the script tag belong outside of the table.
And using the tbody thead will help you to differentiate the static (heading) and dynamic (from ajax) content.
<table>
<thead>
<tr>
<th>Agency</th>
<th>POC</th>
<th>POC Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody id="to_fill">
</tbody>
</table>
<script>
var data_from_ajax;
$.get('build-agency-table.php', function(data) {
data_from_ajax = data;
$("#to_fill").html(data_from_ajax);
});
</script>

Try this
<table class="table table-striped table-hover">
<tr>
<th>Agency</th>
<th>POC</th>
<th>POC Phone</th>
<th>Address</th>
</tr>
<tbody id="tablebody"></tbody>
<script>
var data_from_ajax;
$.get('build-agency-table.php', function(data) {
data_from_ajax = data;
$('#tablebody').html(data);
alert(data);
});
</script>
</table>

You need to add the html content to a container using javascript.
<table>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
<tr id="myRow"></tr>
</table>
<script>
$.get('build-agency-table.php', function(data) {
$("#myRow").html(data); //Add the html content into "myRow"
});
</script>