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.
Related
I need to write a compatible algorithm for this code, but I can't. How can I send data to backend?
I am using bootstable.js for table
HTML table:
<table class="table table-bordered" id="table-list">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Slug</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{% for chart in charts %}
<tr>
<th id="id">{{chart.id}}</th>
<td class="editable" id="name">{{chart.name}}</td>
<td class="editable" id="slug">{{chart.slug}}</td>
<td>john#example.com</td>
</tr>
{% empty %}
<p>No data</p>
{% endfor %}
</tbody>
</table>
And this is my JavaScript code. I tried to try some methods myself but it didn't work
<script src="{% static 'npe_cp/js/bootstable.js' %}"></script>
<script>
//apply
$("#table-list").SetEditable();
$('#addRow').click(function() {
rowAddNew('table-list');
});
$('#bAcep').on('click', function(){
// var id=$("#id").val();
// var name=$("#name-44").val();
// var slug=$("#slug-44").val();
let name=document.querySelector('#name')
console.log(id, name, slug, 'Hello World')
$.ajax({
url:"/chart/edit",
type:"POST",
data:{
"id":id,
"name":name,
"slug":slug,
},
})
});
This is exactly what the table looks like. I want to update, create, and delete operations. But I am not getting the data.
Use Django Forms to populate the database, makes it easy to perform CRUD operations
I've a separate javascript code which is fetching data from api and inserting in browsers localStorage.
API is fetching ETA data and saving in localStorage as id_ETA(e.g 12342_ETA) key.
When the values in local storage gets updated then my html table ETA column values should also get updated without refreshing the page.
Right now I need to refresh the entire page in order to view the updated ETA in the html.
HTML Table:
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
<script>
var data = getPlanData();
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
for(var i=0;i<data.length;i++){
document.write("<tr>");
document.write("<td>"+data[i]['id']+"</td>");
document.write("<td>"+data[i]['arrival']+"</td>");
document.write("<td>"+data[i]['departure']+"</td>");
document.write("<td>"+data[i]['arrival']+"</td>");
if (localStorage.getItem(data[i]['id']+'_ETA'))
{
document.write("<td>"+localStorage.getItem(data[i]['id']+'_ETA')+"</td>");
}
else
{
document.write("<td>-</td>");
}
document.write("</tr>");
</script>
</tbody>
</table>
</div>
getPlanData():
function getPlanData() {
localData = localStorage.getItem('plan');
result = csvToJSON(localData);
return result;
}
Note: ETA is coming from separate API
Is there a way to update the ETA column when there is new ETA value in localStorage without refreshing the page?
Assuming getPlanData() does the writing to localStorage, you need to do two things
Don't use document.write, certainly not after load since it wipes the page
save to localStorage in getPlanData() AND
call this update with the data in the getPlanData function - this script can be copied to the head of the document inside script tags and called as update(data)
const update = data => {
const html = data.map(item => (
`<tr>
<td>${item.id}</td>
<td>${item.arrival}</td>
<td>${item.departure}</td>
<td>${item.arrival}</td>
<td>${localStorage.getItem(item.id+"_ETA") || "-"}</td>
</tr>`));
document.querySelector(".table tbody").innerHTML=html.join("")
}
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
If you post an example of your data, I am sure we can find a better way to get the ETA than localStorage.getItem(item.id+"_ETA")
UPDATE: You CAN do
var data = getPlanData();
update(data)
html
<tbody id="tBody"></tbody>
<tfoot>
<tr>
<th class="text-center" colspan="9">Grand Total Payment Price</th>
<th id="grand_total"></th>
</tr>
</tfoot>
ajax
success:function(res){
var bodyData = '';
var i=1;
var=grandTotal=0;
$.each(res,function(index,row){
bodyData+='<tr id="row_'+rowCount+'" >'
.......
+'<td id="sum_'+row.id+'">'+row.discount_price_on_web+"</td><td>"
...
bodyData+="</tr>";
}
$("#tBody").append(bodyData);
my question is all the list working fine, but how can i sum the "list discount_price_on_web" and save in html id="grand_total"?
i try this after bodyData+=""
$("[id*=sum]").each(function(){
grandTotal=grandTotal+parseFloat($(this).html());
});
$("[id*=grand_total]").html(grandTotal.toString());
Not Working !!
any help
as per jQuery you need to use # for ID
$("#grand_total").html(grandTotal);
should be code
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>
I'm trying to post on ajax from a ajax get.
Here is my code below that I'm using:
$(window).load(function() {
$.ajax({
url: "/masterScreen/ajaxdealerpaid/{{$id}}",
type: "GET",
data: {},
success: function(data) {
document.getElementById("dealerPaid").innerHTML=data;
}
});
});
And then i'm trying:
$(".pay").click(function(){
alert('Order #'+id+' has been marked as paid for '+amountPaid+'');
var id = $(this).attr('data-id');
var amountPaid = $("#payAmount_"+id).val()
$.ajax({
url: "/masterScreen/dealermarkpaid/"+id+"/"+amountPaid,
type: "POST",
data: {},
success: function(data) {
alert('Order #'+id+' has been marked as paid for '+amountPaid+'');
location.reload();
}
});
});
My HTML is...
<table style="width: auto;" class="table table-striped table-condensed" border="0" cellspacing="0" cellpadding="0">
<thead class="navbar-static-top" style="display:block; margin:0px; cell-spacing:0px; left:0px;">
<tr>
<th class="span2">Quote ID</th>
<th class="span4">Customer name</th>
<th class="span4">Connection date</th>
<th class="span4">BDM</th>
<th class="span4">Owed</th>
<th class="span4">Amount</th>
<th class="span2"></th>
</tr>
</thead>
<tbody id="dealerUnpaid" style="display:block; overflow:auto; max-height:400px;">
</tbody>
<tfoot id="dealerUnpaidtot" class="navbar-static-top" style="display:block; margin:0px; cell-spacing:0px; left:0px; font-weight: bold;">
</tfoot>
</table>
It displays the data from the first javascript, but I also have this code from the view it's GET from...
<td class="span4"><input type="text" placeholder="Enter Amount" class="payAmount" data=name="amount" data-id="{{$unpaid->id}}" id="payAmount_{{$unpaid->id}}"></td>
<td class="span2"><input type="button" class="btn pay" value="Pay" data-id="{{$unpaid->id}}"></td>
When I press the Pay button it doesn't do anything :/
Any help to make this work would be nice please.
Thanks guys
If I understand correctly, you're loading your markup (including the .pay element) using AJAX and then attempting to bind something to the .pay element's click event. Since the .pay element doesn't exist in the page at the time you're doing the binding, the binding isn't working. Change your binding from:
$('.pay').click(function(){
to
$(window).on('click', '.pay', function(){
That will attach the binding to the window, which has the effect of working even on elements that are added after the window is loaded.
$(".pay").click(function(){...
Works only on already create elements with class pay, it doesnt work on newly created elements by ajax call.
You can use delegate function to handle newly created elements
$("body").delegate(".pay","click",function(event){
event.preventDefault(); // prevent default handlings
alert("Test");
//do other code...
});