I have a datatable and buttons for delete and update. And these button are disabled. I also have some checkbox in the first column of every row. Whenever I click the checkbox, the edit and delete button will be enabled. It is working on the first page of my datatable but when I click a row from other pages of the datatable, it doesn't enabling the buttons. What is the problem with it? I have this code:
HTML Table:
<table class="table table-bordered table-hover table-striped" id="account_data" width="100%" style="margin-top: 0px"> <thead class="header">
<tr class="well"><th colspan="3" style="text-align:center">LIST OF USERS</th></tr>
<tr class="well">
<th style="width: 5px"><input type="checkbox" class="check"/></th>
<th style="font-size: 14px;padding-left: 20px;"> ID#</th>
<th style="font-size: 14px;padding-left: 20px;"> Name</th>
</tr>
</thead>
<tbody>
<?php if($users != NULL){?>
<?php foreach($users as $row){ ?>
<tr>
<td align="center"><input type="checkbox" class="accounts" name="accounts[]" value="<?php echo $row->user_id;?>"/></td>
<td style="font-size: 15px;padding-left: 20px;"><?php echo $row->user_id;?></td>
<td style="font-size: 15px;padding-left: 20px;"><?php echo $row->user_name;?></td>
</tr>
<?php }?>
<?php }?>
</tbody>
</table>
JQUERY:
<script>
$(document).ready(function(){
var count=0;
var chkId=new Array();
var checkedValue ='';
$('.check').click(function() {
$(" .check").each(function () {
if($(this).is(":checked"))
{
$(" .accounts").prop('checked',true);
// $('#edit_acc').prop('disabled',false);
var n = $( " .accounts:checked" ).length;
if(n==1){
$('#edit_acc').prop('disabled',false);
}
if(n>1){
$('#edit_acc').prop('disabled',true);
}
$('#delete_acc').prop('disabled',false);
return
}
$(" .accounts").prop('checked',false);
$('#edit_acc').prop('disabled',true);
$('#delete_acc').prop('disabled',true);
});
});
});
</script>
The problem is that the checkboxes on page #2 and forth not is part of the DOM when your $(document).ready() is fired. jQuery dataTables inject and remove rows in order to show different pages.
So you must use a delegated event handler instead of click(). By that, dynamically injected rows (i.e their checkboxes) also will be included :
$('#account_data').on('click', '.check', function() {
...
});
instead of $('.check').click(function() {
Related
I have a page where I set the dataTable content in the div using the following code:
$('#' + divid + '-data')[0].innerHTML = data.TableContent;
I get the table content from a different method. Here is my TableContent:
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control"></td>
<td>Hi</td>
</tr>
</table>
On the page, when I tried to display an alert message on click on table-responsive column, nothing happens.
$("td.details-control").on("click", function(e) {
alert("hi");
});
I also tried:
document.getElementById("#table-51").on("click", "tr td.details-control", function () {
alert("hi");
});
Please help and thanks in advance.
Try this :
$("td.details-control").click(function(){
alert("Hi");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control">Show alert</td>
<td>Hi</td>
</tr>
</table>
try this
<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control"></td>
<td onclick="alert('hi')">Hi</td>
</tr>
</table>
You seem to overcomplicate this issue; keep it simple! You miss something to click on (empty <td>) and the use of a native DOM method along with a jQuery delegated event handler will never work.
var data = { TableContent: `<table class="table-responsive dataTable table-striped" id="51">
<tr>
<td class="details-control">click me</td>
<td>Hi</td>
</tr>
</table>`
}
$('#sample')[0].innerHTML = data.TableContent;
$('#sample').on('click', 'td.details-control', function(e) {
alert("hi");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sample"></div>
I can successfully delete rows of my table and remove it from the table with jquery and ajax. On top of my table i have the number of rows displayed. How can i refresh the div (update_count) to show the decremented number after deleting ?
<div id="update_count"><?=$num_count?> data</i></div>
<table class="table">
<tr>
<th style="width:1px"><strong>Date</strong></th>
<th style="width:5px">Labo</th>
<th style="width:5px">Delete</th>
<tr>
<?php foreach($IndicacionesLab as $row)
{
?>
<tr>
<td><?=$row->insert_time;?></td>
<td><?=$row->laboratory;?></td>
<td> <a title="Eliminar laboratorio <?=$row->laboratory;?>" class="st deletelab" id="<?=$row->id_lab; ?>" style="background:rgb(223,0,0);cursor:pointer">Delete</a></td>
</tr>
<?php
}
?>
</table>
Js
$(".deletelab").click(function(){
if (confirm("Sure to delete ?"))
{
var el = this;
var del_id = $(this).attr('id');
$.ajax({
type:'POST',
url:'<?=base_url('admin/DeleteHistLab')?>',
data: {id : del_id},
success:function(response) {
// Removing row from HTML Table
$(el).closest('tr').css('background','tomato');
$(el).closest('tr').fadeOut(800, function(){
$(this).remove();
});
}
});
}
})
For simplicity keep all the data rows in a <tbody>
<table id="my-table">
<thead>
<tr>
<th> heading 1 </th>
</tr>
</thead>
<tbody>
<tr>
<th> data 1 </th>
</tr>
</tbody>
</table>
Then after you remove the row get the length of all rows remaining
$('#update_count').text( $('#my-table tbody tr').length + ' Items')
I'm building a laravel application where I want to show if there is any update data in database after two seconds.So in this scenario I have given the table a 'id' and then I have laod the table after certain time interval. But the problem is after every javascript call it creates an empty row in table even if the table retrieve the value also. How do I avoid the problem..any suggestion please?
<div class="container">
<h3> List Of Courses </h3></br>
<table class="table table-striped table-bordered dataTable" id="example">
<thead>
<tr>
<td>Serial No</td>
<td>Title</td>
<td>Description</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<?php $i=1; ?>
#foreach($items as $row)
<tr>
<td>{{$i}}</td>
<td class="title" data-id1="{{$row->id}}" contenteditable>{{$row->title}}</td>
<td class="description" data-id2="{{$row->id}}" contenteditable>{{$row->description}}</td>
<td>
<button type="button" onclick="deleteItem({{ $row->id }})" class="btn btn-danger">Delete</button>
</td>
</tr>
<?php $i++; ?>
#endforeach
</tbody>
</table>
</div>
Here is the javascript I have to use to load the table after 3 seconds:
<script type="text/javascript">
setInterval(function() {
$("#example").load("list #example");
}, 30000);
</script>
You need to give load a callback and check if you returned any data.
Without knowing the return data structure my best guess would be
$("#example").load("list #example", function (data) {
// hopefully you are returning json. if not, return json. It's the artisan way :D
let parsed = JSON.parse(data);
if (parsed) {
// build html and inject in dom
}
});
See this is how I actually solved the problem,
I put the table inside a new div and I called the jquery .load() on that div.
Like this :
<div class="reloadTable">
<table class="table table-striped table-bordered dataTable" id="example">
// table data
</table>
</div>
javaScript :
<script type="text/javascript">
setInterval(function() {
$(".reloadTable").load("list #example");
}, 3000);
</script>
I am using Material Design Lite to create a table and I am inserting rows dynamically using php.
The material design lite has provided checkboxes for each row. Now, I want to use the selected row's data on a button click. Does anyone have any idea how to do that?
Here is the code :
<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp" id="sanctionedTable">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th class="mdl-data-table__cell--non-numeric">Registration No.</th>
<th class="mdl-data-table__cell--non-numeric">Amount</th>
</tr>
</thead>
<tbody>
<?php
$temp = "";
while($row = mysqli_fetch_assoc($result))
{
$temp="<tr><td>".$row["name"]."</td><td>".$row["regno"]."</td><td>".$row["amount"]."</td></tr>";
echo $temp;
}
?>
</tbody>
</table>
You can use something like this using jquery:
$('tr').click(function(){
alert("Name:"+$(this).children('td:nth-child(1)').html()+",Registration nio:"+$(this).children('td:nth-child(2)').html()+",Amount:"+$(this).children('td:nth-child(3)').html());
});
This fetches the information in each row.
I have a form in php with dynamically added rows (after clicking button the row is added). I want to fill the field with value "xx" and i want to do it in jquery.
This loop create the dynamically added rows in jquery. I want to fill added fields with value "xx":
while($personsArrayLength>2){
echo '
<script>
$(document).ready(function(){
var i = 2;
var rowTemplate2 = jQuery.format($("#template2").html());
rowTemplate2.value = "xx";
addRow2();
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}
});
</script>
';
Here is html for that:
function addRows2(){
global $personsError_css;
$personsArray = $_POST['persons'];
JB_var_dump($_POST['whichRow']);
$html = '<table id="template2" align="right" style="display:none; ">
<tr id="row_{0}">
<td><input type="text" size="52" id="persons" name="persons[]" maxlength="100"></td>
<td><img src="/../_img/row_del.png" id="delete_{0}" alt="usun"></td>
</tr>
</table>
<table id="list2" style="margin-left:200px;">
<thead >
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" size="52" name="persons[]" maxlength="100" style="'.$personsError_css.';" value="'.$personsArray[1].'"></td>
<td></td>
</tr>
<tr>
<td colspan="2" id="app_here2"></td>
</tr>
</tbody>
</table>';
return $html;
}
This is properly filled form
In this epty fields I want to add values "xx"
Sorry for my english.
How can i set values in added rows? What i should change in my code?
Thanks for help.
Change your 'addRow2' to this:
function addRow2(){
var ii = i++;
$("#app_here2").append(rowTemplate2(ii));
//UPDATE: var rowTemplate2 is not a jQuery Object, as i thought
$("#template2").find("input:empty").val("xx");; // added this row
$("#delete_" + ii).click(function(){
$("#row_" + ii).remove();
});
}