We Keep Coding

Why i am not able to fetch table data in AJAX ? Everytime i fetch req_id from table it's gives me undefined value in Console.log

I want to take req_id but everytime i fetch req_id from table it's gives me undefined in Console.log().Please see in table data req_id and yes the databse connection is okay i can see the value.I tried this both GET and POST method but still i get the same error.All i want is fetch req_id and show it in console.log as defined value
Thank You
<!-- main -->
<section class="pad-70">
<div class="container">
<p id="demo"></p>
<?php
$userQuery = $connection->Show($conobj, "requested_car");
if ($userQuery->num_rows > 0) {
echo "<table><tr><th>Req ID</th><th>Action</th></tr>";
// output data of each row
while ($row = $userQuery->fetch_assoc()) {
echo "<tr ><td id=req_id>";
echo (htmlentities($row['req_id']));
echo ("</td><td>");
echo ('<button onclick="confirmcar()" class="btn btn-lg btn-success">Confirm</button> <button onclick="MyAjaxFunc()" class="btn btn-lg btn-danger">Cancel</button>');
echo ("</td></tr>\n");
}
echo "</table>";
} else {
echo "0 results";
}
$connection->CloseCon($conobj);
?>
</div>
</section>
<!-- main -->
<script>
function confirmcar() {
var req_id = document.getElementById("req_id").value;
console.log(req_id);
}
</script>

