the jquery plugin that im using is this
http://code.google.com/p/jquery-in-place-editor/
if i have a table like this
<table>
<thead>
<tr>
<th>id</th>
<th>first name </th>
<th>last name </th>
</tr>
</thead>
<tbody>
<tr>
<td class="id">1</td>
<td class="fname">sarmen</td>
<td class="lname">mikey</td>
</tr>
<tr>
<td class="id">2</td>
<td class="fname">john</td>
<td class="lname">angelo</td>
</tr>
<tr>
<td class="id">3</td>
<td class="fname">sarmen</td>
<td class="lname">grande</td>
</tr>
</tbody>
</table>
and my js looked something like this
$("td.fname").editInPlace({
url: 'ajax.php',
params: '',
show_buttons: true
});
then lets say i click on the first record to edit it which is fname of sarmen. how can i pass a param that only accociates id 1 ? because if i do a query of lets say
"update tbl_users set fname = '$_POST['update_value']' where fname = '$_POST['original_html']'"
(note: im just showing an example so no need to clean posts if that was bothering you :) )
if i run this query the fname of sarmen will update in two records rather than one. How can i only update to id of 1 being to update only one record.
$("table tr").each(function(i, el) {
var tdId = $(el).find("td.id");
$(this).find("td.fname".editInPlace({
url: 'ajax.php',
params: 'id=' + $(tdId).text(),
show_buttons: true
});
});
you must add to params id from the first cell in row.
$("td.fname").editInPlace({
id = $(this).parents('tr').children('td:first-child').html();
url: 'ajax.php',
params: {id:id},
show_buttons: true
});
and $id = (int)$_POST['id']; in php
Related
I am trying to ajax delete rows in a table. It is working, except for the fact that it deletes the ENTIRE table... There is a table within the table the code is as follows;
$(document).ready(function() {
$(".delete").bind('click', function(e){
e.preventDefault();
var parent = $(this).parents('tr');
var string = 'id='+ parent.attr('id').replace('record-','') ;
$.ajax({
type: 'POST',
url: 'ajax_delete.php',
data: string,
beforeSend: function() {
parent.animate({'backgroundColor':'#fb6c6c'},300);
},
success: function(data) {
if(data.status == 'success'){
parent.slideUp(300,function() {
parent.remove();
});
}else if(data.status == 'error'){
parent.animate({'backgroundColor':'#eeeeee'},300);
} else {
parent.animate({'backgroundColor':'#eeeeee'},300);
}
},
});
});
});
The table layout;
<table class="tab_var1">
<tr>
<td class="tab_var1_pad">
<div class="v_tables">
<table>
<tr>
<td>
Domain Name
</td>
<td>
Stats Overview
</td>
<td>
Remove from CRON
</td>
</tr>
<tr class="record" id="record-1">
<td >
<a href="http://www.challengept.com" target="_blank">challengept.com<a>
</td>
<td >
<table >
<tr>
<td>
Traffic (Month)
</td>
<td>
No. Keywords
</td>
<td>
No. PPC Ads
</td>
<td>
Visibility
</td>
</tr>
<tr>
<td>
1796
</td>
<td>
367
</td>
<td>
0
</td>
<td>
0.0236900
</td>
</tr>
<tr>
<td>
Data Source - UK
</td>
</tr>
</table>
</td>
<td >
Remove
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
If anyone can let me know how I can select a single TR within the ajax that would be a great help. The TR I wish to select is the tr with the class "record" which has an a href button in the last td. I am using select parents tr?
You can use closest for this:
var parent = $(this).closest('tr');
var string = 'id='+ parent.attr('id').replace('record-','') ;
I think you can do it with better way as following:
1. Assign data attr for id field
Remove
2. Get data id
var string = $(this).data('id');
.parents() returns all the parents of the element. You just need to select the immediate parent or closest ancestor tr. Use the following jquery method
var parent = $(this).closest('tr');
See links
https://www.w3schools.com/jquery/traversing_parents.asp
Jquery row selecting in a button onClick
Iam using DataTable this is my code:
var table = $('#open').DataTable( { });
This is my html table code:
<table id="open">
<thead>
<tr>
<th rowspan="2"> S.No </th>
<th rowspan="2"> Patient Name </th>
<th colspan="2"> Booking </th>
<th rowspan="2"> Insurance Company</th>
<th rowspan="2">Appointment Status</th>
<th rowspan="2">Edit</th>
</tr>
<tr>
<th> Date </th>
<th> Time </th>
</tr>
</thead>
<tbody id="booking">
</tbody>
</table>
This is my ajax code:
var date = $("#date").val();
$.ajax({
type: 'POST',
url: 'booked1.php',
data: {
date: date
},
cache: false,
dataType: "html",
success: function (response) {
alert(response);
$("#booking").html(response);
$("#loadarModal").modal('hide');
}
});
This my booked1.php code:
if (isset($_POST['date'])) {
$date = $_POST['date'];
$query = mysqli_query($conn, "select id as id, concat(fname,' ',lname) as name, date as date, bookingtoken as bookingtoken, inusrance as insurance,
appointment_status as appointment_status from at_booking where date='$date'
");
while ($rows = mysqli_fetch_assoc($query)) {
$name = $rows['name'];
$id = $rows['id'];
$date = $rows['date'];
$bookingtoken = $rows['bookingtoken'];
$insurance = $rows['insurance'];
$appointment = $rows['appointment_status'];
echo '<tr>';
echo "<td>$id</td>";
echo "<td>$name</td>";
echo "<td>$date</td>";
echo "<td>$bookingtoken</td>";
echo "<td>$insurance</td>";
echo "<td>$appointment</td>";
echo '</tr>';
}
}
Iam successfully fetching rows through php and appending response to tbody but data table is not working properly like search is not working and no of entries not working pagination is not displaying i dont knw how to solve this can anyone help me
If you will refer dataTables doc. Then you will find that the data from remote server must be in json format. While you are not sending data in json. That is the issue. You need to change your code as below
$result = array();
while ($rows = mysqli_fetch_assoc($query)) {
$name = $rows['name'];
$id = $rows['id'];
$date = $rows['date'];
$bookingtoken = $rows['bookingtoken'];
$insurance = $rows['insurance'];
$appointment = $rows['appointment_status'];
$result[] = array($name,$id,$date,$bookingtoken,$insurance,appointment);
}
}
echo json_encode(array("data"=>$result));
EDIT
Datatable itself giving you facility for ajax. No need to explicitly add ajax for it. Remove your ajax code and change your datatable initialization to below
$('#open').DataTable( {
"ajax": 'booked1.php'
});
Also you must have same number of th and td(number of columns must be same)
you can try this --- append table using json response :
<?php
if (isset($_POST['date'])) {
$date = $_POST['date'];
$query = mysqli_query($conn, "select id as id, concat(fname,' ',lname) as name, date as date, bookingtoken as bookingtoken, inusrance as insurance,
appointment_status as appointment_status from at_booking where date='$date'
");
$data = [];
$i=0;
while ($rows = mysqli_fetch_array($query)) {
$data[$i]['name'] = $rows['name'];
$data[$i]['id'] = $rows['id'];
$i++;
}
echo json_encode($data);
}
?>
<script>
var date = $("#date").val();
$("#open tbody > tr").remove();
$.ajax({
type: 'POST',
url: 'booked1.php',
dataType : "json",
data: {
date: date
},
cache: false,
dataType: "html",
success: function (response) {
$("#loadarModal").modal('hide');
table = '';
$.each(response,function(indx,obj){
table += '<tr>';
table += '<td>'+ obj.id +'</td>';
table += '<td>'+ obj.name +'</td>';
table += '</tr>';
});
$("tbody#booking").append(table);
}
});
</script>
var table = null;
$(document).ready(function() {
table = $('#example').DataTable();
AddRowsAfterFewSeconds();
});
function AddRowsAfterFewSeconds() {
setTimeout(function() {
var strTR = '<tr>' +
'<td>YYYYY Kelly</td>' +
'<td>Senior Javascript Developer</td>' +
'<td>TTTTTT</td>' +
'<td>22</td>' +
'<td>2012/03/29</td>' +
'<td>$433,060</td>' +
'</tr>' +
'<tr>' +
'<td>SSSSS Kelly</td>' +
'<td>Senior Javascript Developer</td>' +
'<td>BBBBB</td>' +
'<td>15</td>' +
'<td>2012/03/29</td>' +
'<td>$433,060</td>' +
'</tr>';
table.rows().remove();
$(strTR).each(function() {
table.row.add($(this));
});
table.draw();
}, 3000);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Roomus</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
This method dynamically adds rows to the DataTable. (here simply i used the setTimeOut function instead the AJAX response). It will dynamically add rows after '3 seconds'
$(strTR).each(function() {
table.row.add($(this)).draw();
});
simply loops through all the rows after converting the plain html text to 'tr' elements, and then add to the table, and finally redraws the table after adding all rows.
I've seen option to add arrays directly to DataTable. But its not working in my code. So I added them in a loop.
$(document).ready(function () {
$('#booked').DataTable();
});
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="booked">
<thead>
<tr>
<th>Name</th>
<th>SurName</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>SurName</th>
</tr>
</tfoot>
<tbody>
<!-- Your Foreach loop starts here -->
<tr>
<td>Hello</td>
<td>How</td>
</tr>
<tr>
<td>Abc</td>
<td>XYZ</td>
</tr>
<!-- Your Foreach loop endshere -->
</tbody>
</table>
I have a table in which the data is coming from a database, and the table has a lots of <tr> tags. With each <tr> tag I am fixing the "+" sign and want to retrieve the response from Ajax by clicking on to this "+". Can you please tell me how to achieve this using Ajax?
Here is my code of table on which the "+" is coming:
<table id=\"table_$author_id\" width=\"100%\">
<TR bgColor=#F5F5F5>
<TD class=normaltext hight=35 align=center><div id=\"test_$author_id\" class=\"test\" style=\"display:inline\">+</div><div id=\"aid_$author_id\" class=\"aid\" style=\"display:inline\">$author_id</div></TD>
<TD class=normaltext align=left>$author_name</TD>
<TD class=normaltext align=center>Edit</TD>
<TD class=normaltext align=center>Edit</TD>
<TD class=normaltext align=center>Delete</TD>
</TR>
<table>
I tried this code for ajax:
$(document).ready(function() {
$('.test').click(function(){
var URL = 'bangkokbooks/php/admin/author_ajax_detail.php';
console.log(this.id);
var ID = this.id;
var arr= ID.split('_');
var author_id=arr[1];
console.log(author_id);
$.ajax({
type: "POST",
url: "author_ajax_detail.php",
data: "&author_id="+author_id,
success: function(html){
console.log(html);
$('#table_'+author_id).append(html);
}
});
});
});
But by this way my alignment is horribly disturbed.
Now please tell me how can I add the response below the each <tr> tag, or tell me the another way to do it.
Add a class or an ID to your <tr>-tag and use jQuery to append new content to your <tr>. That's the easiest way.
Your html is not correct :
<table id="table_authorId" width="100%">
<TR bgColor='#F5F5F5'>
<TD class='normaltext' height=35 align='center'><div id="test_$author_id" class="test" style="display:inline">+</div><div id="aid_$author_id" class="aid" style="display:inline">$author_id</div></TD>
<TD class=normaltext align=left>$author_name</TD>
<TD class=normaltext align=center>Edit</TD>
<TD class=normaltext align=center>Edit</TD>
<TD class=normaltext align=center>Delete</TD>
</TR>
<table>
Add php quotes as per your requirement. And add following jQuery.ajax success callback :
jQuery.ajax({
........
success: function(response){
......
$('#table_authorId').append("<tr><td colspan =5>"+response+"</td></tr>");
.......................
}
});
Here is an example with constant data : http://jsfiddle.net/aDcQm/1/
Ok, I have a backend system that watches tables update live (made in php) and i'm looking for a method where I can hover over an ID on one table and all the same IDs across tables would highlight also.
I can't have a page with just their ID as the page includes watching other live site data that needs to be watched.
Seeing the HTML you're using would be helpful, but maybe something like (assume the database IDs are in TDs with a class of 'dbid')
(fair warning I did not have time to test this, but it should work or at least convey the idea)
$('td.dbid').hover(function() {
id = $(this).html();
$("td.dbid:contains('" + id + "')").css('background-color','yellow');
},
function () {
id = $(this).html();
$("td.dbid:contains('" + id + "')").css('background-color','none');
});
Sample HTML
<table>
<tr>
<td class="dbid">14</td>
<td>blah</td>
</tr>
<tr>
<td class="dbid">14</td>
<td>blah</td>
</tr>
<tr>
<td class="dbid">13</td>
<td>blah</td>
</tr>
<tr>
<td class="dbid">14</td>
<td>blah</td>
</tr>
<tr>
<td class="dbid">13</td>
<td>blah</td>
</tr>
</table>
Basically I have a table with a bunch of numbers coming from a database with columns for totals/subtotals. I do not intend to add any of the totals to the database, but I need to pass the total numbers from one page to the next. I can't seem to properly pass them as post variables using PHP... I'm wondering if this is a bad tactic firstly, secondly what should I do instead?
And if this is possible, how would I go about doing it? I haven't been able to derive the text between the < td >'s from using $_POST['tdname'].
Example code:
<form method="POST" action="newcivilreport2.php">
<div style="width:800px;text-align:left;margin:0 auto;padding-bottom:5px;">A. PENDING BALANCE</div>
<table border="1" style="width:800px;" ID="tableA">
<th style="width:40%;"></th>
<th style="width:15%;">Civil</th>
<th style="width:15%;">Asbestos</th>
<th style="width:15%;">Domestic</th>
<th style="width:15%;">Total</th>
<tr>
<td>1. Pending Balance from Previous Month</td>
<td id="PendingCivil" name="PendingCivil">66</td>
<td id="PendingAsbestos">0</td>
<td id="PendingDomestic">0</td>
<td id="PendingTotal">0</td>
</tr>
</table>
<input type="submit" value="Save and Continue -->"></form></div>
newcivilreport2.php:
<?php
$_POST['PendingCivil'];
?>
POST will only send inputs like <input type='text|file|hidden|ect' />. Perhaps you would like to use AJAX. For example:
<table id="tData">
<tbody>
<tr>
<td class='dataVal1'>100</td>
...
$(document).ready(function() {
var toServer = {};
var data = $('#tData tbody tr td').each(function(key, value) {
toServer[$(this).attr('id')] = $(this).text();
});
$.ajax({
url: 'page.php',
data: toServer,
type: 'POST'
})
});
The <td> tag of a table does not provide values for a form.
Use a hidden field for your post:
http://www.w3schools.com/tags/att_input_type.asp
...
<td>1. Pending Balance from Previous Month</td>
<td id="PendingCivil">66<input type="hidden" name="PendingCivil" value="66"></td>
...
Also, is it inside of a form?