How to append ajax response into <tr> - php

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/

Related

ajax delete not working with onclick event

i need some help please i spent forever just searching and trying to know why nothing is happening when i click that button
html:
<td></td>
<td></td>
<td></td>
<td><button id="<?php echo($row['ID']); ?>" onClick="delord()" class="del" style="font-size: 12">delete</button></td>
jquery:
function delord(){
var x = event.target.id;
$.ajax({
url: 'delorder.php?id=' + x,
success: function(){
alert('deleted');
}
});
}
i tried to type alert(x); inside my jquery code and it returned the value
then i tried to go to "delorder.php?id=335" and the row has deleted successfully
just when i try it with ajax its not working
A cross platoform way is to pass the event object in the onclick method like this
onclick="delord(event)"
then register the function as
function delord(e){
e = e || window.event;
var target = e.target;
var id = target.getAttribute('id')
}
e will be the event and then your can grab the target element button
Do these
<table>
<thead>
<tr>
<td>Name</td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td>Stephen</td>
<td><button onclick="deleteRow('delete',<?php echo($row['ID']); ?>)">Delete</button></td>
</tr>
</tbody>
</table>
jQuery:
function deleteRow(action,id){
$.ajax({
url: 'delorder.php?id=' + id,
success: function(){
alert('deleted');
}
});
}

How to get selected td value

I have a table with the image and image code data, show on code below:
<table id="tblForklift" cellpadding="5" cellspacing="0">
<tbody>
<tr id="image_info">
<td id="1W 1111">
<img src="../Client/images/forklift/corpus-christi-forklifts1.jpg" width="210px" height="210px"/>
<p style="text-align: center;">1W 1111</p>
</td>
<td id="2W 2222"></td>
<td id="3W 3333"></td>
</tr>
<tr id="image_info"></tr>
<tr id="image_info"></tr>
<tr id="image_info"></tr>
</tbody>
</table>
I tried using this code to get the html of selected td of the table. But it show "undefined".
$('#tblForklift').on('click', function(e) {
var forkliftCode = $('this').closest('tr').find('td').html();
alert(forkliftCode)
});
Since #tblForklift will match your table. You need to target td elements inside this table instead. Also if your elements has been added dynamically to the DOM, you can use event delegation:
$(document).on('click', '#tblForklift tr td', function(e) {
var forkliftCode = $(this).html();
alert(forkliftCode)
});
or better if your table is not added dynamically:
$('#tblForklift').on('click', 'tr td', function(e) {
var forkliftCode = $(this).html();
alert(forkliftCode)
});
Also some of your td are missing closing </td>
Add event to the td. so in each td click you can get html.
$('#tblForklift td').on('click',function(e) {
alert($( this ).html());
});
demo
id must be unique use class like,
HTML
<table id="tblForklift" cellpadding="5" cellspacing="0">
<tbody>
<tr class="image_info">
<td class="1W 1111 forklift">
<img src="../Client/images/forklift/corpus-christi-forklifts1.jpg" width="210px" height="210px"/>
<p style="text-align: center;">1W 1111</p>
</td>
<td class="2W 2222"></td>
<td class="3W 3333"></td>
</tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
</tbody>
</table>
SCRIPT
$('.forklift').on('click', function(e) { // using class for multiple tds
var forkliftCode = $(this).find('p').text();
alert(forkliftCode);
});
Also, never give a space in a id, space has a different meaning in jquery selectors
Live Demo
HTML:
<td class="2W 2222">cvbcxbcvb</td>
<td class="3W 3333">bcvbcvbnvnv</td>
</tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
<tr class="image_info"></tr>
</tbody>
</table>
jQuery:
$('#tblForklift td').click(function() {
alert($(this).html());
});

Jquery doesnt work after loading content via ajax

