Develop Reference

How to keep old data in table body when getting more data in jQuery table binding?

This is My HTML Table
<table id="tblscroll">
<thead>
<tr>
<th>Account Code</th>
<th>Description</th>
<th>Total Amount</th>
<th>Amt1</th>
<th>Amt2</th>
<th>Amt3</th>
</tr>
</thead>
<tbody></tbody>
</table>
<img id="loader" src="Image/myLoading.gif" style="display: none" />
This is my onload data. First I load a bit of data. After scrolling it gets some data to bind but my previous replace by new data.
$(document).ready(function() {
GetRecords();
});
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
pageIndex++;
if (pageIndex >= 2) {
$("#loader").show();
GetRecords();
}
}
});
comcod = <%=this.GetCompCode()%>;
function GetRecords() {
$("#loader").show();
$.ajax({
type: "POST",
url: "TestScrollDatat.aspx/Getdata",
data: '{comcod: ' + comcod + ',pageindex:' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response.d);
},
error: function(response) {
alert(response.d);
}
});
//}
}
function OnSuccess(response) {
//alert("Enter");
var customer = JSON.parse(response.d);
var row;
$.each(customer,
function(i, item) {
row += "<tr>";
row += "<td>" + item.actcode + "</td>";
row += "<td>" + item.actdesc + "</td>";
row += "<td>" + item.totamt + "</td>";
row += "<td>" + item.amt01 + "</td>";
row += "<td>" + item.amt02 + "</td>";
row += "<td>" + item.amt03 + "</td>";
row += "</tr>";
$("#tblscroll tbody").html(row);
});
$("#loader").hide();
}
I want to keep my old data and bind with new data.

row += "<tr>"; after var row; results in row === "undefined<tr>". Don’t append to an uninitialized variable. Use row = "<tr>"; for the first line. This also avoids appending to the same variable after updating the table.
Next, use $("#tblscroll tbody").append(row); instead of .html.
You can also shorten the function—no need for certain variables:
function OnSuccess(response) {
//alert("Enter");
const customer = JSON.parse(response.d),
columns = [
"actcode",
"actdesc",
"totamt",
"amt01",
"amt02",
"amt03"
];
$.each(customer, function(i, item) {
console.log("<tr>" + $.map(columns, (prop) => "<td>" + item[prop] + "</td>").join("") + "</tr>");
});
$("#loader").hide();
}

Empty Div tag issue for dynamically rendered table

I am creating dynamic table and appending it to Div tag on my .php page. On my .php page, I have dynamic buttons and if I click on any of the dynamic buttons, the dynamic table is rendered which has multiple headers and rows (for which I have written for loops with ajax requests). The issue is that, if i click on any of the dynamic buttons again, the current dynamic table data is appended to the previous dynamic table, instead I want to remove previously appended table data and render the current dynamic table data. I tried to empty the div tag but nothing seems working here. Hope I get some help, thanks in advance. Below are my .php and .js files:
.php file- I didnt post the function definition for get_Btns() as it is the basic php function to fetch data from the database:
<?php
function get_Btns() {
include "config.php";
$btns = $stmtDivision->fetchAll(PDO::FETCH_ASSOC);
foreach($btns as $btn){
echo "<input type='button' id='".$btn['divisionid']."' value='".$btn['division_name']."'
onclick=getData('".$btn['divisionid']."') >" ; echo "<br/>"; ?>
<script src="./user.js"></script>
<?php }
}
?>
<?php include "templates/header.php"; ?>
<div id="buttons_panel" style="text-align:center">
<?php echo get_Btns();?> </div>
<div id="div" class="divClass" ></div> <br/>
.js file:
function getData(value) {
document.getElementById("div");
var tableHtml = $('<table></table>');
var selectedManager = value;
var isEmpty = $('#div').empty();
// document.getElementById("div").innerHTML === "";
// document.getElementById("div").HTML === "";
// var isEmpty = $("#div").html() === "";
//$(".divclass").empty();
var teams = null;
$.ajax({
url: 'data.php',
method: 'post',
data: 'selectedManager=' + selectedManager,
async: false,
success: function(data) {
teams = JSON.parse(data);
}
});
for (var k = 0; k < teams.length; k++) {
const selectedteam = teams[k];
var selectedteamid = team[k].teamid;
var htmlth = "";
var html = "";
htmlth = "<tr>" + "<th id='thgrp' colspan='4' background-color: #013466;>" + teams[k].teamname + "</th>" +
"<th colspan='2' background-color: #62b8b6;>" + "<a href='Update.php?groupid=" + selectedteam.teamid + "' >" +
'Update Team member' + "</a>" + "</th>" + "</tr>" +
"<tr>" + "<th>" + "<img src='images/member.png'>" + "<b>" + "<div>" + 'Member' + "</div" + "</th>" +
"<th>" + "<img src='images/phone.png'>" + "<b>" + "<div >" + 'Phone' + "</div" + "</th>" +
"<th>" + "<img src='images/email.png'>" + "<b>" + "<div >" + 'Email' + "</div" + "</th>" + "</tr>";
tableHtml.append(htmlth);
var members = null;
$.ajax({
url: 'data.php',
method: 'post',
data: 'selectedteamid=' + selectedteamid,
async: false,
success: function(data) {
members = JSON.parse(data);
console.log(members);
}
});
for (var i = 0; i < members.length; i++) {
html += "<tr>" + "<td>" + members[i].name + "</td>" +
"<td>" + members[i].phone + "</td>" + "<td>" + members[i].email + "</td>";
}
tableHtml.append(html)
}
$("#div").append(tableHtml);
value = "";
}

