Develop Reference

How to change the table header and its content based on admin or normal user login using AJAX and PHP?

I have a table in which i am changing table header and its content by using PHP session id value but now i want to use AJAX, in which there is button on which a button is clicked and table is requested via JS file and at backend PHP file is executed and that PHP file send the JSON and the JS file parse the table and display the result.
But problem is I cannot use PHP Session in JS file. Please guide how can i proceed to get the changing table header with corresponding row content.
I am attaching part of HTML code with button to call and run server pages and also earlier working using PHP session.
Something need to be done in viewleadtable.js file which may get which using is login using PHP Session.
Although table is generated but it is not checking admin is logged in or normal user. Also there is console error for accessing variable admin.
Viewing Lead Table
Viewing Campaign Table
Following is the part of code dashboard.html
<section class="operation" id="view_all_lead_Campaign" style="width: 100%;margin: 0 auto; display: none;">
<!-- Main Tables Campaign and Lead Table -->
<div class="row">
<!-- MAIN TABLE-->
<div class="col" >
<button class="viewMainTable" name='viewMainTable' id='viewMainTableButton' >Lead Table</button>
<button class="viewCampaignTable" name='viewCampaignTable' id='viewCampaignTableButton' >Campaign Table</button>
<div class="row">
<div class="col">
<div id='viewmaintable' style="margin-top: 10px;">
</div>
</div>
</div>
<div class="row">
<div class="col">
<div id="viewcampaigntable" style="margin-top: 10px;">
</div>
</div>
</div>
<div class="row">
<div class="col span-1-of-3">
<label></label>
</div>
<div class="col span-2-of-3">
<div class="message_box" style="margin-left: 60px;">
</div>
</div>
</div>
</section>
In file viewleadtable.js But I am trying to use PHP inside it. Also only else part is executing
$(document).ready(function() {
var delay = 1000;
$('#viewMainTableButton').click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "./server/viewleadtable.php",
beforeSend: function() {
$('.message_box').html(
'<img src="tenor.gif" width="40" height="40"/>'
);
},
success: function(data) {
var result = $.parseJSON(data);
var admin = '<?php echo $_SESSION["Admin"] ?>';
var user_id = '<?php echo $_SESSION["User_Id"] ?>';
console.log(result);
if(admin == 1){
var string = '<table><thead><th>#</th><th>Lead Id</th><th>Name</th><th>Website</th><th>Linkedin</th><th>Lead Description</th><th>Owner Notes</th><th>Admin Notes</th><th>Added By</th><th>Last Contact Date</th><th>Next Contact Date</th><th>Lead Status</th><th>Details</th></thead><tbody>';
/* from result create a string of data and append to the div */
var i = 1;
$.each(result, function(key, value) {
string += "<tr><td>" + i + "</td><td>" + value['Lead_Id'] + "</td><td>" + value['FirstName']+" "+value['LastName'] + "</td><td>" + value['Website'] + "</td><td>" + value['Linkedin'] + "</td><td>" + value['LeadDescription'] + "</td><td>" + value['OwnerNotes'] + "</td><td>" + value['AdminNotes'] + "</td><td>"+ value['LeadAddedBy']+"<br>Date/Time: "+value['LeadAddedOn'] + "</td><td>" + value['LastContactDate'] + "</td><td>" + value['NextContactDate'] + "</td><td>" + value['LeadStatus'] + "</td><td>" + "<a href='#'>Click Here</a></td></tr>";
i = i + 1;
});
string += '</tbody></table>';
}else{
var string = '<table><thead><th>#</th><th>Lead Id</th><th>Name</th><th>Website</th><th>Linkedin</th><th>Lead Description</th><th>Owner Notes</th><th>Last Contact Date</th><th>Next Contact Date</th><th>Lead Status</th><th>Details</th></thead><tbody>';
/* from result create a string of data and append to the div */
var i = 1;
$.each(result, function(key, value) {
string += "<tr><td>" + i + "</td><td>" + value['Lead_Id'] + "</td><td>" + value['FirstName']+" "+value['LastName'] + "</td><td>" + value['Website'] + "</td><td>" + value['Linkedin'] + "</td><td>" + value['LeadDescription'] + "</td><td>" + value['OwnerNotes'] + "</td><td>" + value['LastContactDate'] + "</td><td>" + value['NextContactDate'] + "</td><td>" + value['LeadStatus'] + "</td><td>" + "<a href='#'>Click Here</a></td></tr>";
i = i + 1;
});
string += '</tbody></table>';
}
$("#viewmaintable").html(string);
$('.message_box').html('');
}
});
});
});
In viewleadtable.php
<?php
// send a JSON encoded array to client
include('connection.php');
$selectSQL = "SELECT * FROM tbl_main_lead_info ";
$result_array = array();
$result = $conn -> query ($selectSQL);
// If there are results from database push to result array
if(mysqli_num_rows($result) > 0){
while ($row = mysqli_fetch_array($result)) {
array_push($result_array, $row);
}
}
echo json_encode($result_array);
$conn->close();
?>
Similarly I have code for viewing campaign Table also but the Problem is i am not able to execute the if else condition using PHP Session variable.
In Short below thing needs to be modified as it is not working.
success: function(data) {
var result = $.parseJSON(data);
var admin = '<?php echo $_SESSION["Admin"] ?>';
var user_id = '<?php echo $_SESSION["User_Id"] ?>';
console.log(result);
if(admin == 1){
var string = '<table><thead><th>#</th><th>Lead Id</th><th>Name</th><th>Website</th><th>Linkedin</th><th>Lead Description</th><th>Owner Notes</th><th>Admin Notes</th><th>Added By</th><th>Last Contact Date</th><th>Next Contact Date</th><th>Lead Status</th><th>Details</th></thead><tbody>';
/* from result create a string of data and append to the div */
var i = 1;
$.each(result, function(key, value) {
string += "<tr><td>" + i + "</td><td>" + value['Lead_Id'] + "</td><td>" + value['FirstName']+" "+value['LastName'] + "</td><td>" + value['Website'] + "</td><td>" + value['Linkedin'] + "</td><td>" + value['LeadDescription'] + "</td><td>" + value['OwnerNotes'] + "</td><td>" + value['AdminNotes'] + "</td><td>"+ value['LeadAddedBy']+"<br>Date/Time: "+value['LeadAddedOn'] + "</td><td>" + value['LastContactDate'] + "</td><td>" + value['NextContactDate'] + "</td><td>" + value['LeadStatus'] + "</td><td>" + "<a href='#'>Click Here</a></td></tr>";
i = i + 1;
});
string += '</tbody></table>';
}else{
var string = '<table><thead><th>#</th><th>Lead Id</th><th>Name</th><th>Website</th><th>Linkedin</th><th>Lead Description</th><th>Owner Notes</th><th>Last Contact Date</th><th>Next Contact Date</th><th>Lead Status</th><th>Details</th></thead><tbody>';
/* from result create a string of data and append to the div */
var i = 1;
$.each(result, function(key, value) {
string += "<tr><td>" + i + "</td><td>" + value['Lead_Id'] + "</td><td>" + value['FirstName']+" "+value['LastName'] + "</td><td>" + value['Website'] + "</td><td>" + value['Linkedin'] + "</td><td>" + value['LeadDescription'] + "</td><td>" + value['OwnerNotes'] + "</td><td>" + value['LastContactDate'] + "</td><td>" + value['NextContactDate'] + "</td><td>" + value['LeadStatus'] + "</td><td>" + "<a href='#'>Click Here</a></td></tr>";
i = i + 1;
});

As I said in comment you can use php in ajax or u can use if statements in ajax.
This should work :
$(document).ready(function() {
var delay = 1000;
$('#viewMainTableButton').click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "./server/viewleadtable.php",
beforeSend: function() {
$('.message_box').html(
'<img src="tenor.gif" width="40" height="40"/>'
);
},
success: function(data) {
var result = $.parseJSON(data);
/*Delete this variables if you dont need*/
var admin = '<?php echo $_SESSION["Admin"] ?>';
var user_id = '<?php echo $_SESSION["User_Id"] ?>';
console.log(result);
<?php if($_SESSION["Admin"] == 1){ ?>
var string = '<table><thead><th>#</th><th>Lead Id</th><th>Name</th><th>Website</th><th>Linkedin</th><th>Lead Description</th><th>Owner Notes</th><th>Admin Notes</th><th>Added By</th><th>Last Contact Date</th><th>Next Contact Date</th><th>Lead Status</th><th>Details</th></thead><tbody>';
/* from result create a string of data and append to the div */
var i = 1;
$.each(result, function(key, value) {
string += "<tr><td>" + i + "</td><td>" + value['Lead_Id'] + "</td><td>" + value['FirstName']+" "+value['LastName'] + "</td><td>" + value['Website'] + "</td><td>" + value['Linkedin'] + "</td><td>" + value['LeadDescription'] + "</td><td>" + value['OwnerNotes'] + "</td><td>" + value['AdminNotes'] + "</td><td>"+ value['LeadAddedBy']+"<br>Date/Time: "+value['LeadAddedOn'] + "</td><td>" + value['LastContactDate'] + "</td><td>" + value['NextContactDate'] + "</td><td>" + value['LeadStatus'] + "</td><td>" + "<a href='#'>Click Here</a></td></tr>";
i = i + 1;
});
string += '</tbody></table>';
<?php }else{ ?>
var string = '<table><thead><th>#</th><th>Lead Id</th><th>Name</th><th>Website</th><th>Linkedin</th><th>Lead Description</th><th>Owner Notes</th><th>Last Contact Date</th><th>Next Contact Date</th><th>Lead Status</th><th>Details</th></thead><tbody>';
/* from result create a string of data and append to the div */
var i = 1;
$.each(result, function(key, value) {
string += "<tr><td>" + i + "</td><td>" + value['Lead_Id'] + "</td><td>" + value['FirstName']+" "+value['LastName'] + "</td><td>" + value['Website'] + "</td><td>" + value['Linkedin'] + "</td><td>" + value['LeadDescription'] + "</td><td>" + value['OwnerNotes'] + "</td><td>" + value['LastContactDate'] + "</td><td>" + value['NextContactDate'] + "</td><td>" + value['LeadStatus'] + "</td><td>" + "<a href='#'>Click Here</a></td></tr>";
i = i + 1;
});
string += '</tbody></table>';
<?php } ?>
$("#viewmaintable").html(string);
$('.message_box').html('');
}
});
});
});
Or you can do like this check for user role not for admin.
var user = <?php echo $_SESSION["role"]; ?>;
if (user === 1) {
//Write your ajax codes here
} else {
//Write your ajax codes here
}