I am new with java script. The code I have for deleting table row works fine when table already exists in the page but it doesnt work if I load table from another page by ajax call.. please help me to solve this.. java script is here
$(document).ready(function()
{
$('table#delTable td a.delete').click(function()
{
if (confirm("Are you sure you want to delete this row?"))
{
var id = $(this).parent().parent().attr('id');
var data = 'id=' + id ;
var parent = $(this).parent().parent();
$.ajax(
{
type: "POST",
url: "delete_row.php",
data: data,
cache: false,
success: function()
{
parent.fadeOut('slow', function() {$(this).remove();});
}
});
}
});
// style the table with alternate colors
// sets specified color for every odd row
$('table#delTable tr:odd').css('background',' #FFFFFF');
});
html code
<table id="delTable">
<tr id="ripon">
<td align="left">Ipsum</td>
<td align="center">19</td>
<td align="center">17</td>
<td align="center"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></td>
</tr>
<tr id="rukon">
<td align="left">Dolor</td>
<td align="center">55</td>
<td align="center">12</td>
<td align="center"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></td>
</tr>
<tr id="sumon">
<td align="left">Sit</td>
<td align="center">11</td>
<td align="center">18</td>
<td align="center"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></td>
</tr>
<tr id="mamun">
<td align="left">Amet</td>
<td align="center">29</td>
<td align="center">27</td>
<td align="center"><img alt="" align="absmiddle" border="0" src="img/delete.png" /></td>
</tr>
The easiest solution for this is to use "Delegated Events".
For more information, see jQuery's on docs.
$("body").on("click", "table#delTable td a.delete", function(event){
// insert your code here
});
Note: while I called on on body, you can call it on something "closer" to the table, if it's going to be there when the page loads (or more specifically, when you make the on call).

jQuery checkbox table row highlight doesn't work with AJAX

I have a functional use website (not for public use, just a website that provides a means to an end) in which I have a table that is being populated/updated every 5 seconds through an AJAX call to my database.
What I want to happen is that when I click on a checkbox (which is in one of the cells of my table), it adds a class to that row. except it just does not like the fact the data is coming from AJAX, I have tried putting a sample static table in, and that works fine, but the same information as an AJAX table just does nothing.
I checked this link and that didn't respond to my actions either, the JS code I have provided below is the one I have been using which worked on the static table
JS/AJAX
<script>
function getMessage(){
var xmlhttp;
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var res = xmlhttp.responseText;
$('#message tr:first').after(res);
}
}
xmlhttp.open("GET","ajax/message.php",true);
xmlhttp.send();
};
</script>
JS Code I have been using to highlight
$(document).ready(function() {
$('#lectern_message tr')
.filter(':has(:checkbox:checked)')
.addClass('selected')
.end()
.click(function(event) {
$(this).toggleClass('viewing');
if (event.target.type !== 'checkbox') {
$(':checkbox', this).attr('checked', function() {
return !this.checked;
});
}
});
});
Example Table through AJAX
<table id="message" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>Speaker</th>
<th>Question</th>
<th>Time</th>
<th>View</th>
</tr>
<td class="name">Mr A</td>
<td class="message">Hi</td>
<td class="date">11:14:12</td>
<td class="view"><input type="checkbox" value="no"></td>
</tr>
<tr>
<td class="name">Mr B</td>
<td class="message">Hello</td>
<td class="date">10:32:36</td>
<td class="view"><input type="checkbox" value="no"></td>
</tr>
<tr>
<td class="name">Mr C</td>
<td class="message">Question</td>
<td class="date">10:32:18</td>
<td class="view"><input type="checkbox" value="no"></td>
</tr>
<tr>
<td class="name">Mr D</td>
<td class="message">Hi</td>
<td class="date">10:30:53</td>
<td class="view"><input type="checkbox" value="no"></td>
</tr>
</tbody>
</table>
Sorry for the massive amounts of code, thought I would provide the key parts, the message.php file that is mentioned is just a call to retrieve all the records from my database, but that part of it works fine. If anyone can give me a hand that would be a massive help, many thanks
click() will be bind to the elements which are all present when the time of loading. and note that if you want to use click() for dynamically added elements, you have to go for live() or on() method of jQuery... so you have to change ur code to
$(document).ready(function() {
$('#lectern_message tr')
.filter(':has(:checkbox:checked)')
.addClass('selected')
.end()
.live('click', function(event) {
$(this).toggleClass('viewing');
if (event.target.type !== 'checkbox') {
$(':checkbox', this).attr('checked', function() {
return !this.checked;
});
}
});
});
for more examples pls see here

how to add a dynamic param

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

Categories