tbody not allowing click - php

I wrote this up quickly because I am having problems with it. I apologize if the code looks messy. Is tbody not clickable? There is no alert, and I don't see any obvious errors
relevant php
echo '<table>';
while ($row = mysql_fetch_array($result)) {
echo
'<tbody class = "reserveAPickupAppointmentRoommateAppointment"
id = "reserveAPickupAppointmentRoommateAppointment">
<tr>
<td>'
.$row["name"].
'</td>
<td>
<span class = "reserveAPickupAppointmentLocaton"
id="reserveAPickupAppointmentLocaton">'
.$row["location"].
'</span>
</td>
<td>
<span class = "reserveAPickupAppointmentSubLocaton"
id="reserveAPickupAppointmentSubLocaton">'
.$row["subLocation"].
'</span>
</td>
</tr>
<tr>
<td>
<span class = "reserveAPickupAppointmentStartTime"
id="reserveAPickupAppointmentStartTime">'
.$row["startTime"].
'</span> -
<span class = "reserveAPickupAppointmentEndTime"
id="reserveAPickupAppointmentEndTime">'
.$row["endTime"].
'</span>
</td>
<td>
<span class = "reserveAPickupAppointmentDate"
id="reserveAPickupAppointmentDate">'
.$row["date"].
'</span>
</td>
</tr>
</tbody>';
}
echo '</table>';
jquery included in my document ready functon
$("#reserveAPickupAppointmentRoommateAppointment").click (function() {
alert ("TEST");
});