How to i retrieve the firebase database child node with Name but not push id

I am trying to get the value for the selected child of the parent node which are not save using push id but name instead.
My firebase database : https://imgur.com/a/Lnqc80x
My current JS code:
var rootRef = firebase.database().ref('Admin').child('AssignCarTowing');
rootRef.on("child_added", function (snapshot) {
snapshot.forEach(function (snap) {
//console.log(snapshot.key);
//console.log(snap.key);
var status = snap.child("Status").val();
var name = snap.child("Name").val();
var cnum = snap.child("CarNumber").val();
var cmodel = snap.child("CarModel").val();
var hp = snap.child("ContactNo").val();
var brkloc = snap.child("BreakdownLocation").val();
var dandt = snap.child("TowingDateandTime").val();
var peric = snap.child("PersonInCharge").val();
$("#towreqlist").append("<tr><td>" + status + "</td><td>" + name + "</td><td>" + cmodel +
"</td><td>" + cnum + "</td><td>" + dandt +
"</td><td>" + hp + "</td><td>" + brkloc + "</td><td>" + peric + "</td><td><button onclick='done(\"" + snapshot.key + "\", \"" + snap.key + "\")' class='btn btn-success btn-sm'>Done</button>");
});
});

Solved by adding another ref on the node in my code
var rootRef = firebase.database().ref('Admin/Person In Charge/Towing/' + auth.currentUser.uid);
rootRef.once('value', function (snap) {
firebase.database().ref('Admin').child('AssignCarTowing').child(snap.child("Name").val()).on("child_added", function (snapshot) {
snapshot.forEach(function (snap) {
//console.log(snapshot.key);
//console.log(snap.key);
//var status = snap.child("Status").val();
var name = snap.child("CustName").val();
var cnum = snap.child("CustCarNumber").val();
var cmodel = snap.child("CustCarModel").val();
var hp = snap.child("CustContactNo").val();
var brkloc = snap.child("CustLocation").val();
var dandt = snap.child("CustBDTD").val();
//var peric = snap.child("PersonInCharge").val();
$("#towreqlist").append("<tr><td>" + name + "</td><td>" + cmodel +
"</td><td>" + cnum + "</td><td>" + dandt +
"</td><td>" + hp + "</td><td>" + brkloc + "</td><td><button onclick='done(\"" + snapshot.key + "\", \"" + snap.key + "\")' class='btn btn-success btn-sm'>Done</button>");
});
});
})

