Edit table values in php+ajax - javascript

I have table which goes like this:
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
<th>
Eventname
</th>
<th>
Time
</th>
<th>
Parsed Channel
</th>
<th>
Real Channel
</th>
<th>
Edit
</th>
<th>
Delete
</th>
</tr>
</thead>
<tbody>
<tr>
<?php while ($row = $req_events_parse->fetch()) {
echo"<td>
".$row['eventname']."
</td>
<td>
".$row['datetime']."
</td>
<td>
".$row['twchannel']."
</td>
<td class='center'>
".$row['realchannelname']."
</td>
<td>
<a class='edit' href='javascript:;'>
Edit </a>
</td>
<td>
<a class='delete' href='javascript:;'>
Delete </a>
</td>
</tr>";
}
?>
</tbody>
</table>
And i have jscript which on buttonclick enables me to edit table data but only keeps it in html, main part of the script goes like this:
table.on('click', '.edit', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated!");
} else {
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
My question is, how would i get values from row i was editing, i would like to get those values and send them to my php script which will update mysql database acordingly.

Related

How to add a jQuery filter to a html table?

I'm trying to put a drop down filter to a html table using JQuery. Here's the code.
report.php
<table id ="myTable" class="table table-striped">
<thead>
<tr>
<th></th>
<th> First Name </th>
<th> Last Name </th>
<th> Phone </th>
<th> Email </th>
<th> Gender</th>
<th>Term
<select id="filterText" onchange='filterText()'>
<option disabled selected>Select</option>
<option value="all">All</option>
<option value="Fall2018">Fall2018</option>
<option value="Srping2019">Spring2019</option>
</select></th>
<th> Action </th>
</tr>
</thead>
<?php
if (count($report) === 0) {
echo "<tr>No Reports</tr>";
} else {
for ($i = 0; $i < count($report); $i++) {
echo
"<tr class='row'>
<td>{$report[$i]['FName']}</td>
<td>{$report[$i]['LName']}</td>
<td>{$report[$i]['HPhone']}</td>
<td>{$report[$i]['PEmail']}</td>
<td>{$report[$i]['Gender']}</td>
<td>{$report[$i]['Term']}</td>
<td><a class=btn href='read.php?id=".$report[$i]['RegId']."'>Read</a></td>
</tr>";
}
}
?>
</table>
main.js
function filterText()
{
var rex = new RegExp($('#filterText').val());
if(rex ==="/all/"){clearFilter();}else{
$('.row').show();
$('.row').filter(function() {
return rex.test($(this).text());
}).hide();
}
}
function clearFilter()
{
$('.filterText').val('');
$('.row').show();
}
I'm adding the dropdown filter to the term column. This code gives the opposite results. Like when I click on the 'All' option of the dropdown, it shows Spring2019 in the results. And when I click on the 'Spring2019' it shows all the values. And 'Fall2018' also shows all the Spring2019 values.
Can you check what is wrong in the code?
Salam,
i think you can filter by cell text instead of row text, just add class to your cell
<td>{$report[$i]['Term']}</td>
like that
<td class='term'>{$report[$i]['Term']}</td>
and change your search function to
function filterText()
{
var val = $('#filterText').val().toLowerCase();
if(val === "")
return;
if(val === "all")
clearFilter();
else
$('.term').each(function() {
$(this).parent().toggle($(this).text().toLowerCase() === val);
});
}
Salam, there are no problem in my side, try run this snippet here and you'll see that it work fine just find what is the deference in you generated html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function filterText()
{
var val = $('#filterText').val().toLowerCase();
if(val === "")
return;
if(val === "all")
clearFilter();
else
$('.term').each(function() {
$(this).parent().toggle($(this).text().toLowerCase() === val);
});
}
function clearFilter()
{
$('.filterText').val('');
$('.row').show();
}
</script>
<table id ="myTable" class="table table-striped">
<thead>
<tr>
<th> First Name </th>
<th> Last Name </th>
<th> Phone </th>
<th> Email </th>
<th> Gender</th>
<th>Term
<select id="filterText" onchange='filterText()'>
<option disabled selected>Select</option>
<option value="all">All</option>
<option value="Fall2018">Fall2018</option>
<option value="Srping2019">Spring2019</option>
</select></th>
<th> Action </th>
</tr>
</thead>
<tbody>
<tr class='row'>
<td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
<td class="term">something</td>
<td><a class=btn href=''>Read</a></td>
</tr>
<tr class='row'>
<td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
<td class="term">Fall2018</td>
<td><a class=btn href=''>Read</a></td>
</tr>
<tr class='row'>
<td>a</td><td>a</td><td>a</td><td>a</td><td>a</td>
<td class="term">Spring2019</td>
<td><a class=btn href=''>Read</a></td>
</tr>
</tbody>
</table>

Append data in table row based on Checkbox value using jQuery

I have to update the status of mac device which i am selecting(checkbox) from html table.If i am selecting one mac from html table,it will show offline or online status of mac.Below code i am using for this.Problem is if i am selecting any mac only first row status column is updating.I want to update selected mac row status in respective column.
I am trying with below code but it is not working
var nextColumnCell = $(selected_device_mac).parent("tr").find(selected_device_id)
if(result.includes("On-line")){
nextColumnCell.html("");
nextColumnCell.append(result + " ✅")
}else if(result.includes("Off-line")){
$(selected_device_id).html("");
$(selected_device_id).append(result+" ❗");
}
Actual Code
function macDeviceClickedBox(checkBoxName){
var values = new Array();
var selected_device_id ;
var selected_device_mac ;
$.each($("input[name='"+checkBoxName+"']:checked").closest("td").next("td"), function () {
values.push($(this).text().trim())
});
document.getElementById("macaddress").value = values.join("\n");
selected_device_id = '#Selected_Device';
selected_device_mac = values.join("\n");
alert(selected_device_mac)
$('#cover-spin').show();
$.ajax({
method: "GET",
dataType: "text",
url: "getDeviceType",
data: {
mac : selected_device_mac.trim(),
},
success: function(result) {
$('#cover-spin').hide();
if (result !== "") {
if(result.includes("On-line")){
$(selected_device_id).html("");
$(selected_device_id).append(result+" ✅");
}else if(result.includes("Off-line")){
$(selected_device_id).html("");
$(selected_device_id).append(result+" ❗");
}
}else{
$(selected_device_id).html("");
$(selected_device_id).append("Not Selected ❗");
}
}
});
}
Html.erb
<table id="DeviceTable" class="table table-bordered">
<thead>
<tr class="info">
<th style="width: 10px;">Select</th>
<th>Device</th>
<th> Type</th>
<th> Model</th>
<th> Status</th>
</tr>
</thead>
<tbody class="parameter_table">
<% #devices.all.each do |parameter| %>
<tr id="device_<%=parameter.id %>">
<td >
<input type="checkbox" class="checkBox" name="checkBox[]" onchange="macDeviceClickedBox(this.name)">
</td>
<td id="macaddress" style="word-break:break-all;">
<%= parameter.mac_address%>
</td>
<td style="word-break:break-all;">
<%= parameter.device_type%>
</td>
<td style="word-break:break-all;">
<%= parameter.model%>
</td>
<td class="Selected_Device" id="Selected_Device">
<b id="Selected_Device" style="float: right;">!Not Selected</b>
</td>
</tr>
<% end %>
</tbody>
</table>

Refresh div after delete table row

I can successfully delete rows of my table and remove it from the table with jquery and ajax. On top of my table i have the number of rows displayed. How can i refresh the div (update_count) to show the decremented number after deleting ?
<div id="update_count"><?=$num_count?> data</i></div>
<table class="table">
<tr>
<th style="width:1px"><strong>Date</strong></th>
<th style="width:5px">Labo</th>
<th style="width:5px">Delete</th>
<tr>
<?php foreach($IndicacionesLab as $row)
{
?>
<tr>
<td><?=$row->insert_time;?></td>
<td><?=$row->laboratory;?></td>
<td> <a title="Eliminar laboratorio <?=$row->laboratory;?>" class="st deletelab" id="<?=$row->id_lab; ?>" style="background:rgb(223,0,0);cursor:pointer">Delete</a></td>
</tr>
<?php
}
?>
</table>
Js
$(".deletelab").click(function(){
if (confirm("Sure to delete ?"))
{
var el = this;
var del_id = $(this).attr('id');
$.ajax({
type:'POST',
url:'<?=base_url('admin/DeleteHistLab')?>',
data: {id : del_id},
success:function(response) {
// Removing row from HTML Table
$(el).closest('tr').css('background','tomato');
$(el).closest('tr').fadeOut(800, function(){
$(this).remove();
});
}
});
}
})
For simplicity keep all the data rows in a <tbody>
<table id="my-table">
<thead>
<tr>
<th> heading 1 </th>
</tr>
</thead>
<tbody>
<tr>
<th> data 1 </th>
</tr>
</tbody>
</table>
Then after you remove the row get the length of all rows remaining
$('#update_count').text( $('#my-table tbody tr').length + ' Items')

How to do search on Multiple table colums using javascript and bootstrap table?

I want to search do search functionality on multiple colums using bootstrap table by using javascript guide me. Here i am showing my javascript code used for search on first column. Guide me that how t use more columns using javascript.
$("#search").on("keyup",function(){
var value=$(this).val();
$("table tr").each(function(index){
if (index!==0){
$row = $(this);
var id= $row.find("td:first").text();
if (id.indexOf(value)!==0){
$row.hide();
}
else{
$row.show();
}
}
});
});
HTML
<input type="text" name="search" id="search" placeholder="Search">
<table data-toggle="table" data-sort-name="name" data-sort-order="asc" >
<thead>
<tr>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="address" data-sortable="true">Address</th>
<th data-field="birthdate" data-sortable="true">Birth Date</th>
<th>Gender</th>
<th data-field="hobby" data-sortable="true">Hobbies</th>
<th>Action</th>
</tr>
</thead>
Try this,
Without your full html table, I can only guess what it looks like and try to create something that would work
$("#search").on("keyup", function() {
var value = $(this).val().toLowerCase();
console.clear()
$("table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
$row.find("td").each(function(i, td) {
var id = $(td).text().toLowerCase();
console.log(id + " | " + value + " | " + id.indexOf(value))
if (id.indexOf(value) !== -1) {
$row.show();
return false;
} else {
$row.hide();
}
})
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="search" id="search" placeholder="Search">
<table data-toggle="table" data-sort-name="name" data-sort-order="asc">
<thead>
<tr>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="address" data-sortable="true">Address</th>
<th data-field="birthdate" data-sortable="true">Birth Date</th>
<th>Gender</th>
<th data-field="hobby" data-sortable="true">Hobbies</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peter</td>
<td>Street 123</td>
<td>03 may</td>
<td>Male</td>
<td>Code</td>
<td>None</td>
</tr>
<tr>
<td>Emma</td>
<td>Street 123</td>
<td>03 may</td>
<td>Female</td>
<td>Code</td>
<td>None</td>
</tr>
</tbody>
</table>

IF ELSE Condition in mustache Grid

<table style="font-size:12px;" class="table table-bordered accounts" id="example">
<thead>
<tr>
<th style="text-align:center;">Action</th>
<th>Plan Name</th>
<th>Sales Force</th>
<th>Natl. Acc</th>
<th>Segment</th>
<th>Example</th>
</tr>
</thead>
<tbody>
{{#{accounts}}
<tr>
<td style="text-align:center;"><i class="fa fa-cog fa-2x"></i></td>
<td>{{PlanName}}</td>
<td>{{PlanTypeName}}</td>
<td>{{ParentPlanName}}</td>
<td>{{SegmentName}}</td>
<td>
if ({{SegmentName}}=="S")
{
something
}
else
{
something
}
</td>
</tr>
{{/accounts}}
</tbody>
</table>
</script>
Load System:
var templateWithData= Mustache.to_html($('#Tmp-Plans').html(),{accounts: data});
$("#con-accounts").empty().html(templateWithData);
Html Code:
<div id="con-accounts">
</div>
In your load system you might wanna add something like
data.segmentNameCheck = function () {
return data.SegmentName == 'S'
}
var templateWithData= Mustache.to_html($('#Tmp-Plans').html(),{accounts: data});
in template do
{{#segmentNameCheck}} Something {{/segmentNameCheck}}
{{^segmentNameCheck}} Something Else {{/segmentNameCheck}}

Categories