Issue solved, I tried to empty the dynamic table that I have created instead of emptying the div tag on my html page. I did this earlier but I didn't do it properly. Thank you so much everyone for your time
This is the code:
tableHtml.attr('id', 'tableHtmlId');
$('#tableHtmlId').empty();

Javascript input field value

Need to get the value of input field inside script tag.
I need to get a value of input field that append to the html table using script tag. My code is following
function myFunction(i) {
$.ajax({
url: "<?php echo base_url(); ?>admin/itemD",
type: "POST",
dataType: "json",
data: {
"itID": i
},
success: function(data) {
//console.log(data);
if (data[0].availability == 0) {
alert('Item Not Available');
} else {
var tr = "<tr>";
var td0 = "<td>" + (i + 1) + "</td>";
var td1 = "<td>" + data[0].item_name + "</td>";
var td2 = "<td>" + data[0].price + "</td>";
var td3 = "<td><input placeholder='Advance' class='form-control col-3' /></td>"
$("#myTable").append(tr + td0 + td1 + td2 + td3);
}
},
error: function(err) {
console.log(err);
}
});
}
This is my code I used this code to show some data set which get from clicking event. But now I need to add input field to my javascript code. So I add input field to my code.
var td3 = "<td><input placeholder='Advance' id='vale' class='form-control col-3' /></td>"
But how do I get this input field value?
I tried to get the value of this input field by adding
document.getElementById('vale');
But It does not work. I go though the every problem earlier posted in stackoverflow. But no problem matching with my problem.

One way to achieve this might be to update your success handler, by binding an event handler via say, keyup(), that queries the current value of the input field when a key is pressed while the field is focused:
success: function(data) {
//console.log(data);
if (data[0].availability == 0) {
alert('Item Not Available');
} else {
var tr = "<tr>";
var td0 = "<td>" + (i + 1) + "</td>";
var td1 = "<td>" + data[0].item_name + "</td>";
var td2 = "<td>" + data[0].price + "</td>";
var td3 = "<td><input placeholder='Advance' class='form-control col-3' /></td>"
$("#myTable").append(tr + td0 + td1 + td2 + td3);
}
// Select the input field for the table, and add a keyup event listener
// to it
$('input', '#myTable').keyup(function() {
// Access the current value of the field like so
var currentFieldValue = $('input', '#myTable').val();
alert( 'Value of input is: ' + currentFieldValue );
})
}

You need to add id='vale' attributes which is not available in your input tag
After that you can get value by like this:
document.getElementById('vale').value