Append is just printing the text and not printing the data from my api...Please solve only using vanilla JS

This is my html
<tbody id="rqstusers">
</tbody>
This is my script and when i run it its just pasting the lines
function getusersdata() {
const myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');
const url = "XXXXXXXXXXXXXXXXXX";
fetch(url)
.then(function (response) {
console.log(response.status);
return response.json();
})
.then(function (data) {
for (var i = 0; i < data.length; i++) {
var mydata = "<tr><td>" + data[i].name + "</td><td>" + data[i].email + "</td><td>" + data[i].mobilenumber + "</td><td>"
+ data[i].state + "</td><td>" + data[i].city + "</td><td>" + data[i].pincode + "</td></tr>";
rqstusers.append(mydata);
}
})
This is my output
UPDATED: Updated my code to
.then(function (data) {
var elem = document.getElementById("rqstusers");
for (var i = 0; i < data.length; i++) {
var mydata = "<tr><td>" + data[i].name + "</td><td>" + data[i].email + "</td><td>" + data[i].mobilenumber + "</td><td>"
+ data[i].state + "</td><td>" + data[i].city + "</td><td>" + data[i].pincode + "</td></tr>";
elem.innerHTML= elem.innerHTML + mydata;
}
This is my Output and due to that first row its considering my table as empty and search ,print , csv functions were not working now

How to refresh page so my table does not keep getting added to existing table?

Whenever I click on my button to fire the below query it keeps on appending to the existing table.Is there any way I can refresh the page for every button click.
function submitClick() {
$(document).ready(function () {
const rootRef = firebase.database().ref().child("Orders/");
const query = rootRef.orderByChild('Session').equalTo('VEG');
query.on("child_added", snap => {
var user_id = snap.child("User id").val();
var name = snap.child("Username").val().toUpperCase();
$("#table_body").append("<tr><td>" + user_id + "</td> <td>" + name + "</td> <td>" + email +
"</td><td>" + address + "</td><td>" + dabba_type + "</td><td>" + session + "</td><td>" + start +
"</td><td>" + end + "</td><td>" + phone + "</td><td>" + "Rs " + price + "</td><td>" + feedback + "</td></tr>");
});
});
}

try adding $("#table_body").empty() at the start of the function

create the html into variable and then add to the body
var html = "<tr><td>" + user_id + "</td> <td>" + name + "</td> <td>" + email +
"</td><td>" + address + "</td><td>" + dabba_type + "</td><td>" + session + " </td><td>" + start +
"</td><td>" + end + "</td><td>" + phone + "</td><td>" + "Rs " + price + "</td><td>" + feedback + "</td></tr>";
$("#table_body").html(html);

I can't understand. You can use ajax to reload page or datatables be the best way for refreshing table with out page reload. If you want just reload page then use
location.reload();

Lock Child TR to Parent TR in Javascript

I'm making a table in Javascript and I can't use my expand row function after using a tablesorter plugin. I can only expand the hidden TRs before using the tablesorter.
I looked it up and it appears I would have to lock the hidden TR child with my parent TR>
My table code is as follows:
$('<tr>').html("<td class='IndicatedDispatch'></td>" + "<td>" + $(this).find("TripID").text() + "</td><td>"
+ $(this).find("RouteNum").text() + "</td><td>"
+ monthArray[theMonth] + " " + $(this).find("ArriveDate").text().substr(8,8).replace("T"," ") + "</td><td>"
+ monthArray[theMonth] + $(this).find("DepartDate").text().substr(8, 8).replace("T", " ") + "</td><td>"
+ $(this).find("CommodityHandle").text() + "</td>").addClass($(this).find("IsDispatched").text() === "0" ? "DispatchNo" : "DispatchYes").appendTo('#dallas');
$('<tr>').html("<td colspan='6'><p>" + $(this).find("DeliverySequence").text() + "</p></td>").hide().appendTo('#dallas');
});
$("#dallas").tablesorter();
setTimeout(function () {
$("tr").click(function (event) {
event.stopPropagation();
var $target = $(event.target);
$target.parent().next().slideToggle();
});
}, 1000);
Basically, how can I expand using my setTimeout function after sorting my table?
Much appreciated.
Tried this and it does not expand at all now:
$('<tr>').html("<td class='IndicatedDispatch'></td>" + "<td>" + $(this).find("TripID").text() + "</td><td>"
+ $(this).find("RouteNum").text() + "</td><td>"
+ monthArray[theMonth] + " " + $(this).find("ArriveDate").text().substr(8,8).replace("T"," ") + "</td><td>"
+ monthArray[theMonth] + $(this).find("DepartDate").text().substr(8, 8).replace("T", " ") + "</td><td>"
+ $(this).find("CommodityHandle").text() + "</td>").addClass($(this).find("IsDispatched").text() === "0" ? "DispatchNo" : "DispatchYes").appendTo('#dallas');
$('<tr data-associatedId="hiddenTr1">').html("<td colspan='6'><p>" + $(this).find("DeliverySequence").text() + "</p></td>").hide().appendTo('#dallas');
});
$("#dallas").tablesorter();
setTimeout(function () {
$("tr").click(function (event) {
event.stopPropagation();
var $target = $(event.target);
$('#' + $target.attr('data-associatedId')).slideToggle();
});
}, 1000);