The fact that your ID matches your class frightens be a bit. I don't know php, but it seems from the while that you're creating more than one tbody in a loop.
This means that you'd have more than one element with the ID reserveAPickupAppointmentRoommateAppointment. If so it is invalid, and very likely that only the first one will be matched by the selector.
To answer your question directly, yes a tbody can have a handler` as long as you allow the event to bubble up to it.
http://jsfiddle.net/hEw54/
Not knowing the rest of your code, I'd guess that you want the ID on the table, and then to select all tbody elements below it.
$(document).ready(function() {
$('#reserveAPickupAppointmentRoommateAppointment tbody').click(function() {
alert ("TEST");
});
});
Or you could just select directly by class:
$(function() {
$('.reserveAPickupAppointmentRoommateAppointment').click(function() {
alert ("TEST");
});
});
I updated the code above to be placed in a jQuery DOM ready handler. You'll notice that the two examples are slightly different. They're essentially identical, the second being a shortcut for the first. There are other minor differences, but nothing to be concerned with here.
Also note that some people mistake the following for DOM ready code:
(function() {
// I'm not a DOM ready construct
})();

you can't use onclick with a TABLE, TBODY or a TR, but you can attach it to the TD with the jQuery child selector

Related

Hide table rows one by one when click them using jQuery

I have usual sql scenario with php (mysqli_fetch_assoc) and create table. I want to hide rows randomly when i click on them. I may also need to delete them from the database at the same time, because this file is calling from another with ajax every 5 sec. and hiding is not enough because after calling the rows appear again.. :) I'm no sure that this is the best solution but I'm learning now.
I'm trying something like this it's working, but i can hide only last row. I want hide every row randomly :)
jQuery().ready(function(){
$( "#trow" ).click(function() {
$( "#trow" ).hide()
});
});
<?php while ($row = mysqli_fetch_assoc($result_down)):
$datetime = $row['datetime'];
$device = $row['host'];
$message = $row['msg'];
?>
<tbody>
<tr id="trow">
<td id="device"><?php echo $datetime;?></td>
<td id="datatime"><?php echo $device;?></td>
< td id="message"><?php echo $message;?></td>
</tr>
</tbody>
<?php endwhile;?>
Try to change the trow from an id to a class name
<tbody>
<tr class="trow">
<td id="device"><?php echo $datetime;?></td>
<td id="datatime"><?php echo $device;?></td>
<td id="message"><?php echo $message;?></td>
</tr>
And in the JQuery side, call the click event on the class and not the id this time. The $(this) means the clicked element.
jQuery().ready(function(){
$( ".trow" ).click(function() {
$( this ).hide()
});
});
Simply hiding rows after a click can be done like this:
(function () {
$('table tr').click(function() {
$(this).hide();
});
})();

jQuery toggle divs and hide divs

I need some help, i have a forum page and i cant get the toggle part to work
Here is the code:
<script type="text/javascript">
$(document).ready(function() {
$(".button").click(function(event) {
$("#div").hide();
var tmp = ($("#div" + $(this).attr("target")).is(":visible") ? false : true)
if (tmp) $("#div" + $(this).attr("target")).toggle();
});
});
</script>
<h2>Forum</h2>
<table cellspacing="0" cellpadding="0" width="100%" class="table">
<tr style="background: #f2f2f2;"><td><strong>Name</strong></td><td></td></tr>
<tr style="display:none;" id="divDynamicID"><td> NAME</td><td align="right" width="40"><img src="../img/pencil.png"> <img src="../img/delete.png"></td></tr>';
<tr class="Test"><td> Name</td><td align="right" width="40"><img src="../img/pencil.png" class="button" target="dynamicID"> <img src="../img/delete.png"></td></tr>';
When you click the .button i want it to hide all open divs and just open that one you click at, but at this time i only get the show part to work not the not show part.
In your jQuery code I found code with #div, but could not find div with id div in HTML code. # will only be used with id of the HTML control
Whereas div is the selector used for HTML controls
I'm not very sure about your question. If I've understood properly I'd say two things. First, you can have a local variable for the tr id which you want to display. I guess the id is the value of the target attribute for button class with "div" prefixed. And secondly, you can have a class for each of the rows so that you can hide them all when needed.
echo '<tr style="display:none;" id="div'.$obj->boardID.'"><td> '.$obj->name.'</td><td align="right" width="40"><img src="../img/pencil.png"> <img src="../img/delete.png"></td></tr>';
echo '<tr class="Test"><td> '.$obj->name.'</td><td align="right" width="40"><img src="../img/pencil.png" class="button" target="'.$obj->boardID.'"> <img src="../img/delete.png"></td></tr>';
In the abodes, I put a class trClass. You can change it to whatever you feel contextual to your code.
$(".button").click(function(event) {
$('.trClass').hide();
var trId="div"+$(this).attr("target");
var tmp = $("#" + trId).is(":visible");
if (tmp) $("#" + trId).show();
});

jquery slideToggle looped divs independently

I'm having problems with my slideToggle function in jquery when I use divs created in a loop.
When I press one of the buttons I want it to show the corresponding div instead of all the divs underneath all the buttons.
This is my css:
<style>
.toggle { display:none;}
p { width:400px; }
</style>
Here is my loop with button and div
<?php
include('sql.php');
$i = 0;
while ($i < count($rows)) {
echo "
<button class='trigger'>
<table width='100%'>
<tr>
<td width='20%'><img src='http://localhost/app-side/Icons/beer_icon.png' /></td>
<td width='80%'><h2>{$rows[$i]['titel']} </h2></td>
</tr>
</table>
</button><br>
<div class='toggle'>
<p>
{$rows[$i]['info']}
</p>
</div>";
$i++;
}
?>
And here is my slideToggle function
<script>
$('.trigger').click(function(){
$('.toggle').slideToggle('fast');
});
</script>
Thank you in advance.
The easiest solution would probably be to wrap your entire looping html in a further div, and then amending your jQuery like so:
$('.trigger').click(function() {
$(this).siblings('.toggle').slideToggle('fast');
});
Since the two elements are now grouped inside a common parent, one can find the other using the siblings-method. Naturally, you can go about this in hundreds of ways, but this one struck me as the quickest and easiest.
Here's a fiddle: http://jsfiddle.net/QukC8/

How can I delete a specific row from a jQuery generated table?

Here's my code for generation of the table. I call it via jQuery and ajax.
echo '<table class="database-items table table-bordered">
<tbody>';
foreach($stmt as $item){
echo '
<tr>
<td>'.$item['title'].'</td>
<td>
<img src="wp-content/themes/twentyeleven-child/'.$item['image_path'].'" alt="">
</td>
<td>'.$item['asin'].'</td>
<td>'.$item['weight'].'</td>
<td>'.$item['dimension'].'</td>
<td>'.$item['category'].'</td>
<td>
<button type="button" class="btn btnDeleteitem" alt="'.$item['asin'].'">
<i class="icon-remove"></i>
</button>
</td>
</tr>';
}
echo '</tbody>
</table>';
And if I click the btnDeleteItem button, I want to remove that row, the values will be based on it's td with $item['asin']
Here's my jquery for btnDeleteItem but I don't know how what to put inside
$('.btnDeleteitem').live('click', function() {
//what to put here?
}
Find the button's closest tr ancestor an remove it
$('.btnDeleteitem').live('click', function() {
$(this).closest('tr').remove();
}
Since .live() was deprecated as of jQuery 1.7 use .on() for event deligation
$(document/* or closest existing ancestor of .btnDeleteitem*/).on('click', '.btnDeleteitem', function() {
$(this).closest('tr').remove();
}

How to remove a row from a table

I have an html table, and on each row, i would like to add a delete button.
When the user clicks on it, I would like to do two things:
1) remove the row from the table.
2) extract data from the row that was removed - a particular cell, and then make an ajax call using this value to a function that will remove the record from the database. The function returns a fresh list of items, which i will then use to redisplay the same table.
I found the following post from someone else on stackoverflow:
How to remove current row from table in jQuery?
So I guess that addresses point number one. But I don't know how to modify the code in the selected answer of the post to allow for grabbing the id value in the row, and then making an ajax call.
<table class="table table-bordered table-striped" id="databaserecords">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Status</th>
<th>Voice</th>
<th>Jumbo</th>
<th>Mode</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php foreach ($dblist as $record): ?>
<tr>
<td class ='recordId'><?php echo $record['Id'] ?></td>
<td class ='recordName'><?php echo $record['Name'] ?></td>
<td><?php echo $record['Status'] ?></td>
<td><?php echo $record['Voice'] ?></td>
<td><?php echo $record['Jumbo'] ?></td>
<td class='recordmode'><?php echo $record['Mode'] ?></td>
<td><button id="deleteRecord">Delete Record</button></td>
</tr>
<?php endforeach ?>
<script>
$('#deleteRecord').live('click', function() {
//get a count of all records. only allowed to delete if you have more than one record.
var recCount = $('#databaserecords tbody tr').length;
if (recCount > 1)
{
$thevalueIwanttoSave = $(this).closest('recordId').val();
alert($thevalueIwanttoSave);
}
});
</script>
Right now, the alert always says that my variable is undefined.
Can you point me in the right direction? I do know how to code an ajax call... I think I just need help with grabbing the value from the table.
Thanks.
You selector is not correct.
$thevalueIwanttoSave = $(this).parent().siblings('.recordId').text();
closest selects the closest parent of the element(recordId is not parent/grandparent or.. of your button element) and you have also missed a . for class selector. val is used for getting/setting values of form elements, for td elements you should use text or html method. Also note that IDs must be unique(you can use classes instead) and live method is deprecated, you can use on method.
$('#databaserecords').on('click', '.deleteRecord', function() {
var recCount = $('#databaserecords tbody tr').length;
if (recCount > 1) {
var text = $(this).parent().siblings('.recordId').text();
alert(text);
// $(this).closest('tr').remove()
}
});​
siblings()
parent()
closest()
text()
on()
$thevalueIwanttoSave = $(this).parent('tr').find('.recordId').text();
it should be .recordId, not recordId
$thevalueIwanttoSave = $(this).closest('.recordId').val();
alert($thevalueIwanttoSave);
Add the ID in an attribute on your delete button and you can just get it via jQuery.
in your php loop:
<button class="deleteRecord" recordID="<?php echo $record['Id'] ?>">Delete Record</button>
in JQuery on
$(".deleteRecord").click(function() {
var id = $(this).attr("recordID");
...
});
You need to use a . to select the element with class recordId. Also use text() to get the value:
$thevalueIwanttoSave = $(this).siblings('.recordId').text();
alert($thevalueIwanttoSave);

Categories