Jquery doesnt work after loading content via ajax - php

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).

Related

mouseover shows raw html data and trigger infinite time

I have a tree structure where on hover of the user image it should show some of other user related info but instead of show that info in proper div, its show raw HTML data.
HTML Code
there can be n number of a href
<a href="{{ route('user-binary-tree',[ 'eUserID' => $ERight12]) }}" class="bt-element binary-tree-on-hover" id="{{$ERight12}}">
<img class="rounded-circle" style="width: 50px" src="{{ asset($packageImg) }}">
{{ $Right12[0]->sponsor_code }}
</a>
JavaScript code
$('.binary-tree-on-hover').mouseover(function() {
var userId = this.id;
var $this = $(this);
$.ajax('/binary-tree-ajax/' + userId + '/html', {
method: "GET",
dataType: "html",
success: function(data) {
$this.attr('title', data).mouseover(); //HTML DATA SHOW IN HOVER
}
});
});
Ajax response is
<div class="bt-details">
<table class="table color-table inverse-table">
<thead>
<tr>
<td class="text-center" style="font-size: 100%">Chethan k Test</td>
<td class="text-center" style="font-size: 100%"></td>
<td class="text-center">
<span class="btn btn-danger btn-xs btn-outline" style="border-width: 2px;">Inactive</span>
</td>
</tr>
<tr>
<td class="text-center" style="font-size: 100%">Sponsor ID</td>
<td class="text-center" style="font-size: 100%" colspan="2">UNO187175</td>
</tr>
<tr>
<td class="text-center" style="font-size: 100%">Binary Qualified</td>
<td class="text-center" style="font-size: 100%" colspan="2">
<span class="btn btn-danger btn-xs btn-outline" style="border-width: 2px;">No</span>
</td>
</tr>
<tr>
<th width="40%" class="text-center">Position</th>
<td class="text-center" style="font-size: 95%">Left</td>
<td class="text-center" style="font-size: 95%">Right</td>
</tr>
</thead>
<tbody>
<tr>
<th width="40%" class="text-center">Downline</th>
<td class="text-center">39</td>
<td class="text-center">6</td>
</tr>
<tr>
<th width="40%" class="text-center">Business</th>
<td class="text-center">$0</td>
<td class="text-center">$0</td>
</tr>
<tr>
<th width="40%" class="text-center">Carry</th>
<td class="text-center">$0</td>
<td class="text-center">$0</td>
</tr>
<tr>
<th width="40%" class="text-center" rowspan="2">Binary Generated</th>
<td class="text-center" style="font-size: 95%">Last Day</td>
<td class="text-center" style="font-size: 95%">Till Date</td>
</tr>
<tr>
<td class="text-center">$0</td>
<td class="text-center">$</td>
</tr>
</tbody>
</table>
When i hover on any of the user image its shows row HTML data instead of proper div as seen in 1st image
Also its keep calling the Ajax request infinite times but when i remove $this.attr('title', data).mouseover(); its called Ajax request only once. so i think the infinite calling happening because of this line only.
here how its shows
but i want to show like this
Note : 2nd one is working but its not ajax call and it will fetch all the user info from controller and load on view hence when user increase it will slow down the page so i am trying to call ajax on hover of the image.
End up with using popover function
HTML Code
<div id="popover_html" style="display:none;">
hover_data
</div>
JavaScript Code
jQuery('.binary-tree-on-hover').popover({
title: popoverContent,
html: true,
placement: 'bottom',
trigger: 'hover'
});
function popoverContent() {
var content = '';
var element = $(this);
var id = element.attr("id");
var APP_URL = "{{ url('/')}}";
const adminRoutePrefix = $("#admin_route_prefix").text();
$.ajax({
url: APP_URL + '/' + adminRoutePrefix + '/networks/binary-tree-ajax/' + id + '/html',
method: "GET",
async: false,
// dataType: "HTML",
success: function(data) {
content = $("#popover_html").html();
content = content.replace(/hover_data/g, data);
}
});
return content;
}

jquery function not working on multiple rows

