$(document).on("click","tr",function(){
var projectId = $(this).attr("data-projectId");
$(this).nextAll("tr:eq(0)").toggle(500);
$(this).nextAll("tr:eq(1)").toggle(500);
});
$("#debtor-customer-filter").on('submit', function(e) {
e.preventDefault();
var data = new FormData(this);
$("#debtors-table").DataTable().destroy();
$("#debtors-list").load("debtor/filterCustomerDebtorById", {
debtorFilter: $("#customer-filter").val(), // This set's the status to fetch all records
fromDate: $("#from-date").val(),
toDate: $("#to-date").val(),
cid: $("#customer-id").val()
}, function (response,status,xhr) {
$("#debtors-table").DataTable();
fetchDebtors(response);
});
});
function fetchDebtors(response) {
$(this).html(response);
}
<div class="form-row">
<div class="container">
<label class="ants-label-light" >Club Emblem</label>
</div>
<div class="input-group mb-6 container justify-content-center">
<div class="row">
<div class="col-6">
<form action="/uploads" method="post" enctype="multipart/form-data">
<label class="btn btn-ants">
<i class="fa fa-image"></i> Upload Club Emblem
<input type="file" style="display: none;" name="club_emblem" id="imgInp">
</label>
</form>
</div>
<div class="col-6">
<label class="btn btn-secondary file_reset"> <!-- Remove Image -->
<i class="fa fa-undo"></i>
</label>
</div>
</div>
<div class="image-display-box">
<form runat="server">
<img class="upload_display" src="#" alt="Club Emblem" />
</form>
</div>
</div>
</div>
$( document ).ready(function() {
// ///////////////////////////////////////////////////////////////////////////
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('.upload_display').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]); // convert to base64 string
}
}
$("#imgInp").change(function() {
readURL(this);
});
$('.file_reset').on('click', function() {
$('.upload_display').attr('src', '');
});
// ///////////////////////////////////////////////////////////////////////////
});
document.getElementById('id_goes_here').style.display = 'none';
let timer = setInterval(function() {
// The dispatch date is just the variable name. You can change it wo whatever. As long as you change it where ever else it is been used as well.
// the format for dispatch_date is ('2018-10-17 17:00:00') which is been pull from an input field with the id of "countdown_timer"
const dispatch_date = new Date(document.getElementById("countdown_timer").value);
const today = new Date();
// console.log("dispatch_date : "+dispatch_date);
// console.log("today : "+today);
// get the difference
const diff = dispatch_date - today;
// math
let days = Math.floor(diff / (1000 * 60 * 60 * 24));
let hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((diff % (1000 * 60)) / 1000);
// display
document.getElementById("timer").innerHTML =
//Days - Hours - Minutes - Seconds
"</div class='timer-p'>This Stock list Expires in </div> \ <div class=\"days\"> \
<div class=\"numbers\">" + days + "</div>Days</div> \
<div class=\"hours\"> \
<div class=\"numbers\">" + hours + "</div>Hours</div> \
<div class=\"minutes\"> \
<div class=\"numbers\">" + minutes + "</div>Minutes</div> \
<div class=\"seconds\"> \
<div class=\"numbers\">" + seconds + "</div>Seconds</div> \
</div>";
}, 1000);
<a href="javascript:history.go(-1)" class="custom_back_button"><i class="fas fa-chevron-left"></i> Back</a>
This example uses Font Awesome. Don’t forget to include Font Awesome lib in your functions.php
jQuery(document).ready(function($) {
// Test
console.log( "ready!" );
});