on click funtion is not working in jquery

In following code i want to run a function when someone click on SELL button(first td) but on click function is not working. it says run function is not defined.
function runfunction() {
alert("success");
}
sendRequest(); //call function
function sendRequest() {
$.ajax({
type: "POST",
url: '<?php echo site_url("ajax/ajax_buybtc"); ?>',
success: function(result) {
var jsonResult = JSON.parse(result);
$(".tab1 tr.tr1").remove();
jsonResult.forEach(function(data) {
var newTr = ""; // I delete the value to avoid double tr declaration
newTr +=
'<tr class="tr1"> <td onclick="runfunction()" style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>';
newTr += "<td id='xbtc " + data.xbtc + "'>" + data.xbtc + "</td>";
newTr += "<td id='xbtc " + data.rate + "'>" + data.rate + "</td>";
newTr += "<td id='xbtc " + data.xpkr + "'>" + data.xpkr + "</td>";
newTr += "</tr>";
$(".tab1 > tbody:last-child").append(newTr);
});
setTimeout(function() {
sendRequest(); //this will send request again and again;
}, 4000);
},
});
}

try to add a click function after adding a class (here I added 'td-click') to the td and remove the onclick attribute from td
$(".tab1").on("click", ".td-click", function(){
alert("success");
})

You need to change onclick="runfunction()" to onclick="runfunction".
Currently what's happening is that the runfunction is executed, and its return value is bound to the onclick event. You want the function itself to be bound, not its return value.

newTr += '<tr class="tr1"> <td onclick="runfunction()" style="text-align:center;"><a><span class="label label-warning">Sell</span></a></td>';
move onclick to span tag
newTr += '<tr class="tr1"> <td style="text-align:center;"><a><span onclick="runfunction()" class="label label-warning">Sell</span></a></td>';
https://codepen.io/bot_3310/pen/JajYyY

jQuery get nth:child from table after creating that with ajax

in this below ajax i fill and create simple data after getting data
$.ajax({
method: 'GET',
url: '/analyzePage/searchTag/' + tagName,
contentType: false,
processData: false,
success: function (data) {
console.log(data);
setTimeout(function () {
if (data.state == 'error') {
...
}
else {
let table = '<div class="table-responsive pre-scrollable">';
...
$.each(data.tags, function (key, value) {
table = table + '<tr class="searchTag-' + value.name + '">';
table = table + '<td style="padding: 6px 20px;">1</td>';
table = table + '<td style="padding: 6px 0px;">';
table = table + '<img src="' + value.profile_pic_url + '" class="img-circle img-sm" id="tagIamge"/></td>';
table = table + '<td style="padding: 6px 20px;">' + value.name + '</td>';
table = table + '<td style="padding: 6px 20px;">' + value.media_count + '</td>';
table = table + '<td>';
table = table + '<button type="button" class="btn btn-warning btn-icon btn-rounded legitRipple" id="searchTag-' + value.name + '">';
table = table + '<i class="icon-file-plus"></i>';
table = table + '</button>';
table = table + '</td>';
table = table + '</tr>';
});
...
$('.data').html(table);
}
}, 800);
},
error: function (data) {
console.log(data);
}
});
in that i have one button id="searchTag-' + value.name + '" which its into latest td i want to get all columns that this button is into that, for example this tr have 4 td and into latest td i have this button, then i want to get other td into this tr after click on button
my code work but its get all trs into my table
$(document).on('click', "[id^='searchTag']", function () {
let thisId = $(this).attr("id");
let tagName = thisId.split("-")[1];
$("[class^='" + $(this).attr("id") + "'] td:nth-child(3)").append("<span>Clicked</span>");
});

Do you want to add a span next to the icon of the button after clicking to it?
If you do, you can do it like this:
$(document).on('click', "[id^='searchTag']", function () {
$(this).closest('td').append("<span>Clicked</span>");
});
i want to get all td which button is into this row
Try this:
$(document).on('click', "[id^='searchTag']", function () {
$(this).closest('tr').find('td'); // returns all "td" elements
});