So, going from your last edit, I removed the PHP and tried to simulate the HTML that would be generated with several rows.
Now several points remained:
You have missing quotes around your attribute value req_id, as in id="req_id". (Not a real issue as #Quentin pointed out on another answer, but let's keep things tidy for the sake of our eyes)
You're setting event handlers using on... html attributes, which is bad practice. Doing it with js addEventListener will help a lot solving your problem as you'll see below.
One of your problems is that you don't set a different id at each row for your <td>. If your ids are repeated, it probably means you should use a class instead. And setting different ids could have eased the process of selecting the right one on click. But it's not fatal so we'll go from here.
The code snippet below illustrates how you should proceed to get the value which is the inner text of the <td> with id "req_id" on the table row where the "Confirm" button was clicked:
Add an event listener for each of these buttons, and when a button's clicked:
climb up the DOM until you hit its parent <tr>
within this row, find the <td id="req_id"> by its id
read its innerText property
//When the DOM is fully loaded
window.addEventListener('DOMContentLoaded', _e => {
//Find all buttons with class btn-success
const buts = document.querySelectorAll('.btn-success');
//Add a click handler to each one
buts.forEach(button => {
//When the button's clicked
button.addEventListener('click', e => {
//Find parent <tr>
const tr = button.closest('tr');
//Find child with id req_id and get its text
const val = tr.querySelector('#req_id').innerText;
console.log(val);
});
});
});
<section class="pad-70">
<div class="container">
<p id="demo"></p>
<table>
<tr>
<th>Req ID</th><th>Action</th>
</tr>
<tr>
<td id="req_id">My Value 1</td>
<td>
<button class="btn btn-lg btn-success">Confirm</button>
<button class="btn btn-lg btn-danger">Cancel</button>
</td>
</tr>
<tr>
<td id="req_id">My Value 2</td>
<td>
<button class="btn btn-lg btn-success">Confirm</button>
<button class="btn btn-lg btn-danger">Cancel</button>
</td>
</tr>
<tr><td colspan="100">...</td></tr>
</table>
</div>
</section>
I'm using event window.DOMContentLoaded in order for my script to fire only after the DOM has been fully parsed from HTML. Else the buttons would not exist yet when trying to assign event handlers to them.

Target and clone specific table cell, Append from top to bottom of second table

I am in trouble, I've tried to no avail to do something I'm sure is simple to most seasoned developers.
As you can see, a plus button resides in each table row.
I want to achieve a two table system where I click the plus button on the table to the left transferring the player in the left table to the right table without deleting the player in the row. The subsequent clicks of any plus button should take the player from the row in which it was clicked and fill in the next open row of the table on the right, starting from top. The click of the plus button should disable this row from being picked again, and the minus button on the right table should remove the player and restore his active status on the left table. When the table is filled up I'm trying to have the ability to add players come back with a "table is full" alert. That seems easy enough, but I've been researching this and this is what I came up with. This feels like a jquery solution to me, but I can't even get started on it. I did the best I could below. For reference think of how fanduel.com does their two table drafting system.
$(document).ready( function() {
$('.addplayer').click(function (event) {
$('tr .select').eq(0).clone().appendTo("tr .selected").after();
});
$(".remove-player").click(function (event) {
$(".selected").remove();
});
});
tr:nth-child(even) {
background-color: #e3e3e3;
color:black;
}
tr:nth-child(odd) {
background-color:black;
}
table {
border: #5a5a5a medium solid;
width: 300px;
color:white;
}
input {
cursor: pointer;
}
th {
color:white;
background-color:black;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="left-table">
<th>Player</th>
<th>add</th>
<tr>
<td class="select">Player1</td>
<td>
<input type="button" value="+" class="addplayer" />
</td>
</tr>
<tr>
<td class="select">Player2</td>
<td>
<input type="button" value="+" class="addplayer" />
</td>
</tr>
<tr>
<td class="select">Player3</td>
<td>
<input type="button" value="+" class="addplayer" />
</td>
</tr>
<tr>
<td class="select">Player4</td>
<td>
<input type="button" value="+" class="addplayer" />
</td>
</tr>
</table>
<table class="right-table">
<th>Player</th>
<th>Remove</th>
<tr>
<td class="selected"></td>
<td>
<input type="button" value="-" class="remove-player" />
</td>
</tr>
<tr>
<td class="selected"></td>
<td>
<input type="button" value="-" class="remove-player" />
</td>
</tr>
</table>

You migth want to try this:
$(document).ready( function() {
$('.right-table tr .selected').addClass('empty');
$('.addplayer').click(function (event) {
if($(".right-table tr .empty").length <= 0) {
alert("Table is full");
return;
}
var txt = $(this).closest("tr").find('.select').text();
$(".right-table tr .empty").eq(0).text(txt);
$(".right-table tr .empty").eq(0).attr("data-row",$(this).closest("tr").index());
$(".right-table tr .empty").eq(0).removeClass('empty');
$(this).attr('disabled', true);
});
$(".remove-player").click(function (event) {
var index = $(this).closest("tr").find('.selected').attr('data-row');
$(this).closest("tr").find('.selected').text("");
$(this).closest("tr").find('.selected').addClass("empty");
$('.left-table tr').eq(index).find('.addplayer').attr('disabled', false);
});
});
To run it you may visit it here: https://fiddle.jshell.net/dgu80ajz/5/

Use the following code
$(document).ready(function () {
$('.addplayer').click(function (event) {
var $player_row = $(this).closest('tr');
var $new_row = $player_row.clone();
$new_row.find('.addplayer').addClass('remove-player').removeClass('addplayer').val('-')
$new_row.data('row_num', $('.left-table').find('tr').index($player_row));
$('.right-table').find('tbody').append($new_row);
$player_row.find('.addplayer').attr('disabled', 'disabled');
});
$(".right-table").on('click', '.remove-player', function (event) {
var $row = $(this).closest('tr');
$('.left-table').find('tr').eq($row.data('row_num')).find('.addplayer').attr('disabled', false)
$row.remove();
});
});
You are basically cloning the row that the button is contained in and then putting it in your second table with a reference that can be used to delete it.
Notice the event handler for the remove-player class is a delegate event because you want to bind to the .remove-player buttons that do not yet exist in the right table.
https://jsfiddle.net/67g2cb8m/4/
for a working example

jQuery get parent Element and hide it

Hey all I am trying to get the element from the HTML below:
<tr role="row" class="odd">
<td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
<td>test22</td>
<td>
<button id="deleteButton" onclick="deleteHit(this);" type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed">Delete Record</button>
</td>
</tr>
The jQuery code I have tried:
$("td[data-uid='" + uid + "']").parent().prev().fadeOut('slow');
The uid has the number 408bd653-c1bf value.
So I am not sure why its not finding the previous TR parent.

I think you should add a class to each button if you want to have many of them, not an id.
Like this:
<tr role="row" class="odd">
<td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
<td>test22</td>
<td>
<button type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed deleteButton">Delete Record</button>
</td>
</tr>
Then the JQuery:
$(".deleteButton").click(function(){
var parent = $(this).closest("tr");
$(parent).fadeOut(function(){
$(this).remove();
});
});
JSFiddle
EDIT:
If you want the previous tr to be deleted, try this:
$(".deleteButton").click(function(){
var parent = $(this).closest("tr").prev("tr");
$(parent).fadeOut(function(){
$(this).remove();
});
});
JSFiddle

You can pass a selector to the parent method, something like this:
$("td[data-uid='" + uid + "']").parent("tr").prev().fadeOut('slow');

Try this to hide parent tr element:
function deleteHit(el){
$(el).closest('tr').fadeOut('slow');
}
Or to hide previous tr element:
function deleteHit(el){
$(el).closest('tr').prev().fadeOut('slow');
}
NOTE, when using onclick attribute, you're passing this (clicked button) to the method. You should then add the button as argument (el) in your method, as shown above deleteHit(el)

There is no previous td. If your table looks like this:
<table>
<tr></tr> <!--- This gets hidden -->
<tr role="row" class="odd">
<td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
<td>test22</td>
<td>
<button id="deleteButton" onclick="deleteHit(this);" type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed">Delete Record</button>
</td>
</tr>
</table>
Because:
$("td[data-uid='" + uid + "']") selects <td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
.parent() selects <tr role="row" class="odd">
.prev() selects the previous element, which either is the previous <tr> or if there isn't a previous row is nothing at all.
If you want to fade out the current row (that the delete button is in) you would do this:
function deleteHit(el){
$(el).closest("tr").fadeOut('slow');
}
Now there's a much nicer way of doing this. Change your button definition to have a class (since you'll have more of them and you're only allowed one id on the whole page):
<button data-uid="408bd653-c1bf" type="button" class="btn btn-danger btn-embossed js-delete">Delete Record</button>
<script>
$(".js-delete").click(function(){
$(this).closest("tr").fadeOut("slow", function(){
// Remove the element from the DOM when the animation is done.
$(this).remove();
});
});
</script>

How to find the row number in which button is clicked in jquery?

I have a table in which there is a button in the last column called issue. In each row, when I click the button I want it to call an ajax function that gets a certain value from the server. The value from the server will vary based on the row chosen. The current code I have is as follows
var $dntb = $("#dntb");
$dntb.on("focusin", function() {
var i //have to get the row where the button is clicked
$("#iss" + i).click(function(event) {
var sditmId = $("#sditm").val();
var sdhedId = $("#sdhed").val();
$.get('getstock', {
sditmId: sditmId,
sdhedId: sdhedId
}, function(response) {
$("#stk").val(response);
});
});
});
Please tell me how to find the value of 'i' in the above code, if this is wrong please tell me the correct method
The table is given below
<table class="table table-bordered table-striped table-hover" id="dntb">
<thead>
<th><strong>Sales Order Number</strong></th>
<th><strong>Reference Order</strong></th>
<th><strong>Order Item</strong></th>
<th><strong>Quantity</strong></th>
<th><strong>Transport Time</strong></th>
<th><strong>Mode of Shipment</strong></th>
<th><strong>Delivery Date</strong></th>
<th><strong>Actions</strong></th>
</thead>
<jsp:useBean id="gen" scope="request" class="Common.General"/>
<tbody>
<c:set var="i" value="0"/>
<c:forEach items="${dlv.allDeliveryDetails}" var="row">
<tr>
<td>${row.sdhedIdDn}</td>
<td>${row.sdhedDn}</td>
<td>${row.sditmDn} - ${row.prdDn}</td>
<td>${row.qtyDn}</td>
<td>${row.trntmDn}</td>
<td>${row.mshDn}</td>
<td>${row.datDn}</td>
<td>
<button type="button" class="btn btn-default btn-sm btn-primary" data-toggle="modal" data-target="#myModal" onclick="setData('${row.sdconDn}', '${row.sdhedIdDn}', '${row.sditmDn}', '${row.sdconIdDn}')" id="iss">
<span class="glyphicon glyphicon-download"></span> Issue
</button>
</td>
</tr>
<c:set var="i" value="${i+1}"/>
</c:forEach>
</tbody>
<tfoot>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tfoot>
</table>

This might help u mate .. :)
Note:Jquery version >=1.7
$('body').on('click', 'button', function(event) {
var rowindex = $(this).closest('tr').index();
console.debug('Index', rowindex);
});
FYI
index()

Add a class to the button in table row and bind the button as shown below:-
$(".btnClass").click(function() {
$(this).closest("tr");
// anything you want to do
return false;
});

try this.. ( use class instead id because id is unique )
$('table').on('click','button',function(){
$( this ).closest('tr').find('.field1').val('bind value for field one.!');
$( this ).closest('tr').find('.field2').val('bind value for field two.!');
});
u can also use
$('.button').click(function(){
$( this ).closest('tr').find('.field1').val('bind value for field one.!');
$( this ).closest('tr').find('.field2').val('bind value for field two.!');
});
but click method won't work if your DOM inserted After Loading Page.
SEE DEMO

jquery cloned button action not working

i have a table with add/remove buttons, those buttons add and remove rows from the table, the buttons are also added with each new row
here what i have as html
<table>
<tr>
<th>catalogue</th>
<th>date</th>
<th>add</th>
<th>remove</th>
</tr>
<- target row ->
<tr id="cat_row">
<td>something</td>
<td>something</td>
<td><input id="Add" type="button" value="Add" /></td>
<td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</- target row ->
</table>
JavaScript:
$("#Add").click(function() {
$('#cat_row').after('<- target row with ->'); // this is only a notation to prevent repeatation
id++;
});
$("#Remove").click(function() {
$('#cat_'+id+'_row').remove();
id--;
});
Please note that after each addation of a new row the id is also changed for example here after clicking the button "Add" 1 time
<table>
<tr>
<th>catalogue</th>
<th>date</th>
<th>add</th>
<th>remove</th>
</tr>
<tr id="cat_row">
<td>something</td>
<td>something</td>
<td><input id="Add" type="button" value="Add" /></td>
<td><input id="Remove" type="button" value="Remove" /></td>
</tr>
<tr id="cat_1_row">
<td>something</td>
<td>something</td>
<td><input id="Add" type="button" value="Add" /></td>
<td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</table>
now the new added Buttons has no actions i must always click on the original buttons - add/remove
after this i want to make the Remove Button removes ONLY the row where it is clicked on
for example if i click the button in row 2, row 2 will be deleted
Info:
I use web2py 2.2.1 with python 2.7 with the last version of jQuery

I think it would be better instead of:
$('#cat_'+id+_row').remove();
Do this in your onclick event:
$(this).parent().parent().remove();

You can't have two buttons with the same id (you're using duplicates for both "Add" and "Remove"). id values must be unique on the page.
You might look at using a class instead, and also look at event delegation. For instance, assuming this is the only table on your page (if not, just make the selector more specific), if you change your buttons to have classes "add-btn" and "remove-btn" instead of id values, then you can use delegate:
$("table").delegate(".add-btn", "click", function() {
// An add button was pressed, you can find out which
// row like this:
var row = $(this).closest('tr');
});
...and similarly for the .remove-btn button.
Alternately, some prefer to use on (note the order of arguments is slightly different):
$("table").on("click", ".add-btn", function() {
// An add button was pressed, you can find out which
// row like this:
var row = $(this).closest('tr');
});
Which you use is currently a matter of style. I prefer delegate for clarity, but the jQuery team love to hyper-overload their functions. So far they haven't deprecated delegate, though they do call it "superceded."