I am trying to create pagination for dynamic tables with data from the database. What I did was, I loaded first all the records and paginated the result. The pagination is working, however, the checkbox becomes unclickable.
I'm guessing it's because of how I stored all the trs into an array to display it.
HTML
Buttons
<div class="btn-group float-right">
<button class="btn btn-white btn-sm btn-prev"><i class="fa fa-arrow-left"></i></button>
<button class="btn btn-white btn-sm btn-next"><i class="fa fa-arrow-right"></i></button>
</div>
Table
<table class="table table-hover table-mail">
<tbody>
<?php
if(!empty($mails)){
foreach($mails as $key) {
$isRead = ($key['isRead'] == 0) ? "unread" : "read";
$isImportant = ($key['isImportant'] == 1) ? "<span class='float-left text-warning important'><i class='fa fa-star'></i></span>" : "";
?>
<tr class="<?php echo $isRead; ?>" data-id="<?php echo $key['mailID']; ?>">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact"><?php echo $isImportant; ?> <?php echo ucwords(strtolower($guiClass->e($key['name']))); ?></td>
<td class="mail-subject"><?php echo mb_strimwidth(ucfirst($guiClass->e($key['subject'])), 0, 60, "..."); ?></td>
<td class="text-right mail-date"><?php echo time_passed(date(strtotime($key['created_at']))); ?></td>
</tr>
<?php }}else{ ?>
<tr>
<td class="text-center">No Messages</td>
</tr>
<?php } ?>
</tbody>
</table>
JS
<script>
$(document).ready(function(){
$(".i-checks").iCheck({
checkboxClass: "icheckbox_square-green",
radioClass: "iradio_square-green",
});
// Pagination
var current_page = 1;
var records_per_page = 10;
var records = $(".table-mail").find("tbody").find("tr").length;
var data = [];
$(".mail-box")
.find("table")
.find("tbody")
.find("tr")
.each(function () {
data.push($(this).prop("outerHTML"));
});
function prevPage() {
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage() {
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
function numPages() {
return Math.ceil(records / records_per_page);
}
function changePage(page) {
var table = $(".table-mail").find("tbody");
if (page < 1) page = 1;
if (page > numPages()) page = numPages();
table.html("");
for (
var i = (page - 1) * records_per_page;
i < page * records_per_page;
i++
) {
table.append(data[i]);
}
}
$(".btn-next").click(function () {
nextPage();
});
$(".btn-prev").click(function () {
prevPage();
});
changePage(1);
});
</script>
EDIT
Based on some comments, reinitializing iCheck is the way to go. But it is still not working (at least in my current code).
For testing purposes, I tried hardcoding trs using the code below and used this to append to the tbody, and it worked. I also added the reinitialization of iCheck in this test.
for (var i = 0; i < records; i++) {
tr[i] =
"<tr class='read' data-id='" +
i +
"'><td class='check-mail'><input type='checkbox' class='i-checks mail' autocomplete='off'></td><td class='mail-contact'><a href='mail_detail.php?id=1'> John Doe</a></td><td class='mail-subject'><a href='mail_detail.php?id=1'>This is a subject " +
i +
"</a></td><td class='text-right mail-date'>2 hours ago</td></tr>";
}
So, just like my first guess, I think the problem lies in how I get all the trs and stored them in array called data, and displayed it back.
Any suggestions on how should I properly get all the trs?
As pointed out by the guys in the comments you've to reinitialize the icheck components after the pagination, so better to add the code below at the end of the changePage function :
$(document).ready(function() {
// Pagination
var current_page = 1;
var records_per_page = 10;
var records = $(".table-mail").find("tbody").find("tr").length;
var data = [];
$(".mail-box")
.find("table")
.find("tbody")
.find("tr")
.each(function() {
data.push($(this).prop("outerHTML"));
});
function prevPage() {
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage() {
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
function numPages() {
return Math.ceil(records / records_per_page);
}
function changePage(page) {
var table = $(".table-mail").find("tbody");
if (page < 1) page = 1;
if (page > numPages()) page = numPages();
table.html("");
for (
var i = (page - 1) * records_per_page; i < page * records_per_page; i++
) {
table.append(data[i]);
}
$(".i-checks").iCheck({
checkboxClass: "icheckbox_square-green",
radioClass: "iradio_square-green",
});
}
$(".btn-next").click(function() {
nextPage();
});
$(".btn-prev").click(function() {
prevPage();
});
changePage(1);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/icheck.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/skins/all.min.css" rel="stylesheet" />
<div class="mail-box">
<div class="btn-group float-right">
<button class="btn btn-white btn-sm btn-prev"><i class="fa fa-arrow-left"></i></button>
<button class="btn btn-white btn-sm btn-next"><i class="fa fa-arrow-right"></i></button>
</div>
<table class="table table-hover table-mail">
<tbody>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 1</td>
<td class="mail-subject">PAGE 1</td>
<td class="text-right mail-date">PAGE 1</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
<tr class="read" data-id="1">
<td class="check-mail">
<input type="checkbox" class="i-checks mail" autocomplete="off">
</td>
<td class="mail-contact">PAGE 2</td>
<td class="mail-subject">PAGE 2</td>
<td class="text-right mail-date">PAGE 2</td>
</tr>
</tbody>
</table>
</div>
Related
first group : Agen LPG 3KG
second group : Office HRG
I want to select a checkbox based on the group, but at this time when I click on group one then group two should be selected when I click on group one then group one is checked, why is it selected only in the last loop?
my code in index.blade.php
#foreach ($business_unit as $group => $unit)
<tr>
<td colspan='5' style='font-weight: bold'>{{ $group }} #if ($group == '') Unit Bisnis Lainnya #endif</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="{{$group}}" onclick="toggle(this);"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
#foreach ($unit as $item)
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check" id="{{$group}}" name="employee_id[]" value="{{ $item->employee_id }}">
<td class='captial'>{{ $item->name }}</td>
<td class='captial'>{{ $item->position ?? '-' }}</td>
</tr>
#endforeach
#endforeach
Here is the javascript for this
<script>
function toggle(source) {
var business_id = $(this).data('business-id');
var checkboxes = document.querySelectorAll('input[id="{{$group}}"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != source)
checkboxes[i].checked = source.checked;
}
}
</script>
how to solve my problem please help me.
You only have ONE input[id="{{$group}}" so it will only ever do that one.
Instead delegate (and remove onclick="toggle(this);") and use the data attributes you already have:
I assume the table has id="tableID" and you need to change the checkbox to class="emp-check {{$group}}"
document.getElementById("tableID").addEventListener("click", function(e) {
const tgt = e.target;
if (!tgt.matches("[data-business-id]")) return // or use a class
const business_id = tgt.dataset.businessId; // the business-id becomes businessId
const checked = tgt.checked;
document.querySelectorAll(`input.${business_id}`).forEach(chk => chk.checked = checked)
})
<table id="tableID">
<tr>
<td colspan='5' style='font-weight: bold'>group 1</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="group1"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 1">
<td class='captial'>G1 Name 1</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 2">
<td class='captial'>G1 Name 2</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group1" name="employee_id[]" value="emp 3">
<td class='captial'>G1 Name 3</td>
<td class='captial'>Whatever</td>
</tr>
<tr>
<td colspan='5' style='font-weight: bold'>group 2</td>
</tr>
<tr class="unit_bisnis">
<th style="width: 130px"> <input type="checkbox" data-business-id="group2"> Select All</th>
<th>Nama</th>
<th>Jabatan</th>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 1">
<td class='captial'>G2 Name 1</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 2">
<td class='captial'>G2 Name 2</td>
<td class='captial'>Whatever</td>
</tr>
<tr class='employee-row'>
<td><input type="checkbox" class="emp-check group2" name="employee_id[]" value="emp 3">
<td class='captial'>G2 Name 3</td>
<td class='captial'>Whatever</td>
</tr>
</table>
Hi I am working on handling two tables one with table has table head and another table has table body.Need help in fixed table head and two table content with proper alignment.while fixing the header i could not align the table content subsequently to it. With help of id i fix the table header.can anyone fix this alignment.Thanks in advance.
<table id="table-1" class="table table-hover">
<thead>
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
</thead>
<body>
<div class="content">
<table class="table table-striped">
<tbody>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr><tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr><tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
<tr class="bordered">
<td align="center">test </td>
<td align="center">test </td>
<td align="center"> test</td>
<td align="center"> test </td>
<td align="center" data-toggle="modal"
id="myBtn">
test </td>
<td align="center"> test</td>
<td align="center">
test</td>
<td align="center"> test </td>
<td align="center"> test </td>
<td align="center"> test </td>
<td>
test
</td>
<td>
test
</td>
<td>
test
</td>
</tr>
</tbody>
</table>
<table id="header-fixed"></table>
var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
Here is the Demo
You want to show a fixed thead (clone table) on top of a scrolling table (original table).
Check this working demo: CODEPEN demo
Is this what you are looking for? How it works:
HTML part:
<!-- a CONTAINER for everything -->
<div id="table-holder">
<!-- a fixed TOP that is visible or hidden on scroll -->
<div id="table-top">
<!-- a TABLE CLONE that contains the THEAD -->
<table id="table-clone" border="1"></table>
</div>
<!-- a CONTAINER that allows the original table to scroll -->
<div id="table-scroll">
<!-- the ORIGINAL TABLE -->
<table id="table-original" border="1">
<!-- the THEAD -->
<thead>....</thead>
<!-- the TBODY -->
<tbody>....</tbody>
</table>
</div><!-- endof: #table-scroll -->
</div><!-- endof: #table-holder -->
CSS part:
#table-holder {
position:relative;
}
#table-top {
width:100%; /* important */
position:absolute; /* important -> always at top */
display:none; /* hidden at first */
}
#table-scroll {
float:left;
width:100%;
height:100%;
overflow-y:scroll; /* important */
}
table {
width:100%;
}
JS part (jQuery):
// set main table html vars
var $table_top = $("#table-top");
var $table_scroll = $("#table-scroll");
var $table_clone = $("#table-clone");
var $thead_original = $("#table-original thead");
var $thead_clone = $thead_original.clone();
// copy the original THEAD into table-top
$table_clone.append($thead_clone);
// adjust table-top width (consider the width of the Y scrollbar)
$table_top.css("width", $thead_original.width())
// set vars needed to show/hide table-top
var thead_height = $thead_original.height();
//// set the threshold for the show/hide action
var visible_top = $table_scroll.offset().top;
var table_top_visible = 0;
// set onScroll action: show/hide table-top
$table_scroll.on("scroll",function(){
// the the current offset of the original THEAD
var thead_top = $thead_original.offset().top;
//// get the position of the bottom of the THEAD
var thead_bottom = thead_top + thead_height;
// check if the original THEAD is hidden
if (thead_bottom < visible_top) {
// if the original is hidden -> show the clone
if (!table_top_visible) {
table_top_visible = 1;
$table_top.fadeIn();
}
} else {
// else, the original is visible -> hide the clone
if (table_top_visible) {
table_top_visible = 0;
$table_top.fadeOut();
}
}
});
I have a form page and certain items only appear on the list if a link is clicked on. I want the link to hide when it is clicked on and the action it calls un-hides.
This is my test page:
function toggle_it(itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = ''
event.preventDefault()
} else {
document.getElementById(itemID).style.display = 'none';
event.preventDefault()
}
}
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong>
</td>
<td align="center"><strong>DESCRIPTION</strong>
</td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit">
</td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1
</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2
</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1
</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2
</td>
</tr>
</table>
The code is in CF but this is a JavaScript function.
BTW. Thank you whoever wrote the original script I found on Stackoverflow a while back.
Plunker
Description: Gave html elements for toggle unique ids. Also needed to update the javascript to get the parent element of the parent element of the link clicked. This only works when there are two elements to reach the tr.
Importantly, this code has an extra unhide that isn't needed...since we are hiding it and there is nothing to click.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<table width="500" border="1" cellpadding="3">
<cfform action="" method="POST">
<tr>
<td align="center"><strong>ID</strong></td>
<td align="center"><strong>DESCRIPTION</strong></td>
<td align="center">
<strong>SAY IT</strong>
</td>
</tr>
<tr>
<td align="center">a</td>
<td>
The field with no name
</td>
<td>
<cfinput type="Text" name="aaa" value="">
</td>
</tr>
<tr id="tr1" style="display:none">
<td align="center">a1</td>
<td>Add-on1</td>
<td>
<cfinput type="Text" name="a1" value="Add-on1">
</td>
</tr>
<tr id="tr2" style="display:none">
<td align="center">a2</td>
<td>Add-on2</td>
<td>
<cfinput type="Text" name="a2" value="Add-on2">
</td>
</tr>
<tr id="tr3" style="display:none">
<td align="center">a3</td>
<td>Add-on - Daily1</td>
<td>
<cfinput type="Text" name="a1d" value="Add-on - Daily1">
</td>
</tr>
<tr id="tr4" style="display:none">
<td align="center">a4</td>
<td>Add-on - Daily2</td>
<td>
<cfinput type="Text" name="a2d" value="Add-on - Daily2">
</td>
</tr>
<tr>
<td colspan=3>
<input type="submit" name="Submit" value="Submit"></td>
</tr>
</cfform>
</table>
<!--- ----------------------------------------------------------------- --->
<table border="0">
<tr>
<td align="right">Add-on1: </td>
<td>Add-on1</td>
</tr>
<tr>
<td align="right">Add-on2: </td>
<td>Add-on2</td>
</tr>
<tr>
<td align="right">Add-on3 - Daily1: </td>
<td>Add-on - Daily1</td>
</tr>
<tr>
<td align="right">Add-on4 - Daily2: </td>
<td>Add-on - Daily2</td>
</tr>
</table>
</body>
</html>
JS
// Code goes here
function toggle_it(itemClickedID, itemID) {
// Toggle visibility between none and ''
if ((document.getElementById(itemID).style.display == 'none')) {
document.getElementById(itemID).style.display = '';
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = 'none';
event.preventDefault();
} else {
event.preventDefault();
//gets the parent element of the parent element which is the row
document.getElementById(itemClickedID).parentElement.parentElement.style.display = '';
document.getElementById(itemID).style.display = 'none';
}
}
i'm trying to create an Excel-Form to a Web-form and now i'm stuck at this part: http://jsfiddle.net/J9NAS/40/
<table id="model">
<tr>
<th class="auto-style2">Basic</th>
<th class="auto-style2">Maxi</th>
<th>Short</th>
<th>Name</th>
<th class="auto-style2">Selection</th>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>A</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox1" type="checkbox" value="HA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>B</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox2" type="checkbox" value="PA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>C</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox3" type="checkbox" value="IA" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>D</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox4" type="checkbox" value="SPIN" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style2">X</td>
<td class="auto-style2">X</td>
<td>E</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox5" type="checkbox" value="VB" class="basic" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>F</td>
<td>asdasd)</td>
<td class="auto-style2">
<input id="Checkbox6" type="checkbox" value="BWCPN" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>G</td>
<td>asddas</td>
<td class="auto-style2">
<input id="Checkbox7" type="checkbox" value="GBH" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>H</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox8" type="checkbox" value="GR" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>I</td>
<td>dsad</td>
<td class="auto-style2">
<input id="Checkbox9" type="checkbox" value="IR" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>J</td>
<td>asdasds.</td>
<td class="auto-style2">
<input id="Checkbox10" type="checkbox" value="CC" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>K</td>
<td>asdasd.</td>
<td class="auto-style2">
<input id="Checkbox11" type="checkbox" value="GA" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>L</td>
<td>Rasdasd.</td>
<td class="auto-style2">
<input id="Checkbox12" type="checkbox" value="GPAT" class="maxi" />
</td>
</tr>
<tr>
<td class="auto-style3"> </td>
<td class="auto-style2">X</td>
<td>M</td>
<td>asdasd</td>
<td class="auto-style2">
<input id="Checkbox13" type="checkbox" value="GPIN" class="maxi" />
</td>
</tr>
</table>
<h1>Callflow:</h1>
<div id="status"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#status").change(function () {
if (("#Checkbox1").attr("checked") === true) {
$("#status").append("#Checkbox1").val();
};
});
});
</script>
i want to show the user what kind of Model he chose (Basic or Maxi). The criteria are shown with the 'X's and depending on what features a user chooses, the text field below the form should show "basic" or "maxi".
Can someone help me with that? My JQuery/JS Skills are very basic, yet.
Try
$(document).ready(function () {
var $basic = $('.basic'), $maxi = $('.maxi'), $status = $('#status');
$basic.add($maxi).change(function(){
if($maxi.filter(':checked').length){
$status.text('Maxi')
} else if($basic.filter(':checked').length){
$status.text('Baisc')
} else {
$status.text('')
}
})
});
Demo: Fiddle
You're using a wrong selector. #status belongs to div
$("#status").change(function () {
so you need to have like
$("input[type=checkbox]").change(function () {
based on the value you can show/hide the div.
I know that there are a bunch of posts about this already, but no matter what I try, nothing works for my form.
I simply want the submit button to be disabled until all fields are filled in, and I want $mypassword checked to equal $myconfirmpassword before submitting.
If you can find something that works. THANK YOU SO MUCH!!
Obviously, some things are hidden for privacy purposes, as you can't see my CSS and PHP info.
<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
<h2>Back</h2>
</div></a>
<div id="registration_container" >
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
<tr>
<form name="form3" method="post" action="check_finish_registration.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
<tr>
<td colspan="3"><strong>Complete Registration </strong></td>
</tr>
<tr>
<td width="2000">First Name</td>
<td width="6">:</td>
<td width="294"><?php echo $fname ?></td>
</tr>
<tr>
<td width="2000">Middle Name*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mymname" id="mymname"></td>
</tr>
<tr>
<td width="2000">Last Name</td>
<td width="6">:</td>
<td width="294"><?php echo $lname ?></td>
</tr>
<tr>
<td width="2000">Create a Username*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myusername" id="myusername"></td>
</tr>
<tr>
<td width="2000">Create a Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mypassword" id="mypassword"></td>
</tr>
<tr>
<td width="2000">Confirm Your Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword"></td>
</tr>
<tr>
<td width="2000">Enter your Sigma Number*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mysnumber" id="mysnumber"></td>
</tr>
<tr>
<td width="2000">E-Mail Address*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myemail" id="myemail"></td>
</tr>
<tr>
<td width="2000">* required field</td>
<td> </td>
<td><input type="submit" id='register' value="Register"disabled='disabled'></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</div>
Instead of disabling the submit button, why don't you just try to validate the form so that until the user enters the correct values, the form will not be submitted to the database? And about the password and confirm password fields validation
<script type="text/javascript">
function passwordConfirm() {
var confirmPass = document.getElementById("confirmpassid").value
if(pass != confirmPass) {
alert("Mismatching passwords");
}
}
Try not to use this but if you want you may give it a try (jQuery would be good)
var els=[];
window.onload=function(){
var inputs=document.getElementsByTagName('input');
for(i=0; i<inputs.length;i++)
{
if(inputs[i].type=='text' || inputs[i].type=='password')
{
if(inputs[i].name!='fname' && inputs[i].name!='lname')
{
inputs[i].onkeyup=check;
els.push(inputs[i]);
}
}
}
}
function check()
{
var isValid=true;
for(i=0; i<els.length;i++)
{
if(!els[i].value.length)
{
isValid=false;
break;
}
else isValid=true;
}
var reg=document.getElementById('register');
if(isValid && matctValidInputs()) reg.disabled=false;
else reg.disabled=true;
}
function matctValidInputs()
{
var re=/^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{3}$/;
var ps=document.getElementById('mypassword');
var cps=document.getElementById('myconfirmpassword');
var snum=document.getElementById('mysnumber');
var mail=document.getElementById('myemail');
if(ps.value.length>5 && ps.value==cps.value && re.test(mail.value) && isNumber(snum.value))
return true;
else return false;
}
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n) && n.length>5;
}
Before you test the demo:
Password must be 6 characters and match with confirm password.
The Sigma Number must be a number and minimum 6 digits.
Email must match a valid email (very basic regex)
No alerts/notifications given.
DEMO.
just copy and paste my code.there might be few things you might wanna improve.If it is so,let me know
<script type="text/javascript">
function fnc()
{
var name=document.getElementById("mymname").value;
var username=document.getElementById("myusername").value;
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
var number=document.getElementById("mysnumber").value;
var email=document.getElementById("myemail").value;
if(name!='' && username!='' && password!='' && confirmpassword!='' && number!='' && email!='')
{
document.getElementById("register").disabled=false;
}
else
document.getElementById("register").disabled=true;
}
function check()
{
var password=document.getElementById("mypassword").value;
var confirmpassword=document.getElementById("myconfirmpassword").value;
if(password!=confirmpassword)
{
alert("password missmatches");
return false;
}
}
</script>
<div id="container" style="height:700px;">
<a href="login.php" class="anchor"><div id="back">
<h2>Back</h2>
</div></a>
<div id="registration_container" >
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FF9">
<tr>
<form name="form3" method="post" action="check_finish_registration.php" onSubmit="return check()">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FF9">
<tr>
<td colspan="3"><strong>Complete Registration </strong></td>
</tr>
<tr>
<td width="2000">First Name</td>
<td width="6">:</td>
<td width="294"><?php echo $fname ?></td>
</tr>
<tr>
<td width="2000">Middle Name*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mymname" id="mymname" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Last Name</td>
<td width="6">:</td>
<td width="294"><?php echo $lname ?></td>
</tr>
<tr>
<td width="2000">Create a Username*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myusername" id="myusername" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Create a Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mypassword" id="mypassword" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">Confirm Your Password*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myconfirmpassword" id="myconfirmpassword" onKeyUp="fnc()">
</td>
</tr>
<tr>
<td width="2000">Enter your Sigma Number*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="mysnumber" id="mysnumber" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">E-Mail Address*</td>
<td width="6">:</td>
<td width="294"><input type="text" name="myemail" id="myemail" onKeyUp="fnc()"></td>
</tr>
<tr>
<td width="2000">* required field</td>
<td> </td>
<td><input type="submit" id="register" value="Register" disabled='disabled' "></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</div>