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);

To pass the "rowcount" (Table Row Count) from jquery to "For Loop" (#for (int i = 0; i < rowCount; i++)) inside the .CSHTML

In MVC5, I tried to add/remove rows with glyphicon. I want to pass the "rowcount" (Table Row Count) from jquery to "For Loop" (#for (int i = 0; i < rowCount; i++)) inside the .CSHTML.
Please refer the image which I tried to achieve.
Script:
<script>
$(function () {
$('.glyphicon-plus').click(function () {
var sds = $(this);
$(this).closest("tr").clone(true).appendTo('#ruleTable');
var **rowCount** = $('#ruleTable tr').length;
});
$('.glyphicon-remove').click(function () {
$(this).closest("tr").remove();
});
});
</script>
HTML.BeginForm :
#for (int i = 0; i < rowCount; i++){
<tr>
<td>
<span class="glyphicon glyphicon-plus" stye="color:lawngreen"></span>
<span class="glyphicon glyphicon-remove" style="color:red"></span>
</td>
<td> #Html.TextBox("[" + i + "].DepartmentCode") </td>
<td> #Html.TextBox("[" + i + "].DepartmentName")</td>
</tr>
}
Thanks...

Its Not Possible,Jquery is client side for loop in server side. so you can use One javascript or jquery function and use ajax to make this functionalities.
Thanks,

You can try like this
html
<div class="table-responsive" id="DivTable">
<table class="table table-bordered" id="tbl">
<thead>
<tr>
<td>Name</td>
<td>Age</td>
<td>DOB</td>
<td>Salary</td>
<td>Industry</td>
<td>Action</td>
</tr>
</thead>
<tbody id="dtEmployeeDetails">
</table>
</div>
javascript
function GetEmployeeDetails() {
var EmployeeArray = [];
$("#dtEmployeeDetails").empty();
$.ajax({
type: "POST",
url: '#Url.Action("GetEmployeeDetails", "Employee")',
dataType: 'json',
//data: JSON.stringify({ id: '2' }),
contentType: "application/json; charset=utf-8",
success: function (data) {
$.each(data, function (key, val) {
EmployeeArray[key] = '<tr>' +
'<td>' + val.Name + '</td>' +
'<td>' + val.DateofBirth + '</td>' +
'<td>' + val.Age + '</td>' +
'<td>' + Industry + '</td>' +
'<td>' + val.Salary + '</td>' +
'<td>' + '<a class="btn btn-success btn-xs" title="Edit" id="' + val.EmpID + '" onclick="EditEmployeeDetails(this.id);">' + '<span class="glyphicon glyphicon-pencil"></span></a> ' +
'<a class="btn btn-danger btn-xs" title="Delete" id="' + val.EmpID + '" onclick="DeleteEmployeeDetails(this.id);"><span class="glyphicon glyphicon-trash"></span></a></td></tr>';
});
$("#dtEmployeeDetails").html(EmployeeArray.join(""));
if (data.length == 0) {
$("#dtEmployeeDetails").append('<td colspan="6" class="text-center">No Record Found.</td>');
}
}
});
}

How to get checked checkbox table value in jquery

In my table I have 2 rows please see my screen shot,suppose I click first check box means I want to take that id ** and **to_area value in jquery how can do this,I tried but I can not get please help some one
$(document).ready(function() {
$('#chemist_allotment_btn').click(function() {
if ($('#chemist_allotment_form').valid()) {
$.ajax({
url: 'update_chemist_bulk_transfer.php',
type: 'POST',
data: $('form#chemist_allotment_form').serialize(),
success: function(data) {
var res = jQuery.parseJSON(data); // convert the json
console.log(res);
if (res['status'] == 1) {
var htmlString = '';
$.each(res['data'], function(key, value) {
htmlString += '<tr>';
htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
htmlString += '<td>' + value.id + '</td>';
htmlString += '<td>' + value.name + '</td>';
htmlString += '<td>' + value.area + '</td>';
htmlString += '<td>' + value.to_area + '</td>';
htmlString += '<td>' + value.address + '</td>';
htmlString += '</tr>';
});
$('#SampleDT tbody').empty().append(htmlString);
$('#get_to_area').click(function() {
var id = $('input[name=getchemist]:checked').val();
if ($(".getchemist").prop('checked') == true) {
alert(id);
alert(value.to_area);
} else {
alert('Please Check');
}
});
} else {
$('#SampleDT tbody').empty().append('No Datas Found');
}
},
});
return false;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="well white">
<table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
<thead>
<tr>
<th>Select</th>
<th>Id</th>
<th>Doctor Name</th>
<th>From Area</th>
<th>To Area</th>
<th>Address</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<center>
<div class="form-group">
<button type="button" class="btn btn-primary" style="text-align:left;" id="get_to_area">Transfer Area</button>
</div>
</center>
</div>

Firstly, add classes to each <td>, like <td class='id'>[Your id]</td>
Similarly for all the elements doctor-name, to-area, etc and a class to each <tr> like row-select
Somewhat like this:
<tr class="row-select">
<td class="select">...</td>
<td class="id">...</td>
<td class="to-area">...</td>
.
.
.
</tr>
Use jQuery like this:
$('.row-select').click(function(){
var id,toArea,checkBox;
id = $(this).find('.id').html(); //get the ID field
toArea = $(this).find('.to-area').html(); //get the to-area field
checkBox = $(this).find('.select > input');
checkbox.prop('checked',!checkbox.prop('checked'));
})
This code will get you he value no mater where you click on the row, and also invert the selection on the checkbox
To get the values of rows selected when the form is submitted run a loop like this
$('.row-select input:checked').each(function(){
var id,toArea,checkBox;
id = $(this).closest('tr').find('.id').html(); //get the ID field
toArea = $(this).closest('tr').find('.to-area').html(); //get the to-area field
})
EDIT
All together:
$(document).ready(function() {
$('#btnSubmit').click(function() {
$('.row-select input:checked').each(function() {
var id, name;
id = $(this).closest('tr').find('.id').html();
name = $(this).closest('tr').find('.name').html();
alert('ID: ' + id + " | Name: " + name);
})
})
$('#btnSelectAll').click(function() {
$('.row-select input').each(function() {
$(this).prop('checked', true);
})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1>
<tr class="row-select">
<td class="check">
<input type="checkbox" />
</td>
<td class="id">12</td>
<td class="name">Jones</td>
</tr>
<tr class="row-select">
<td class="check">
<input type="checkbox" />
</td>
<td class="id">10</td>
<td class="name">Joseph</td>
</tr>
</table>
<button id="btnSelectAll">Select all</button>
<button id="btnSubmit">Get Value</button>

Process step-by-step:
Give the td you need some classes (from-a & to-a);
Initialize an empty array all (we'll store the data inside it later on);
Create a function that is triggered by the checkbox change
Inside the function you need to know which checkbox has changed, what's the state of it, what tr does it belong to and at the end what are the TO AREA and FROM AREA values.
If the state = checked we will add the values to the all (our small data storage);
If the state = not-checked we will remove the value from the all array;
Finally when we are done with selecting and deselecting rows by pressing the button we can get the values of the selected rows.
var all = [];
$('input[type="checkbox"]').change(function(){
var checkbox = $(this);
var state = checkbox.prop('checked');
var tr = checkbox.parents('tr');
var from = tr.children('.from-a').text();
var to = tr.children('.to-a').text();
if(state){
all.push(from + ' -> ' + to);
}else{
var index = all.indexOf(from + ' -> ' + to);
all.splice(index, 1);
}
})
$('#get_to_area').click(function(){
alert(all);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="well white">
<table id="SampleDT" class="datatable table table-hover table-striped table-bordered tc-table">
<thead>
<tr>
<th>Select</th>
<th>Id</th>
<th>Doctor Name</th>
<th>From Area</th>
<th>To Area</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr id="1">
<td><input type="checkbox"></td>
<td>1</td>
<td>Nick</td>
<td class="from-a">Kosur</td>
<td class="to-a">Nath Pari</td>
<td>Address</td>
</tr>
<tr id="2">
<td><input type="checkbox"></td>
<td>2</td>
<td>John</td>
<td class="from-a">Rusok</td>
<td class="to-a">iraP htaN</td>
<td>sserddA</td>
</tr>
</tbody>
</table>
<center>
<div class="form-group">
<button style="text-align:left;" id="get_to_area">Transfer Area</button>
</div>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
This is just the basic concept, you can modify it to suit your needs, I'll be happy to help you if you get stuck.

You can also use this fiddle:
In JS:
$('#get_to_area').click(function () {
var id = $('input[name=getchemist]:checked').val();
if ($('input[name=getchemist]').is(':checked')) {
var ID = $('input[name=getchemist]').parent().parent().siblings('td.chkid').html();
var TO_Area = $('input[name=getchemist]').parent().parent().siblings('td.toarea').html();
}
else {
alert('Please Check');
}
});
In Html:
if (res['status'] == 1) {
var htmlString = '';
$.each(res['data'], function (key, value) {
htmlString += '<tr>';
htmlString += ' <td class="sorting_1"><div class="checkbox-custom checkbox-success"><input type="checkbox" id="checkboxExample3" name="getchemist" class="getchemist" value="' + value.id + '"><label for="checkboxExample3"></label></div></td>';
htmlString += '<td class="chkid">' + value.id + '</td>';
htmlString += '<td>' + value.name + '</td>';
htmlString += '<td>' + value.area + '</td>';
htmlString += '<td class="toarea">' + value.to_area + '</td>';
htmlString += '<td>' + value.address + '</td>';
htmlString += '</tr>';
});

I'm guessing you need values of each td whose checbox are checked. This piece of code should get you started.
As you can see, Code loops through each checkbox which is checked, gets contents inside its corresponding td.
var Result = new Array();
$('.checkbox-custom input[type="checkbox"]:checked').each(function(){
var _this = $(this).closest('tr').find('td');
var id= $(_this).eq(0);
var name = $(_this).eq(1);
................... //Similar way for the others
Result.Push(id,name,....)
});

Display ajax response in Table

display.html :
<div id="display_result" style="display: none"><table class="table">
<p style="float: right;" >Select All<input type="checkbox" class="allcb" data-child="chk" checked/> </p>
<thead>
<tr>
<th>Die No</th>
<th> Status </th>
<th> Location </th>
<th>Select</th>
</tr>
</thead>
<tbody>
</table>
<div id ="issue_button">
<input type="submit" id="submit" class="btn btn-success " value="Recieve" style="width: 150px;"></div>
</div>
Ajax:
var data = JSON.stringify($("#form").serializeArray());
// alert(data);
$.ajax({ // Send the credential values to another checker.php using Ajax in POST menthod
type: 'POST',
data: {
list: data
},
url: 'die_recieving_process.php',
success: function(data) ){
$('#display_result').html(data);
}
});
die_recieving_process.php
while($fetch = mysql_fetch_array($query))
{
if($fetch[1] == "Table Rack" )
{
echo '<tr class="success"><td>'.$fetch[0].'</td><td>'.$fetch[1].'</td><td>'.$fetch[3] . '</td> <td><input type=checkbox class="chk" id=check_box value= '.$fetch[2].' name= check_list[] </td> </tr>';
}
else
{
echo '<tr class="warning"><td>'.$fetch[0].'</td><td>'.$fetch[1].'</td><td>'.$fetch[3] . '</td> <td><input type=checkbox class="chk" id=check_box value= '.$fetch[2].' name= check_list[] checked </td> </tr>';
}
}
Hi friends in display.html I have to display the result processed in die_recieving_process.php . In ajax i've sent all the value to die_recieving_process.php and after fetching the result i've to display the result in display.html

First in you Javascript, you have 2 errors:
Your code overrides existing contents of div, which is the whole table...
And you have one unnecessary bracket in success function declaration
So change this:
success: function(data) ){
$('#display_result').html(data);
}
To this:
success: function(data) {//remove unnecessary bracket
$('#display_result tbody').html(data);//add data - to tbody, and not to the div
}
By the way, using $.post() you can write your javascript code shorter, like this:
var data = JSON.stringify($("#form").serializeArray());
$.post('die_recieving_process.php',{list:data},function(responseData){
$('#display_result tbody').html(responseData); //added to tbody which is inside #display_result
$('#display_result').show();
});
Second you need to close your tbody tag inside the table

Create html table with empty body tags and body id = tBody for example:
<table>
<caption>Smaple Data Table</caption>
<thead>
<tr>
<th>Field 1</th>
<th>Field 2</th>
</tr>
</thead>
<tbody id="tBody"></tbody>
</table>
Use the jquery ajax to load json data in the created table after load button is clicked assuming that my json file is storing userData like userName, age, city:
$('#btnLoadAll').click(function () {
$.ajax({
url: "url/data.json",
dataType: 'json',
success: function (resp) {
var trHTML = '';
$.each(resp, function (i, userData) {
trHTML +=
'<tr><td>'
+ userData.userName
+ '</td><td>'
+ userData.age
+ '</td><td>'
+ userData.city
+ '</td></tr>';
});
$('#tBody').append(trHTML);
},
error: function (err) {
let error = `Ajax error: ${err.status} - ${err.statusText}`;
console.log(error);
}
})
});

If you do not see result, try to remove style="display: none" in display.html

Datatables using JSON response

I'm trying to load a JSON response from Google Shopping into a table in html formatted using DataTables, the JQuery plugin.
I'm appending the data to the table div but it does not seem to be working.
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Currency</th>
<th>Price</th>
<th>Shipping</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>ID</th>
<th>Title</th>
<th>Currency</th>
<th>Price</th>
<th>Shipping</th>
</tr>
</tfoot>
</table>
<script>
var apiKey = "key";
var country = "US";
var apiurl = "https://www.googleapis.com/shopping/search/v1/public/products?callback=?";
$(document).ready(function() {
$('#example').dataTable();
$('.button').click(function (e) {
$('#example').empty();
e.preventDefault();
$.ajax({
type: "GET",
url: apiurl,
dataType: 'jsonp',
data :
{
key: apiKey,
country: country,
q: $('[name=myanswer]').val()
},
success: function(data) {
$.each(data.items, function(i, item){
if (item.product.images.length > 0) // sanity check
{
//global variables
var link = item.product.images[0]['link'];
var title = item.product.title;
var gtin = item.product.gtins[0];
//price
var currency = item.product.inventories[0]['currency'];
var price = item.product.inventories[0]['price'];
var shipping = item.product.inventories[0]['shipping'];
var listData = "<li>" + title + gtin + price + currency + shipping + "</li>" + '<img title="' + title + '" src="' + link + '" />';
var dataTable =
"<tr>" +
"<td>" + '<img title="' + title + '" src="' + link + '" />' + "</td>" +
"<td>" + gtin + "</td>" +
"<td>" + title + "</td>" +
"<td>" + currency + "</td>" +
"<td>" + price + "</td>" +
"<td>" + shipping + "</td>" +
"</tr>";
$('#example').append(dataTable).hide().fadeIn('slow');
console.log(data)
}
});
}
});
});
});
Update: With Larry's help, I've managed to get the data loading into the table. I know this as the number at the bottom is populated. However, the data is not displaying at all.
<!DOCTYPE html>
<html>
<head>
<style>
#images { padding:0; margin:0; overflow: hidden;}
#images img { width:200px; height:200px; border:none;}
td {
padding-top: 2px;
padding-bottom: 2px;
padding-right: 20px;
}
#example img { width:50px; height: 50px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.dataTables.js"></script>
</head>
<body>
<form id="myform">
<input type="text" name="myanswer" value="test">
<input type='submit' class="button" name="submitButton" value='submit'>
</form>
<table id="example">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
<script>
var apiKey = "key";
var country = "US";
var apiurl = "https://www.googleapis.com/shopping/search/v1/public/products?callback=?";
$(document).ready(function() {
$('#example').dataTable();
$('.button').click(function (e) {
$('#example').empty();
e.preventDefault();
$.ajax({
type: "GET",
url: apiurl,
dataType: 'jsonp',
data :
{
key: apiKey,
country: country,
q: $('[name=myanswer]').val()
},
success: function(data) {
$.each(data.items, function(i, item){
if (item.product.images.length > 0) // sanity check
{
//global variables
var link = item.product.images[0]['link'];
var title = item.product.title;
var gtin = item.product.gtins[0];
//price
var currency = item.product.inventories[0]['currency'];
var price = item.product.inventories[0]['price'];
var shipping = item.product.inventories[0]['shipping'];
$('#example').dataTable().fnAddData( [
title,
gtin,
price
]);
}
});
}
});
});
});
</script>
</body>
</html>

Assuming that your AJAX call is working and returning data, the proper way to append a row to a jQuery dataTable is not to attempt to edit the underlying HTML but rather to have dataTable add the row through the dataTable API call fnAddData().
There is an example here.