We Keep Coding

Cannot fit autocomplete search result inside HTML table with Jquery, Ajax, JSP

So I have this App using AJAX technique with jQuery library to call the Spring-boot REST controller method. The app works but I cant make the searchresult to fit inside HTML tables.
result
HTML code:
<div align="center">
<div class="ui-widget">
<p>Type a product</p>
<label for="automplete-1">Tags: </label>
<input type="text" id="productName">
</div>
</div>
<br>
<!-- <br> Result -->
<br>
<div class="table table-bordered table-striped" id="result_table">
<table style="width: 50%;">
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</table>
</div>
JavaScript code:
$(document).ready(function() {
$('#productName')
.autocomplete({
minLength: 2,
source: '${pageContext.request.contextPath }/product/search',
/* declare sourc variable */
select: function(event, ui) {
/* click event dans ui to fire method*/
/* alert(event) */
var inputFromBox = ui.item.label;
var searchResults = [];
var html_to_append = '';
$.ajax({
type: 'GET',
url: '${pageContext.request.contextPath }/product/search_full?inputParam=' + inputFromBox,
dataType: 'json',
success: function(response) {
console.log(response);
$.each(response, function(i, item) {
html_to_append += '<tr>';
html_to_append += '<td >' + item.id + '</td>';
html_to_append += '<td>' + item.name + '</td>';
html_to_append += '<td>' + item.description + '</td>';
html_to_append += '<td>' + item.price + '</td>';
html_to_append += '</tr>';
});
$("#result_table table").append(html_to_append);
},
});
}
});
});

Since your element with the id result_table is a <div>, NOT a table.
<div class="table table-bordered table-striped" id="result_table">
<table style="width: 50%;">
<tr>
<th>ID</th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
</table>
</div>
So, you will need to change:
$("#result_table").append(html_to_append);
to
$("#result_table table").append(html_to_append);

Function does not enter the else

