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");
Related
IF I click add button (like above image) with the id and name in href,how do I assign a variable after i get a data in modal like $_GET in php?
modal
<tr>
<td class="w3-padding-16" style="text-transform: capitalize"><?php echo $first_nameparty ?></td>
<td class="w3-padding-16" style="text-transform: capitalize"><?php echo $last_nameparty ?></td>
<td class="w3-padding-16" style="text-transform: capitalize"><?php echo $middle_nameparty ?></td>
<td>Add</td>
</tr>
js
$(document).ready(function(){
$(".party").click(function(event){
event.preventDefault();
var puttingdata = $(this).attr("href");
$("#puthere").text(puttingdata);
});
});
This is will show and i dont know how to assign
<span id="puthere" class="w3-large" style="text-transform: capitalize;"><b></b></span>
Maybe this is what you need.
Use data-* attribute intead of href.
<td><button data-obj='{"party": <?php echo $resident_idparty ?>, "partytwo": "<?php echo $first_nameparty ?>", "party3": "<?php echo $last_nameparty ?>"}' class="w3-btn w3-green party">Add</button></td>
Then you can get the data object assigned in puttingdata variable.
var puttingdata = $(this).data("obj");
$("#puthere").text(puttingdata.party);
It will reload when you are using href.
The $_GET syntax will only retrieve whats stated on the URL link, for eg.
// http://test.com?party=123
$var = $_GET['party']; // 123
If you do not want to reload the page, you should consider use AJAX
I have add_person.ctp file, and there I have Inputs and function, but this function is not working, My question is why its not working, I dont see any mistake in this code. If I click button, then this doing nothing.
Here is my code
<h2>People</h2>
<table id="mytable">
<tr><th></th><th>Last Name</th><th>First Name</th><th>Email</th><th>Gender</th></tr>
<tr id="person0" style="display:none;">
<td><?php echo $this->Form->button(' - ',array('type'=>'button','title'=>'Click Here to remove this person')); ?></td>
<td><?php echo $this->Form->input('unused.lastName',array('label'=>'','type'=>'text')); ?></td>
<td><?php echo $this->Form->input('unused.firstName',array('label'=>'','type'=>'text')); ?></td>
<td><?php echo $this->Form->input('unused.email',array('label'=>'','type'=>'text')); ?></td>
<td><?php echo $this->Form->input('unused.gender',array('label'=>'','type'=>'select','options'=>array('M'=>'M','F'=>'F','T'=>'T'))); ?></td>
</tr>
<tr id="trAdd"><td> <?php echo $this->Form->button('+',array('type'=>'button','title'=>'Click Here to add another person','onclick'=>'addPerson()')); ?> </td><td></td><td></td><td></td><td></td></tr>
</table>
<?php echo $this->Html->script(array('jquery-2.1.1.min.js'));?>
<script type='text/javascript'>
var lastRow=0;
function addPerson() {
lastRow++;
$("#mytable tbody>tr:#person0").clone(true).attr('id','person'+lastRow).removeAttr('style').insertBefore("#mytable tbody>tr:#trAdd");
$("#person"+lastRow+" button").attr('onclick','removePerson('+lastRow+')');
$("#person"+lastRow+" input:first").attr('name','data[Person]['+lastRow+'][lastName]').attr('id','personLastName'+lastRow);
$("#person"+lastRow+" input:eq(1)").attr('name','data[Person]['+lastRow+'][firstName]').attr('id','personFirstName'+lastRow);
$("#person"+lastRow+" input:eq(2)").attr('name','data[Person]['+lastRow+'][email]').attr('id','personEmail'+lastRow);
$("#person"+lastRow+" select").attr('name','data[Person]['+lastRow+'][gender]').attr('id','personGender'+lastRow);
}
function removePerson(x) {
$("#person"+x).remove();
}
</script>
Thank you for helping !
You have wrong selector here #mytable tbody>tr:#person0 and here #mytable tbody>tr:#trAdd. Replace with #mytable tbody>tr#person0 and #mytable tbody>tr#trAdd respectively. Keep in mind there is no need to use colon symbol in selectors.
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
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 want to check the table row value on page load..
Table example:
Name || Status || Set
John || Pass || [ ] (checkbox)
Chris || Fail || [ ] (checkbox)
When the status is 'Fail' I want to disable the checkbox..
Now I'm using this jQuery:
<script>
$(document).ready(function() {
if(getElementsByClassName('paket_ava').value=='kosong'))
{
document.getElementById("checkboxx").disabled=true;
}
});
</script>
and this is my PHP table code :
<tr>
<td><?php echo $paket['id_paket'];?></td>
<td><?php echo $paket['nama_paket'];?></td>
<td><?php echo $paket['keterangan_paket'];?></td>
<td><?php echo $paket['harga'];?></td>
<td><img src='<?php echo $paket['gambar_paket']?>' width='120' height='120'></td>
<td class="paket_ava"><?php echo $paket['ketersediaan_paket'];?></td>
// class on the table data
<td><?php echo $paket['status_harian_paket'];?></td>
<td><input type="checkbox" name="chkDel[]" id="checkboxx" class="aku" value="<?=$paket["id_paket"];?>"></td>
<?php
echo ("<td><a href='edit_data_paket.php?id_paket=$paket[id_paket]'>Edit</a></td>");
?>
</tr>
The code above is not working, but if I change to:
if(getElementsByClassId('paket_ava').value=='kosong'))
{
document.getElementById("checkboxx").disabled=true;
}
(of course I change the class in the table into Id)
When the page load its acting strange and the checkbox on the first data is disabled..
How to do this properly?
Try like below.... It will help you...
Fiddle Example: http://jsfiddle.net/68wbx/126/
Suppose your HTML Table was like below:
HTML:
<table id="datapaket" border="1">
<tr>
<th>Name</th><th>Status</th><th>Set</th>
</tr>
<tr>
<td>John</td><td class="paket_ava">Pass</td>
<td><input type="checkbox" name="chkDel[]" id="checkboxx" class="aku" value='sam'/></td>
</tr>
<tr>
<td>Chris</td>
<td class="paket_ava">Fail</td>
<td><input type="checkbox" name="chkDel[]" id="checkboxx" class="aku" value='sam'/></td>
</tr>
</table>
and try the Below Jquery :
$(document).ready(function() {
$('#datapaket tr').each(function() { //Looping Every Table Row
//Get the TD Value that have Classname ".paket_ava"
var str = $(this).find('.paket_ava').html();
if(typeof str !== 'undefined'){
if (str.indexOf("Fail") >= 0)
$(this).find('td:nth-child(3) input:checkbox').attr("disabled", true);
};
});
});
traverse through each element having class 'paket_ava' and do your stuff inside it. like
$('.paket_ava').each(function(i, obj) {
// your stuff...
});
Reference : jQuery to loop through elements with the same class