I have a table generated by jQuery, and a function that triggers an event when pressing ENTER.
The table generates correctly, but the function only works in the first wor of the table.
My html for the table is as follows:
<table border="1" id="PlantillaTable" name="PlantillaTable">
<tbody>
<tr>
<th rowspan="2" scope="col">Cargo</th>
<th colspan="12" scope="col">Escenario de Registro</th>
</tr>
<tr>
<td colspan="2">Folio</td>
<td colspan="2">Propietario</td>
<td >Grupo</td>
<td >Edad</td>
<td colspan="2">Folio</td>
<td colspan="2">Suplente</td>
<td >Grupo</td>
<td >Edad</td>
</tr>
<tr id="FilaTable">
<th scope="row" col="1" row="1">Cargo</th>
<td col="2" row="1">LISTA</td>
<td col="3" row="1">
<input type="text" id="AspiranteField" name="AspiranteField" placeholder="FOLIO" />
</td>
<td col="4" row="1">FOTO</td>
<td col="5" row="1">NOMBRE</td>
<td col="6" row="1">GRUPO</td>
<td col="7" row="1">EDAD</td>
<td col="8" row="1">LISTA</td>
<td col="9" row="1">
<input type="text" id="AspiranteField" name="AspiranteField" placeholder="FOLIO" />
</td>
<td col="10" row="1">FOTO</td>
<td col="11" row="1">NOMBRE</td>
<td col="12" row="1">GRUPO</td>
<td col="13" row="1">EDAD</td>
</tr>
</tbody>
And my function is as follows:
$.fn.pressEnter = function(fn) {
return this.each(function() {
$(this).bind('enterPress', fn);
$(this).keyup(function(e){
if(e.keyCode == 13)
{
$(this).trigger("enterPress");
}
})
});
};
$('input').pressEnter(function(){
var trid = ($(this).closest('tr').attr('id'));
var opcion = ($(this).closest('td').index());
var valor = $(this).val();
$.getJSON("php/getAspiranteNombre.php?AspiranteId="+valor,function(data){
$.each(data,function(index,item) {
if(opcion < 4)
{
$("#"+trid+" td").eq(3).html('<p>'+item.NAME+'</p>');
$("#"+trid+" td").eq(4).html('<p>'+item.GRUPO+'</p>');
$.getJSON("php/getFoto.php?AspiranteId="+valor,function(data2){
$("#"+trid+" td").eq(2).html('<img src="aspiranteFoto/thumb_'+data2+'" width="50px" height="50px"/>');
});
$.getJSON("php/getEdad.php?Nacimiento="+item.EDAD,function(data3){
$("#"+trid+" td").eq(5).html('<p>'+data3+'</p>');
});
}
else
{
$("#"+trid+" td").eq(9).html('<p>'+item.NAME+'</p>');
$("#"+trid+" td").eq(10).html('<p>'+item.GRUPO+'</p>');
$.getJSON("php/getFoto.php?AspiranteId="+valor,function(data2){
$("#"+trid+" td").eq(8).html('<img src="aspiranteFoto/thumb_'+data2+'" width="50px" height="50px"/>');
});
$.getJSON("php/getEdad.php?Nacimiento="+item.EDAD,function(data3){
$("#"+trid+" td").eq(11).html('<p>'+data3+'</p>');
});
}
});
});
})
Which basically asks for a value in a database and places it in the spaces. The problem is that, in the first row of the table (dynamically generated) the function works perfectly, but in the subsequent rows it doesn't do anything.
Thanks in advance for your help!
You have to change the way to this one:
$("#PlantillaTable").find("input").keyup(function(ev) {
if (ev.which === 13 ) {
//yout code here...
}
});
Attaches to all input values inside this table the enter button handler.
http://jsfiddle.net/csdtesting/jkfL2v5s/
You first have to loop through each tr separately, then you can target the td's inside.
You can loop through the rows using $.each() like this:
$("table tr").each(function(i,v){
$(this).find("td:eq(3)").html('<p>'+item.NAME+'</p>');
....
});
and it will go through all your rows, not just the first one.

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 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 append ajax response into <tr>

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/

Categories