When a user hovers the mouse over a table row, to trigger a preview event, only it doesn't react in any way. I think the problem is that the table rows are generated via PHP.
HTML & PHP
<table>
<thead>
<tr>
<th width="200">User</th>
<th width="900">Description</th>
</tr>
</thead>
<tbody>
<?php
require_once './Classes/MainController.php';
$mc = MainController::getInstance();
$threads = $mc->getAllThreads();
foreach ($threads as $thread) {
?>
<tr id='thread_video_preview'>
<td><?php print $thread->original_poster; ?></td>
<td><?php print $thread->description; ?></td>
<td id='see_thread_video_url' class="hide"><?php print $thread->url; ?></td>
</tr>
<?php } ?>
<script type="text/javascript" src="./Javascript/MainFunctions.js"> HoverPreview();
</script>
</tbody>
</table>
Jquery
function HoverPreview() {
$('tr#thread_video_preview').hover(function() {
var url = $(this).$('#see_thread_video_url').html();
$('#dynamicPreview').html('<iframe width="320" height="240" src="//www.youtube.com/embed/' + url + '?autoplay=1" frameborder="0""></iframe>')
});
}
There are several issues here. Firstly, id attributes should be unique. If you want to group elements, use a class. Secondly, the location of your script tag could cause issues. You should place it in the head, or just before </body>. Finally, when you set a src property of a script tag, you cannot place any code in it. You need a separate script tag for that. With all that in mind, try this:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="./Javascript/MainFunctions.js"></script>
<script type="text/javacript">
$(function() {
$('tr.thread_video_preview').hover(function() {
var url = $(this).find('.see_thread_video_url').html();
$('#dynamicPreview').html('<iframe width="320" height="240" src="//www.youtube.com/embed/' + url + '?autoplay=1" frameborder="0""></iframe>')
});
});
</script>
</head>
In the body:
<?php
require_once './Classes/MainController.php';
$mc = MainController::getInstance();
$threads = $mc->getAllThreads();
foreach ($threads as $thread) { ?>
<tr class='thread_video_preview'>
<td><?php print $thread->original_poster; ?></td>
<td><?php print $thread->description; ?></td>
<td class='see_thread_video_url' class="hide"><?php print $thread->url; ?></td>
</tr>
<?php }
?>
Change this
<tr id='thread_video_preview'>
To :
<tr class='thread_video_preview'>
And in jquery event use
$(".thread_video_preview").
And I think it is good practice to use properties or event listener in td instead of tr
Related
first I want to say that this question is related to jquery replacewith to get data with Ajax after click on a cell and if this against the rule I am sorry and delete this post.
I tried to get the value of a cell in a MySQL-generated table (with fetch_array). I want to click on a cell in the same and receive the value of the first cell in the row in a div-container.
Thanks to several entries here I found an example for "static" tables. Like this:
<table id="choose-address-table" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name/Nr.</th>
<th>Street</th>
<th>Town</th>
<th>Postcode</th>
<th>Country</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="nr"><span>50</span>
</td>
<td>Some Street 1</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td class="use-address">
Use
</td>
</tr>
<tr>
<td id="chip" class="nr">49</td>
<td>Some Street 2</td>
<td>Glasgow</td>
<td>G0 0XX</td>
<td>United Kingdom</td>
<td>
<button type="button" class="use-address">Use</button>
</td>
</tr>
</tbody>
</table>
<br><br>
<div id="glasgow">Hello</div>
and
$("#chip").click(function () {
var scotland = $(this).closest("tr").find(".nr").text();
$("#glasgow").html(scotland);
});
http://jsfiddle.net/FnDvL/231/
Works fine. I insert this to my file, php, and get table data from mysql.
This is my code:
<html>
<head>
<script type="text/javascript" charset="utf-8" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
</script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<?
$con = mysqli_connect('localhost','root','','boerse');
$sql="SELECT short, name FROM markets";
$result = mysqli_query($con,$sql);
?>
<div class="markets">
<?
echo "<table>
<thead border='0'>
<tr>
<th>Index</th>
<th>Name</th>
</tr>
</thead>
<tbody border='1'>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td class='nr'>" . $row['short'] . "</td>";
echo "<td>" . $row['name'] . "</td>";
echo "<td class='information'>Use</td>";
echo "</tr>";
}
echo "</tbody></table>";
?>
<div class="clicked_info">Hello</div>
</div>
<br><br>
</body>
</html>
Now my problem is that I can click on the td with class information, but div class 'clicked_info' doesn't change. But I did like in the fiddle. So what went wrong? Or where is the problem? It must have to do with the MySQL-matter. But why?
This way I want to check if I got the content from the cell and I can continue working with it (as seen in my post before).
Maybe anyone can help. And again I am sorry if I break rules here.
Thank you to everyone.
You need to wrap your code in document-ready handler
$(document).ready(function () {
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
});
Currently when your script executes there is no $(".information") thus event is not binded properly.
OR
Move your script at the bottom of your page. like
<script>
$(".information").click(function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
</script>
</body>
OR
You can use event-delegation
$(document).on("click", ".information",function () {
var rodney = $(this).closest("tr").find(".nr").text();
$(".clicked_info").html(rodney);
});
I have a table which I populate using data from MySQL via PHP.
<table id="tab" class="table">
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<?php
session_start();
$id=$_SESSION['id'];
$val=$_SESSION['val'];
if($val=="1")
{
$result = $obj->getAllVals();
}
else
{
$result = $obj->getVal($id);
}
foreach($result as $row) { ?>
<tr style="cursor:pointer" onclick="gp('<?php echo $row['name']; ?>')">
<td> <?php echo $row['name']; ?> </td> </tr>
<?php } ?>
</tbody>
</table>
I'm not able to see my data as a datatable. Here is how I'm calling Data tables:
$(document).ready( function () {
$('#tab').dataTable();
});
Here are the scripts I'm using:
<script src="static/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="static/lib/jquery.dataTables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="static/lib/jquery.dataTables/js/DT_bootstrap.js"></script>
<script type="text/javascript" src="static/lib/jquery.dataTables/js/datatables.responsive.js"></script>
<script src="static/js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
Are you sur the variable $result is populated?
What if you replace this:
foreach($result as $row) { ?>
<tr style="cursor:pointer" onclick="gp('<?php echo $row['name']; ?>')">
<td> <?php echo $row['name']; ?> </td> </tr>
<?php } ?>
By this :
foreach($result as $row) { ?>
<tr><td>Test</td></tr>
<?php } ?>
Does it shows a lot of "Test" cells?
If yes, then there is something wrong with getting the infos out of the "$row" variable.
If not, then there is something wrong with either the foreach loop, or with the "$obj->" calls.
You have at least one error, that is outside the
<?php ?>
body:
<tr style="cursor:pointer" onclick="gp(\''.$row['name'].'\')">
=>
<tr style="cursor:pointer" onclick="gp('<?php echo $row['name']; ?>')">
session start methode should be in first line of php file
kindly write
<?php
session_start();
?>
Try to use a while loop, instead a foreach.
while($row = mysql_fetch_array($result)) {
echo "<tr style='cursor:pointer' onclick='gp('".$row['name']."')'>
<td> ".$row['name']." </td>
</tr>";
}
I assume that there are rows in the table and as you say "The console is not throwing up any data table related errors"
in that case you may want to check the non-related errors.
if there is an error it may stop all further script execution.
you should check if this line $('#tab').dataTable(); is executed at all (you can just replace it with alert and see)
and if this is the case the problem will be solved by correcting thous errors
I have the template indexSuccess.php with an AJAX function:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#test<?php $mensajes->getIdmensajes() ?>').click(function(){
jQuery('#contenido<?php $mensajes->getIdmensajes() ?>').load(this.href);
return false;
});
});
</script>
<h2>Listado de mensajes emitidos</h2>
<h3>En orden cronológico inverso (más nuevo primero)</h3>
<table id="enviados" width="60%" border="1" cellpadding="8">
<thead>
<tr>
<th>Fecha Creación</th>
<th>Contenido del mensaje</th>
<th>Destinatarios</th>
</tr>
</thead>
<tbody>
<?php foreach ($mensajess as $mensajes): ?>
<tr>
<td width="10%" align="center"> <?php echo date('d/m/Y', strtotime($mensajes->getFechaalta())) ?></td>
<td bgcolor="<?php echo $mensajes->getColores()->getCodigo() ?>"><?php echo $mensajes->getCuerpo() ?></td>
<td width="20%" id="contenido<?php echo $mensajes->getIdmensajes() ?>">
<a id="test<?php echo $mensajes->getIdmensajes() ?>" href="<?php echo url_for('mensajes/receptores?idmensajes='.$mensajes->getIdmensajes()) ?>">Ver receptores</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
I want to pass the value $ message-> getIdmensajes () to the AJAX function. I will have a different ID for each row, but this does not work. But the function works well when I set the value. For example: jQuery ('# test24') and jQuery ('# contenido24') works well for the value Idmensajes=24 . How do I pass the value $ message-> getIdmensajes () to AJAX function?
Your question is not so clear but you wrote
jQuery ('#contenido24') works well for the value Idmensajes=24
Also, you have this
jQuery('#test<?php $mensajes->getIdmensajes() ?>').click(function(){
jQuery('#contenido<?php $mensajes->getIdmensajes() ?>').load(this.href);
return false;
});
So, I think you have elements with similar ids, such as contenido24, contenido25 and so on as data container and links with ids like #test24, #test25 an so. If this is the case then you can simply use
jQuery(document).ready(function(){
// Register click handler for all a tags whose id begins with 'test'
jQuery("a[id^='test']").click(function(e){
e.preventDefault(); // instead of return false
jQuery('#contenido'+this.id.match(/\d+/)[0]).load(this.href);
});
});
jQuery('contenido'+this.id.match(/\d+/)[0]) will select elements with id like #contenido24, contenido25 depending on the ID of a, if an a tag has id='test20' then it'll select #contenido20 and load content from ajax call into this element.
I ma new to jquery.
I would like to update the table cell from Jquery.
The Php is as below.
For example I would like to update "firsttotal" with a different value. Please help.
<tr>
<td class="Left">Total</td>
<td></td>
<td id="firsttotal"><?php echo number_format('%.2n', $Total_Calculated_Cash); ?></td>
<td id="cashcalculator_total"><?php echo number_format($Total_Actual_Cash, 2); ?></td>
<td><?php echo number_format($Total_Calculated_Other, 2); ?></td>
<td><?php echo number_format($Total_Actual_Other, 2); ?></td>
</tr>
Get the td element and set the value like so:
<script type="text/javascript">
var newValue = 6;
$("#firsttotal").text(newValue);
</script>
since anchor is inside TD, you should use jQuery('td#cashcalculator_total a')
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
jQuery(function() {
jQuery('td#cashcalculator_total a').html('XXX');
});
</script>
$('td#firsttotal').html(value);
or
$('td#firsttotal').text(value)
$('td#firsttotal').text(value)
so something like this would work
$('td#firsttotal').text("test")
If you wanted to add HTML tags into it then you can use this
$('td#firsttotal').html("<p>test</p>")
jQuery('#firsttotal').html("new Value");
i have an table
<table class="oldService">
<thead>
<th>name</th>
<th>age</th>
<th>action</th>
</thead>
<tbody>
<?php foreach($array as $k=>$v){ ?>
<tr>
<td><?php echo $k[name] ?></td>
<td><?php echo $k[age]?></td>
<td id="<?php $k[id]" class="delme">X</td>
</tr>
<?php } ?>
</tbody>
<table>
now i want to delete any row by clicking on X of each row except first and last row,
and also need to confirm before deletion.
i used below jquery
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('table.oldService>tbody tr').not(':first').not(':last').click(function(){
if(confirm('want to delete!')){
jQuery(jQuery(this).addClass('del').fadeTo(400, 0, function() {
jQuery(this).remove()}));
jQuery.get('deleteService.php', {id:jQuery(this).attr('id')});
}
else return false;});
});
</script>
this is working perfect,but it execute by click on that row( means any td), i want that this event only occour when user click on X(third td) .
please suggest me how to modify this jquery so that the event occur on click of X.
UPDATE:
i want that minimum one row should be in tbody,
means if there is only one row then no function to delete that row, and if there is many rows then any row he can delete but not the all rows.
You can do this with a bit less code like this:
jQuery('table.oldService').delegate('td.delme', 'click', function() {
if(jQuery(this).parent().siblings(":not(.del)").length === 0) return;
if(!confirm('want to delete!')) return;
jQuery.get('deleteService.php', { id:this.id });
jQuery(this).parent().addClass('del').fadeTo(400, 0, function() {
jQuery(this).remove();
});
});
This attaches one event handler for the table instead of 1 per <td>. First we check if there are any siblings left that aren't deleted (prevent last deletion). Then check if they confirm, then delete the row.
You also need a few html fixes based on the posted question. The last tag needs to be </table> instead of <table>, and those <td> elements in the <thead> need to be wrapped in <tr></tr>. Let me know if you have any trouble, you can see a working demo of this here.
I didn't implement all your animation and AJAX logic, but here is how you could do this in general:
$(function() {
$('table.oldService td.delme:not(:first):not(:last)').click(function() {
$(this).closest('tr').remove();
});
});
Also, I highly recommend you run your code through JSLint. The code sample you posted has a massive number of errors in it.
Try this :
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('table.oldService>tbody tr img.delete').not(':first').not(':last').click(function () {
if(confirm('want to delete!'))
{
jQuery(jQuery(this).addClass('del').fadeTo(400, 0, function() {
jQuery(this).parent().parent().remove()}));
jQuery.get('deleteService.php', {id:jQuery(this).attr('id')});
}
else return false;});
});
</script>
html :
<table class="oldService">
<thead>
<th>name</th>
<th>age</th>
<th>action</th>
</thead>
<tbody>
<?php foreach($array as $k=>$v){ ?>
<tr>
<td><?php echo $v['name'] ?></td>
<td><?php echo $v['age']?></td>
<td><img id="<?php echo $v['id']?>" class="delete" src="del.gif" /></td>
</tr>
<?php } ?>
</tbody>
<table>