Hi gladly I want to add a task row after I have clicked the save button. However what I have tried didn't seem to work unfortunately.
To show you the problem that I have. I will show you through a video where I have recorded myself. Here is the link: https://www.youtube.com/watch?v=d7L75HflxYo&feature=youtu.be
This is what I have tried:
var orderId=$('#id_order').val();
var $table = $('#taskTable');
$table.empty();
loadOrderTable(orderId);
And I have also tried this:
var orderId=$('#id_order').val();
var $table = $('#taskTable');
$table.empty();
//loadOrderTable(orderId);
$table.html(loadOrderTable(orderId));
Both attemps were placed in the body of the click function $('#saveOrder').click(function(e).
Now I will show you there rest of my code, in case if you need it.
$(function(){
$('#saveOrder').click(function(e){
e.preventDefault();
var form = $('#orderForm');
var allInput=form.serialize();
//var allInputJSON = JSON.stringify(allInput);
console.log('form serialize value: '+form.serialize());
//console.log('allInputJSON value: '+allInputJSON);
$.ajax( {
url: absUrl + "/user/orders/update/ordertasks",
data: {'allInput' : allInput},
success: function( response ) {
console.log('response value: '+ response );
//tried this after a user has added a task and that the gets filled with the new added row. But unfortunately it doesn't works.
var orderId=$('#id_order').val();
var $table = $('#taskTable');
$table.empty();
loadOrderTable(orderId);
}
} );
});
//addRowOnTaskTable(6);
var orderId=$('#id_order').val();
loadOrderTable(orderId);
//updateTotal();
//absUrl is declared in user/_layouts/template_head.blade.php
function loadOrderTable(order_id){
var order_id=order_id;
$.ajax({
url: absUrl+"/user/orders/load/tasks",
data: {'order_id' : order_id}
}).done(function(data) {
var data = $.parseJSON(data);
console.log('result loading table');
console.log(JSON.stringify(data));
$.each(data, function(index, value) {
$('#taskTable').append(
'<tr>'+
'<td>'
+value.task_name+
'</td>'+
'<td>'
+value.task_hour+
'</td>'+
'<td>'+ //pak load id ordertask ipv load hour voor je backend
'<input type="text" class="form-control hour" id="hour'+value.id+'" name="load_hour[]" value='+value.hour+' data-row='+value.id+' style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control hour_salary" id="hour_salary'+value.id+'" name="load_hour_salaries[]" value='+value.hourprice+' data-row='+value.id+' style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control" id="total_salary'+value.id+'" name="load_total_salaries[]" value='+value.totalprice+' readonly style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<div class="dropdown">'+
'<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">'+
'<input id="check1" name="checkbox[]" type="checkbox" class="check" >'+
'<span class="caret-hover caret"></span>'+
'</button>'+
' <input type="hidden" name="load_id_task[]" value="'+value.id_task+'"/>'+
' <input type="hidden" name="load_id_ordertask[]" value="'+value.id+'"/>'+
'<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">'+
'<li><a class="deleteOrdertask" id="deleteOrdertask' + value.id + '" value="deleteOrdertask' + value.id + '" data-row='+value.id+' href= "#" data-method="delete" >Delete</a></li>'+
'</ul>'+
'</div>'
+'</td>'+
'</tr>');
});
$('.deleteOrdertask').click(function(e){
e.preventDefault();
var $this = $(this);
var rowId = $this.data('row');
deleteOtRow( rowId );
});
var deleteOtRow = function(rowId){
$deleteOrdertask = $("#deleteOrdertask" + rowId);
$($deleteOrdertask).parents('tr').remove();
var temp = $('#delete_ordertasks').val();
$('#delete_ordertasks').val(temp + rowId + ",");
//$(this).parents('tr').remove();
};
var updateTotal = function(rowId){
var rowId = rowId,
$hour_salary = $("#hour_salary" + rowId),
$total_salary = $("#total_salary" + rowId);
var hour = parseFloat($("#hour" + rowId).val()),
hour_salary = parseFloat($hour_salary.val());
if ( hour_salary.length > 0 )
$total_salary.val("0");
else
$total_salary.val( hour_salary * hour );
};
//updates elke totaal veld zonder dat een user een knop heeft ingedrukt.
$('.hour_salary').each(function() {
var $this = $(this);
updateTotal($this.data('row'));
});
$(".hour_salary").keyup(function() {
console.log('test keyup ');
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
$(".hour").keyup(function() {
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
});
}
function addRowOnTaskTable( id_task ){
var id_task=id_task;
console.log('addrow id '+ id_task);
$.ajax({
url: absUrl+"/user/orders/post/task",
data: {'id_task' : id_task}
}).done(function(data) {
var data = $.parseJSON(data);
console.log('add row JSON stringify'+JSON.stringify(data));
$('#taskTable').append(
'<tr>'+
'<td>'
+data.task_name+
'</td>'+
'<td>'
+data.task_hour+
'</td>'+
'<td>'+
'<input type="text" class="form-control hour" value="" data-row="'+data.id+'" name="hour[]" style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control hour_salary" value="" data-row='+data.id+' name="hour_salary[]" style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control" name="total_salary[]" value="" readonly style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<div class="dropdown">'+
'<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">'+
'<input id="check1" name="checkbox[]" type="checkbox" class="check" >'+
'<span class="caret-hover caret"></span>'+
'</button>'+
' <input type="hidden" name="id_task[]" value="'+data.id+'"/>'+
' <input type="hidden" name="id_ordertask[]" value=""/>'+
' <input type="hidden" name="id_task[]" value="'+data.id+'"/>'+
'<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">'+
'<li><a class="deleteOrdertask' + data.id + '" href= "'+absUrl+"/user/orders/delete/ordertask"+'" data-method="delete" >Delete</a></li>'+
'</ul>'+
'</div>'
+'</td>'+
'</tr>');
$('.deleteOrdertask' + data.id ).click(function(e){
e.preventDefault();
$(this).parents('tr').remove();
});
var updateTotal = function(rowId){
var rowId = rowId,
$hour_salary = $("#hour_salary" + rowId),
$total_salary = $("#total_salary" + rowId);
var hour = parseFloat($("#hour" + rowId).val()),
hour_salary = parseFloat($hour_salary.val());
if ( hour_salary.length > 0 )
$total_salary.val("0");
else
console.log('tot ja '+ hour_salary * hour);
$total_salary.val( hour_salary * hour );
};
$(".hour_salary").keyup(function() {
console.log('test keyup ');
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
$(".hour").keyup(function() {
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
});
}
});
