By clicking the show data button, my AJAX call is firing again and again the and same data gets added in to the table. Firstly, I want to stop that and secondly is there any way to update the database only with new data if some new data is added inside the database?
var showdata = document.getElementById("showdata");
var btn = document.getElementById("getdata");
btn.addEventListener("click", function() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "<?php echo base_url() ?>Appconfig/get_masteradmin_data", false);
xhttp.onload = function() {
var ourData = JSON.parse(xhttp.responseText);
renderHTML(ourData);
};
xhttp.send();
});
function renderHTML(data) {
var html = '';
var i;
for (i = 0; i < data.length; i++) {
html += '<tr>' +
'<td>' + data[i].full_name + '</td>' +
'<td>' + data[i].username + '</td>' +
'<td>' + data[i].designation + '</td>' +
'<td>' + data[i].department + '</td>' +
'<td>' + data[i].official_mobile_no + '</td>' +
'<td>' + data[i].official_email_id + '</td>' +
'<td>' + data[i].select_user_type + '</td>' +
'<td>' + data[i].permission + '</td>' +
'</tr>';
}
showdata.insertAdjacentHTML('beforeend', html);
}
use jquery html() method instead of showdata.insertAdjacentHTML('beforeend', html);
Related
How do I access the value of a td (x3) of the same tr (x1), if I click on the tr (x1 of td (x2))?
$(document).ready(function () {
$.ajax({
url: '/api/Usuario/GetPermisosRolPorUsuario',
method: 'GET',
dataType:'JSON',
data: { NitEmpresa,NombreUsuario },
headers: {
'Authorization': 'Bearer '
+ sessionStorage.getItem("accessToken")
},
success: function (data) {
debugger
$('#tblBody').empty();
$.each(data, function (index, value) {
var row =
$('<tr>'
+'<td id="IdUsuario">'+ value.IdUsuario + '</td>'
+ '<td id="RolId">' + value.RolId + '</td>'
+ '<td id="Estado" >' + value.Estado + '</td>'
+ '<td>' + value.Rol + '</td>'
+ '<td>' + value.DescripcionRol + '</td>'
+ '<td>' + value.NombreUsuario + '</td>'
+ '<td>' + value.FullName + '</td>'
+ '<td>' + value.licenciaEmpresa + '</td>'
+ '<td>' + value.RazonSocial + '</td>'
+ '<td>' + value.NitEmpresa + '</td>'
+ '<td>' + value.Correo + '</td>'
+ '<td>' + value.Celular + '</td>'
+ '<td>' + formatDate(value.licenciaFechaExpire) + '</td>'
);
$('#tblData').append(row);
});
Thank you, I managed to access the brothers 'td', as follows:
$('tr td:nth-child(3)', '#tblData').click(function () {
returns to the father to look for his brothers
var $thisRow = $(this).closest('tr')
brothers td
IdUsuario = $('td:first', $thisRow).text();
RolId = $('td:nth-child(2)', $thisRow).text();
Estado= $('td:nth-child(3)', $thisRow).text();
//an alert to print the values
alert(IdUsuario + '-' + RolId + '-' + Estado);
});
},
error: function (jQXHR) {
toastr.error('Sistemas Infinitos Informa: '+jQXHR.responseText);
}
});
});
$.each(data, function (index, value) {
var row =
$('<tr>'
+'<td id="IdUsuario">'+ value.IdUsuario + '</td>'
+ '<td id="RolId">' + value.RolId + '</td>'
+ '<td id="Estado" >' + value.Estado + '</td>'
First, each element in the DOM should have a unique id. By repeating the same ID multiple times, I'm not sure your on('click') events will attach in all browsers and return the value you are looking for. Instead, your click event should look something like this:
$('tr', '#tblData').click(function () {
var id1 = $('td:first-child', this).text();
var id2 = $('td:nth-child(2)', this).text();
var id3 = $('td:nth-child(3)', this).text();
...
}
or if you only want to allow clicking on the first TD:
$('tr td:first-child', '#tblData').click(function () {
var $thisRow = $(this).closest('tr')
var id1 = $(this).text();
var id2 = $('td:nth-child(2)', $thisRow).text();
var id3 = $('td:nth-child(3)', $thisRow).text();
...
}
i have three tabs. in one i want to load data from database and have a filter by email. when i click the button i want the data of only the user with the email to be displayed in the table in the same tab.
this is my script in view
<script>
jQuery('.savedata').click(function (e) {
e.preventDefault();
jQuery.post('/gettabdata', {
_token: window.csrf_token,
email: jQuery('input[name="email"]').val()
}
function (data) {
var $tableBody = jQuery('#filtered-data tbody');
$tableBody.html('');
jQuery.each(data, function (i) {
$tableBody.append(
'<tr>' +
'<td>' + data[i].User_id + '</td>' +
'<td>' + data[i].email + '</td>' +
'<td>' + data[i].status + '</td>' +
'<td>' + data[i].date + '</td>' +
'<td>' + data[i].time + '</td>' +
'</tr>'
);
});
}
'json');
});
</script>
this is my controller
for the tab in which i want to see the result
else {
$user = \Auth::guard('api')->user();
$post = $request->all();
$email = $request->input('email');
$cond = ' 1=1 ';
if(!empty($post['email'])){
$cond .= " and email like '".$post['email']."'";
}
$qry = 'SELECT User_id, email, status, date, time FROM profile WHERE '.$cond.' ';
$data = DB::select($qry);
$response = $this->analysis($post);
//$getdata=$this->userdata($post);
$data = [
'data'=>$data,
'response'=>$response,
//'getdata'=>$getdata
];
return response()->json($data);
}
try this
Route
Route::get('/get-record-by-email','Controller#getRecord');
//controller
public function getRecord(Request $request)
{
$emailid= Input::get('email_id');
$jsondata= DB::table(your-table)->where('email',$emailid)->get();
return response()->json($jsondata);
}
//Ajax call
$("#btnClick").change(function(e){
//console.log(e);
var email_id = e.target.value;
//alert(email_id);
//$token = $("input[name='_token']").val();
//ajax
$.get('/get-record-by-email?email_id='+email_id, function(data){
$('#filterdata').empty();
//console.log(data);
$.each(data, function(index, obj){
$('#filterdata').append( '<tr>'
'<td>' + obj.User_id + '</td>' +
'<td>' + obj.email + '</td>' +
'<td>' + obj.status + '</td>' +
'<td>' + obj.date + '</td>' +
'<td>' + obj.time + '</td>' +
'</tr>' );
});
})
});
I dont understand why but I'm getting the wrong body structure. You can see on the image that I get a <tr></tr> and I dont have that on javascript.
I just want a table with 3 columns and up to 10 rows.
What's happening?
My generated html
JavaScript
$('#selectMRPC').change(function () {
//fetch data
var mrpc = $(this).find('option:selected').data('mrpc');
$('#paramBody').empty();
for (var i = 1; i <= 10; i++) {
var field = mrpc["field" + i];
if (field !== undefined) {
var parsedField = field.split('_');
var value = parsedField[0];
var type = parsedField[1];
switch (type) {
case "S":
type = "text";
if (value === '""')
value = null;
break;
case "B":
type = "checkbox";
break;
case "N":
type = "number";
value = parseInt(value);
break;
case "D":
type = "number";
value = parseInt(value);
if (value === '""')
value = null;
break;
}
$('#paramBody').append('<tr>');
$('#paramBody').append('<td>' + i + '</td>');
$('#paramBody').append('<td>' + type + '</td>');
$('#paramBody').append('<td><input name="Fields" type="' + type + '">').val(value);
$('#paramBody').append('</tr>');
}
}
});
store everything in a var then add it to dom :
var html = "";
html += '<tr>';
html += '<td>' + i + '</td>';
html += '<td>' + type + '</td>';
html += '<td><input name="Fields" type="' + type + '" value="' + value +'">';
html += '</tr>';
$('#paramBody').append(html);
You are appending everything to #paramBody, which is incorrect. Consecutively, you need to append/insert data into <tr>. So I would recommend, you concatenate everything together instead of appending.
You need to change
$('#paramBody').append('<tr>');
$('#paramBody').append('<td>' + i + '</td>');
$('#paramBody').append('<td>' + type + '</td>');
$('#paramBody').append('<td><input name="Fields" type="' + type + '">').val(value);
$('#paramBody').append('</tr>');
to
var rowHtml = '<tr>' + '<td>' + i + '</td>' + '<td>' + type + '</td>' + '<td><input name="Fields" type="' + type + '">' + value + '</tr>';
$('#paramBody').append(rowHtml);
append will create an element from the parameter if the given input is not already a valid html string
Make it
$('#paramBody').append('<tr><td>' + i + '</td><td>' + type + '</td><td><input name="Fields" type="' + type + '" value="' +value + '"></tr>');
Or append them one by one (example below)
$( "<tr></tr>" ).append('<td>' + i + '</td>').appendTo( '#paramBody' );
Or create a string first
var html = '<tr>';
html += '<td>' + i + '</td>';
html += '<td>' + type + '</td>';
html += '<td><input name="Fields" type="' + type + '" value="' + value + '">';
html += '</tr>';
$('#paramBody').append(html );
i have this code:
for (var i = 0; i < data.times.length; ++i) {
var time = formatTime(data.times[i].time);
tableContent += '<tr><td>' + data.times[i].destination.name + '</td><td id="appendLate' + i + '">' + time + '</td><td>' + data.times[i].track + '</td><td>' + data.times[i].train_type + '</td><td>' + data.times[i].company + '</td></tr>'
// laat vertragingen zien (BETA)
if (data.times[i].delay / 60 >= 1) {
$('#appendLate' + i + '').append("+" + data.times[i].delay / 60).addClass("late");
}
}
table.html(tableContent);
}
The if statement appends stuff and adds a class. i know it wont work like this.. but i cant seem to get how it WIL work.. Can some one help?
See it live: http://codepen.io/shiva112/pen/JGXoVJ?editors=001
Well, you're basically almost there. The right way to do it is to build the entire string before doing any DOM manipulation, since DOM operations are very slow (relatively).
Let's say your index.html looks like:
<html>
<head>
<title>Cool site!</title>
</head>
<body>
<table id="myCoolTable"></table>
</body>
</html>
Then your JavaScript simply becomes:
var tableContent = '';
for (var i = 0; i < data.times.length; ++i) {
var time = formatTime(data.times[i].time);
tableContent += '<tr>'
+ '<td>' + data.times[i].destination.name + '</td>';
if (data.times[i].delay / 60 >= 1) {
tableContent += '<td id=\'appendLate\'' + i + ' class=\'late\'>' + time + '</td>' + '+' + (data.times[i].delay / 60);
} else {
tableContent += '<td id=\'appendLate\'' + i + '>' + time + '</td>';
}
tableContent += '<td id=\'appendLate\'' + i + '>' + time + '</td>'
+ '<td>' + data.times[i].track + '</td>'
+ '<td>' + data.times[i].train_type + '</td>'
+ '<td>' + data.times[i].company + '</td>'
+ '</tr>';
}
$('#myCoolTable').html(tableContent);
What this does is build the HTML for the entire table. Then update the table only once. Hope it helps!
my jQuery creates tables, but currently it keeps repeating the new tables under the previous ones when 'submit' button is clicked. How do I toggle it so it clears the previous table before showing the new table?
Any help would be great thanks!
<script type="text/javascript">
function call_everybody(){
display_results_table();
display_cyclist_results_table();
display_cyclist2_results_table();
}
function display_results_table() {
$("medal_table").empty();
$('<table id = "results_table">').appendTo('#medal_table');
$.get("sam2.php", { Country_1: $('#Country_1').val(), Country_2: $('#Country_2').val(), queryType: $('#differentOptions').val() },
function (results_obtained) {
$('<tr><td>Rank</td>' +
'<td>Country Name</td>' +
'<td>Population</td>' +
'<td>GDP</td>' +
'<td>Gold</td>' +
'<td>Silver</td>' +
'<td>Bronze</td>' +
'<td>Total</td></tr>').appendTo('#results_table');
for (var i = 0; i <= results_obtained.length; i++) {
$('<tr><td>' + (i+1) + '</td>' +
'<td>' + results_obtained[i].country_name + '</td>' +
'<td>' + results_obtained[i].population + '</td>' +
'<td>' + results_obtained[i].gdp + '</td>' +
'<td>' + results_obtained[i].gold + '</td>' +
'<td>' + results_obtained[i].silver + '</td>' +
'<td>' + results_obtained[i].bronze + '</td>' +
'<td>' + results_obtained[i].total + '</td></tr>').appendTo('#results_table');
}
},'json');
$('</table>').appendTo('#medal_table');
}
function display_cyclist_results_table() {
$("cyclist_table").empty();
$('<table id = "cyclist_results_table">').appendTo('#cyclist_table');
$.get("sam3.php", { Country_1: $('#Country_1').val(), Country_2: $('#Country_2').val(), queryType: $('#differentOptions').val() },
function (cyclist_results_obtained) {
$('<tr><td>Country id</td>' +
'<td>Name</td>' +
'<td>Gender</td>' +
'<td>Sport</td></tr>').appendTo('#cyclist_results_table');
for (var j = 0; j <= cyclist_results_obtained.length; j++) {
$('<tr><td>' + cyclist_results_obtained[j].iso_id + '</td>' +
'<td>' + cyclist_results_obtained[j].name + '</td>' +
'<td>' + cyclist_results_obtained[j].gender + '</td>' +
'<td>' + cyclist_results_obtained[j].sport + '</td></tr>').appendTo('#cyclist_results_table');
}
},'json');
$('</table>').appendTo('#cyclist_table');
}
function display_cyclist2_results_table() {
$("cyclist2_table").empty();
$('<table id = "cyclist2_results_table">').appendTo('#cyclist2_table');
$.get("sam4.php", { Country_1: $('#Country_1').val(), Country_2: $('#Country_2').val(), queryType: $('#differentOptions').val() },
function (cyclist2_results_obtained) {
$('<tr><td>Country id</td>' +
'<td>Name</td>' +
'<td>Gender</td>' +
'<td>Sport</td></tr>').appendTo('#cyclist2_results_table');
for (var j = 0; j <= cyclist2_results_obtained.length; j++) {
$('<tr><td>' + cyclist2_results_obtained[j].iso_id + '</td>' +
'<td>' + cyclist2_results_obtained[j].name + '</td>' +
'<td>' + cyclist2_results_obtained[j].gender + '</td>' +
'<td>' + cyclist2_results_obtained[j].sport + '</td></tr>').appendTo('#cyclist2_results_table');
}
},'json');
$('</table>').appendTo('#cyclist2_table');
}
</script>
<title>sam.php</title>
</head>
<body>
<form name="form">
<table>
<tr><td><input name="Country_1" id="Country_1" value="GBR" type="text"></td></tr>
<tr><td><input name="Country_2" id="Country_2" value="USA" type="text"></td></tr>
<td><input id='toggle' type="button" value="Cyclist Comparison" onclick="call_everybody()"/></td></tr>
</table>
</form>
<div id = "toggle_table">
<div id="medal_table"></div>
<div id="cyclist_table"></div>
<div id="cyclist2_table"></div>
</div>
</body>
You need to add -
$('#results_table').remove();
Prior to -
$('<table id = "results_table">').appendTo('#medal_table');