I am using the following function in a datatables table.
function novaData(d){
var dia = d.getDate().toString();
dia = (dia.length == 1) ? '0'+dia : dia;
var mes = (d.getMonth()+1).toString();
mes = (mes.length == 1) ? '0'+mes : mes;
var ano = d.getFullYear();
return dia+"-"+mes+"-"+ano;
}
class CellDate{
constructor( start_date ){
this.date = start_date;
}
getNextDate(){
if($('#user_data tbody tr').length){
var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
var ultimo_dia = +ultima_data[0];
var ultimo_mes = +ultima_data[1];
var ultimo_ano = +ultima_data[2];
this.date.setDate(ultimo_dia);
this.date.setMonth(ultimo_mes-1);
this.date.setYear(ultimo_ano);
this.date.setDate( this.date.getDate()+1);
}else{
this.date.setMonth(this.date.getMonth()+1);
this.date.setDate(1);
}
return novaData(this.date);
}
}
var DateIndexer = new CellDate(new Date(Date.now()));
$('#add').click(function(){
var html = '<tr>';
html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
html += '<td contenteditable id="data2"></td>';
html += '<td contenteditable id="data3"></td>';
html += '<td contenteditable id="data4"></td>';
html += '<td contenteditable id="data5"></td>';
html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
html += '</tr>';
$('#user_data tbody').prepend(html);
});
Within the class in getNextDate, when it is true (the table already has rows), creating a new row fills the date field with the date of the next day of the last row already entered.
But if the table has no row inserted, it returns in the date field NaN-NaN-NaN, because it does not enter into the else.
If you put console.log(DateIndexer.getNextDate()); before the function $('#add').click(function(){ returns 01-08-2019.
But if put console.log(DateIndexer.getNextDate()); inside the function $('#add').click(function(){ returns NaN-NaN-NaN.
Table #user_data:
<div class="container box">
<h3 align="center">MAPA DE TRABALHO</h3>
<h5 align="center">Ajudante de Ação Direta - Turno: Manhã</h5>
<br />
<div class="table-responsive">
<br />
<div align="right">
<button type="button" name="add" id="add" class="btn btn-info"><span class="glyphicon glyphicon-plus"></span></button>
</div>
<br />
<div id="alert_message"></div>
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Data</th>
<th>Resp. de Turno</th>
<th>Apoio</th>
<th>Elementos ALA A</th>
<th>Elementos ALA B</th>
<th></th>
</tr>
</thead>
</table>
</div>
</div>
</div>

Your html has no tbody, returning null on you first execution
Try to include a tbody
<table id="user_data" class="table table-bordered table-striped">
<thead>
<tr>
<th>Data</th>
<th>Resp. de Turno</th>
<th>Apoio</th>
<th>Elementos ALA A</th>
<th>Elementos ALA B</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
This will fix your code here:
$('#add').click(function(){
var html = '<tr>';
html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
html += '<td contenteditable id="data2"></td>';
html += '<td contenteditable id="data3"></td>';
html += '<td contenteditable id="data4"></td>';
html += '<td contenteditable id="data5"></td>';
html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
html += '</tr>';
$('#user_data tbody').prepend(html); //<--- right here
});
Your condition on if need to be reviewed too, because on the first execution tbody was empty, change to this
class CellDate {
constructor(start_date) {
this.date = start_date;
}
getNextDate() {
//here the change for if condition
if ($('#user_data tbody tr') != null && $('#user_data tbody tr').length > 0) {
var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
var ultimo_dia = +ultima_data[0];
var ultimo_mes = +ultima_data[1];
var ultimo_ano = +ultima_data[2];
this.date.setDate(ultimo_dia);
this.date.setMonth(ultimo_mes - 1);
this.date.setYear(ultimo_ano);
this.date.setDate(this.date.getDate() + 1);
console.log('if', this.date);
} else {
this.date.setMonth(this.date.getMonth() + 1);
this.date.setDate(1);
console.log('else', this.date);
}
return novaData(this.date);
}
}
Code here https://jsfiddle.net/nzb0tdjq/

How to reload view after AJAX POST

Being new to AJAX I have encountered this problem and have had no luck resolving it. I want my table to be refreshed after an ajax post to review an object, everything I've tried has been futile.
Assume the ajax response is a JSON result, to avoid posting my OnPost() code.
I send the Id of the product using ajax and then use that Id to remove the product
I then call the same method OnGet() uses to populate the tables which returns the updated list. In chrome debug tools I see the response successfully returns with the updated list. I just don't know how to get it across back to my list. Thanks in advance guys.
#Html.AntiForgeryToken()
<table id="shoppingBag" class="table">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.ShoppingBagItems)
{
<tr>
<td>
#item.Product.Name
</td>
<td>
#item.Price.ToString("C")
</td>
<td>
<input value="#item.Quantity" size="1" maxlength="1" class="text-center" />
</td>
<td>
<button onclick="remove(#item.Product.Id.ToString())" class="close">
<span aria-hidden="true">×</span>
</button>
</td>
</tr>
}
</tbody>
</table>
<script>
function remove(id) {
$.ajax({
type: 'POST',
url: 'ShoppingBag?handler=Delete',
headers: {
"XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val()
},
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: ''+id+'',
sucess: function (response) {
append_json(response);
}
});
}
function append_json(data){
var table = document.getElementById('shoppingBag');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' +
object.product.name +
'</td>' +
'<td>' +
object.price +
'</td>' +
'<td>' +
object.quantity +
'</td>';
table.appendChild(tr);
});
}
</script>

In Ajax success method after this append_json(response);add below code to refresh the table
$("#shoppingBag").load(window.location + " #shoppingBag");

change:
var table = document.getElementById('shoppingBag');
to:
var table = $('#shoppingBag tbody');
AND
change:
table.appendChild(tr);
to:
table.append(tr);

you are appending your data to main <table> if you inspect your table you can see the appended html.but you need to append data in body of table
for this you can use $("#shoppingBag tbody").append(tr);
or you can add id to <body> like <tbody id="myTestTableBody"> and use this in to your JavaScript
function append_json(data){
var table = document.getElementById('myTestTableBody');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' +
object.product.name +
'</td>' +
'<td>' +
object.price +
'</td>' +
'<td>' +
object.quantity +
'</td>';
table.appendChild(tr);
});
}
I have added a sample code that how you can append data to existing table
var page=1;
function AddData() {
$.ajax({
url: "https://reqres.in/api/users?page="+page,
type: "GET",
success: function(response){
append_json(response.data);
}
});
page++;
}
function append_json(data){
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' +
object.first_name +
'</td>' +
'<td>' +
object.last_name +
'</td>' +
'<td>' +
'<img src ='+object.avatar +' width="50px" height="50px" />'+
'</td>';
$("#shoppingBag tbody").append(tr);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" value="Add Data" onclick="AddData()">
<table id="shoppingBag" class="table">
<thead>
<tr>
<th scope="col">Item</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

HTML table with editable fields accessed in javascript.

I am trying to build a table that will allow users to change the value of a cell(s) and then "submit" that data
to a JavaScript (only please) method that turns the tables data into a json dataset.
I started by trying to updated the value of just one field. QTY in this case. I am able to loop over the table and get the static values, but I am not able to catch the user input value.
question: What is a JavaScript only (if possible) way to capture user change(able) values from a table?
function updateQTY() {
//getData from table
//gets table
var lines = "";
var oTable = document.getElementById('items');
//gets rows of table
var rowLength = oTable.rows.length;
var line = "";
//loops through rows, skips firts row/header
for (i = 1; i < rowLength; i++) {
//gets cells of current row
var oCells = oTable.rows.item(i).cells;
var qty = oCells.item(2).innerHTML;
//alert("qty: " + wty);
qty = qty.substr(oCells.item(2).innerHTML.indexOf('value=') + 7);
qty = qty.substr(0, qty.indexOf('" class='));
//alert(qty);
line = line +
'{ "item": "' + oCells.item(0).innerHTML + '",' +
' "discription": "' + oCells.item(1).innerHTML + '",' +
' "qty": "' + qty + '"},'
}
//alert(line);
var jsonData = JSON.parse('[' + line + '{"quickwayto":"dealwith,leftbyloop"}]');
alert("lines: " + JSON.stringify(jsonData));
}
<form action='#'>
<table class='mdl-data-table mdl-js-data-table' id='items'>
<thead>
<tr>
<th>item</th>
<th>discription</th>
<th>QTY</th>
</tr>
</thead>
<tbody>
<tr>
<td class='mdl-data-table__cell--non-numeric'> widget_1 </td>
<td class='mdl-data-table__cell--non-numeric'>it's fun</td>
<td>
<div class='mdl-textfield mdl-js-textfield'><input type='text' name='qty1' id='value1' value='5' class='mdl-textfield__input'></div>
</td>
</tr>
<tr>
<td class='mdl-data-table__cell--non-numeric'> widget_2 </td>
<td class='mdl-data-table__cell--non-numeric'>it's super fun</td>
<td>
<div class='mdl-textfield mdl-js-textfield'><input type='text' name='qty2' id='value2' value='5' class='mdl-textfield__input'></div>
</td>
</tr>
</tbody>
</table>
<div>
<input type='button' value='update' onclick='updateQTY()' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect'>
</div>
</form>
THANK YOU

Instead of selecting the entire td element, retrieve only what you really need using querySelector (or use jQuery if possible). Find the input element and access the value, it's a lot easier than doing all of that unecessary parsing of the inner html of the entire cell.
function updateQTY() {
//getData from table
//gets table
var lines = "";
var oTable = document.getElementById('items');
//gets rows of table
var rowLength = oTable.rows.length;
var line = "";
//loops through rows, skips firts row/header
for (i = 1; i < rowLength; i++) {
//gets cells of current row
var oCells = oTable.rows.item(i).cells;
var qty = oCells.item(2).querySelector(".mdl-textfield__input").value;
line = line +
'{ "item": "' + oCells.item(0).innerHTML + '",' +
' "discription": "' + oCells.item(1).innerHTML + '",' +
' "qty": "' + qty + '"},'
}
//alert(line);
var jsonData = JSON.parse('[' + line + '{"quickwayto":"dealwith,leftbyloop"}]');
alert("lines: " + JSON.stringify(jsonData));
}
<form action='#'>
<table class='mdl-data-table mdl-js-data-table' id='items'>
<thead>
<tr>
<th>item</th>
<th>discription</th>
<th>QTY</th>
</tr>
</thead>
<tbody>
<tr>
<td class='mdl-data-table__cell--non-numeric'> widget_1 </td>
<td class='mdl-data-table__cell--non-numeric'>it's fun</td>
<td>
<div class='mdl-textfield mdl-js-textfield'><input type='text' name='qty1' id='value1' value='5' class='mdl-textfield__input'></div>
</td>
</tr>
<tr>
<td class='mdl-data-table__cell--non-numeric'> widget_2 </td>
<td class='mdl-data-table__cell--non-numeric'>it's super fun</td>
<td>
<div class='mdl-textfield mdl-js-textfield'><input type='text' name='qty2' id='value2' value='5' class='mdl-textfield__input'></div>
</td>
</tr>
</tbody>
</table>
<div>
<input type='button' value='update' onclick='updateQTY()' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect'>
</div>
</form>

You need to use document.getElementById('value2').value instead of .innerHTML.indexOf('value=')

You're making yourself a lot of work here. You have a table. All you need to do is convert that to JSON. I would suggest you look at the library below that does that in around one line of native java-script.
http://www.developerdan.com/table-to-json/

jQuery Append removing tags

I try to use the jQuery Append method but its removing tags (tr, td) of my html code which I want to append. Why is it removing these and how can i force this method just to append and not to analyse my code?
Here is an example file
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript">
$(document).on('click', '#button1', function () {
var htmlAppend = '';
htmlAppend = htmlAppend + '<input type="hidden" name="content0" value="' + 'hiddenvalues' + '"/>' + '<tr>' +
'<td>' + 'content1' + '</td>' +
'<td>' + 'content2' + '</td>' +
'<td>' + 'content3' + '</td>' +
'<td><input style="width: 300px" type="text" name="content4"/></td>' +
'</tr>';
$("#ScenarioCompetenceRatings").append(htmlAppend);
});
</script>
</head>
<body>
<button id="button1">Add Row</button>
<table>
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th style="width: 300px">Column4</th>
</tr>
</thead>
<tbody id="ScenarioCompetenceRatings">
</tbody>
</table>

You are generating invalid markup. You should put the hidden input element in a td element. tbody element can only have tr children.

is this what you are trying to build? check on the fiddle i have created
http://jsfiddle.net/FWkd2/enter code here
to check my fiddle