We Keep Coding

Bootstrap toggle disappears when paginating using Jquery DataTable

I am working on an application that manages the presence of participants at an event. I have a problem with the bootstrap toggle. I'm using it in a Jquery datatable. As soon as I change the page to go to the next page with the arrows of the table the toggle disappears i have just a white checkbox. I have the impression that it does not reload when the new page is loaded. Somebody would have a solution to this problem. I put the captures of the bugs in attachments.
Thanks in advance.
Bootstrap Toogle:
DEMO
<?php include 'admin/db_connect.php' ?>
<?php
$event = $conn->query("SELECT * FROM events where md5(id) = '{$_GET['c']}'")->fetch_array();
foreach($event as $k => $v){
$$k = $v;
}
?>
<div class="content-header">
<div class="container-md">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0"><?php echo ucwords($event)." Event" ?></h1>
</div><!-- /.col -->
</div><!-- /.row -->
<hr class="border-primary">
</div><!-- /.container-fluid -->
</div>
<div class="col-lg-12">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card card-outline card-primary">
<div class="card-header">
<div class="card-tools d-flex justify-content-end" style="width: calc(40%)">
<a class="btn btn-block btn-sm btn-default btn-flat border-primary col-sm-4 mr-2" href="javascript:void(0)" onclick="location.reload()"><i class="fa fa-redo"></i> Rafraîchir</a>
<?php if($status != 2): ?>
<!--<a class="btn btn-block btn-sm btn-default btn-flat border-primary new_attendee m-0 col-sm-4" href="javascript:void(0)"><i class="fa fa-plus"></i> Nouveau participant</a>-->
<?php endif; ?>
</div>
</div>
<div class="card-body">
<?php if($status == 2): ?>
<div class="alert alert-info"><i class="fa fa-info-circle"></i> L'inscription et la participation à l'événement sont désormais closes. </div>
<?php endif; ?>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Noms & prénoms</th>
<th>Sexe</th>
<th>Email</th>
<th>Participation</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
$qry = $conn->query("SELECT a.*,concat(a.lastname,', ',a.firstname,' ',a.middlename) as name,e.event FROM attendees a inner join events e on e.id = a.event_id where e.id = $id order by unix_timestamp(e.date_created) desc ");
while($row= $qry->fetch_assoc()):
?>
<tr>
<th class="text-center"><?php echo $i++ ?></th>
<td><b><?php echo ucwords($row['name']) ?></b></td>
<td><b><?php echo ucwords($row['gender']) ?></b></td>
<td><b><?php echo $row['email'] ?></b></td>
<td class="text-center">
<input type="checkbox" name="status_chk" id="" data-bootstrap-switch data-toggle="toggle" data-on="Present" data-off="Waiting" class="switch-toggle status_chk" data-size="xs" data-onstyle="success" data-offstyle="danger" data-width="5rem" data-id='<?php echo $row['id'] ?>' <?php echo $row['status'] == '1' ? 'checked' : '' ?>>
</td>
<td class="text-center">
<div class="btn-group">
<?php if($status != 2): ?>
<button href="button" class="btn btn-primary btn-flat edit_attendee" data-id="<?php echo $row['id'] ?>">
<i class="fas fa-edit"></i>
</button>
<?php endif; ?>
<button href="button" class="btn btn-info btn-flat view_attendee" data-id="<?php echo $row['id'] ?>">
<i class="fas fa-eye"></i>
</button>
<?php if($status != 2): ?>
<button type="button" class="btn btn-danger btn-flat delete_attendee" data-id="<?php echo $row['id'] ?>">
<i class="fas fa-trash"></i>
</button>
<?php endif; ?>
</div>
</td>
</tr>
<?php endwhile; ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.view_attendee').click(function(){
uni_modal("Détails du participant","view_attendee.php?id="+$(this).attr('data-id'))
})
$('.new_attendee').click(function(){
uni_modal("Nouveau participant","manage_attendee.php?event_id=<?php echo $id ?>","mid-large")
})
$('.edit_attendee').click(function(){
uni_modal("Modifier les détails du participant","manage_attendee.php?id="+$(this).attr('data-id')+"&event_id=<?php echo $id ?>","mid-large")
})
$('.delete_attendee').click(function(){
_conf("Êtes-vous sûr de supprimer ce participant ?","delete_attendee",[$(this).attr('data-id')])
})
$('.status_chk').change(function(){
var status = $(this).prop('checked') == true ? 1 : 2;
if($(this).attr('data-state-stats') !== undefined && $(this).attr('data-state-stats') == 'error'){
$(this).removeAttr('data-state-stats')
return false;
}
var _this = $(this)
// return false;
var id = $(this).attr('data-id');
start_load()
$.ajax({
url:'admin/ajax.php?action=update_attendee_stats',
method:'POST',
data:{id:id,status:status},
error:function(err){
console.log(err)
alert_toast("Something went wrong while updating the attendee's status.",'error')
_this.attr('data-state-stats','error').bootstrapToggle('toggle')
end_load()
},
success:function(resp){
if(resp == 1){
alert_toast("attendee status successfully updated.",'success')
end_load()
}else if(resp == 2){
alert_toast("Event Registration and Attendance is close.",'error')
_this.attr('data-state-stats','error').bootstrapToggle('toggle')
setTimeout(function(){
location.reload()
},2000)
}else{
alert_toast("Something went wrong while updating the attendee's status.",'error')
_this.attr('data-state-stats','error').bootstrapToggle('toggle')
end_load()
}
}
})
})
$('table').dataTable()
})
function delete_attendee($id){
start_load()
$.ajax({
url:'admin/ajax.php?action=delete_attendee',
method:'POST',
data:{id:$id},
success:function(resp){
if(resp==1){
alert_toast("Data successfully deleted",'success')
setTimeout(function(){
location.reload()
},1500)
}
}
})
}
</script>

it looks like your problem is in this file:
admin/ajax.php?action=update_attendee_stats
can you share the script here?

Checkbox panel to open if sub-checkboxes are checked

I have a set of checkboxes with sub checkboxes
<div id="box-fiter-cat" class="box-filter checkbox checkbox-info">
<h6 class="lead">Categories</h6>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php $filteredCategories = $_GET['cat'];foreach($categories as $cat): ?>
<div class="panel panel-default">
<div id="heading-
<?php echo $cat['slug'] ?>" class="panel-heading" role="tab">
<span class="item">
<input
<?php if(in_array($cat['slug'].'.*',$filteredCategories)){ echo 'checked="checked"'; } ?> id="cat-
<?php echo $cat['slug'].'.*' ?>" type="checkbox" name="cat[]" value="
<?php echo $cat['slug'].'.*'?>">
<label for="cat-
<?php echo $cat['slug'].'.*' ?>">
<?php echo $cat['title'] ?>
</label>
</span>
<a class="pull-right" role="button" data-toggle="collapse" href="#collapse-
<?php echo $cat['slug'] ?>" aria-expanded="true" aria-controls="collapse-fund">
<i class="fa fa-chevron-down"></i>
</a>
</div>
<div id="collapse-
<?php echo $cat['slug'] ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-
<?php echo $cat['slug'] ?>">
<ul class="list-group">
<?php foreach($cat['childs'] as $childs_cat): ?>
<li>
<span class="item">
<input
<?php if(in_array($childs_cat['slug'],$filteredCategories)){ echo 'checked="checked"'; } ?> id="cat-
<?php echo $cat['slug'] ?>-
<?php echo $childs_cat['slug'] ?>" name="cat[]" value="
<?php echo $childs_cat['slug'] ?>" type="checkbox">
<label for="cat-
<?php echo $cat['slug'] ?>-
<?php echo $childs_cat['slug'] ?>">
<?php echo $childs_cat['title'] ?>
</label>
</span>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
On first load it will look like below:
My question is how do I make sure that when user checks any of the sub checkboxes, the parent panel will stay open? I tried to fiddle around but it resulted in all other panels to open instead only the one that is being checked.

Toggle a single table while hiding other tables

I'd like to toggle a table when one of the link is clicked. And if I am going to click another link to toggle the other table, the previous table that has been toggled should hide. I have an href like this:
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><?php echo 'Welcome, '.$name; ?></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>President</li>
<li>Vice President</li>
<li>Secretary</li>
<li>Treasurer</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
and i also have a data tables below that should be toggled:
<div class="candidates" style="display: none">
<div class="container">
<div class="page-header">
<h3>President Lists:</h3>
</div>
<form align="center" method = "post" action="processvote.php">
<table class="table table-bordered table-responsive candidates">
<thead>
<tr>
<th>Photo</th>
<th>Name</th>
<th>Partylist</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<?php
$query_get_users = mysqli_query($conn, "SELECT * FROM tbl_users WHERE position = 'President'");
while($row = mysqli_fetch_assoc($query_get_users)) {
$id = $row['id'];
$photo = $row['photo'];
$name = $row['name'];
$partylist = $row['partylist'];
$position = $row['position'];
?>
<td><img src="<?php echo $upload_dir.$photo; ?>" height="40"></td>
<td><input type="radio" value="<?php echo $id; ?>"> <?php echo $name; ?></td>
<td><?php echo $partylist; ?></td>
<td><?php echo $position; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<br></br>
<td><center><input type="submit" name="vote" value="VOTE"></center></td>
</form>
</div>
<div class="candidates" style="display: none;">
<div class="container">
<div class="page-header">
<h3>Vice President Lists:</h3>
</div>
<form align="center" method = "post" action="processvote.php">
<table class="table table-bordered table-responsive candidates">
<thead>
<tr>
<th>Photo</th>
<th>Name</th>
<th>Partylist</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<?php
$query_get_users = mysqli_query($conn, "SELECT * FROM tbl_users WHERE position = 'Vice President'");
while($row = mysqli_fetch_assoc($query_get_users)) {
$id = $row['id'];
$photo = $row['photo'];
$name = $row['name'];
$partylist = $row['partylist'];
$position = $row['position'];
?>
<td><img src="<?php echo $upload_dir.$photo; ?>" height="40"></td>
<td><input type="radio" value="<?php echo $id; ?>"> <?php echo $name; ?></td>
<td><?php echo $partylist; ?></td>
<td><?php echo $position; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<br></br>
<td><center><input type="submit" name="vote" value="VOTE"></center></td>
</form>
</div>
For example, I'm going to click the link President it will toggle the table President. and if I'm going to click the Vice President link, the table for vice president should toggle and the President table should hide. How can I implement this? So far, I have tried to do a jquery below:
<script>
$(function() {
$(document).on('click', 'a', function(event) {
$(this).siblings().show();
$(this).parent().siblings().each(function(index, element) {
$(element).find('.candidates:visible').hide();
})
})
})
</script>

You have to do these three changes in your code:-
Give your tables a class or and Id like :
<div id="vicePresident" class="candidates" style="display: none;">
<div class="container">
<div class="page-header">
<h3>Vice President Lists:</h3>
</div>
Add these new ids as a custom attribute data-tableid in your navigation:
<ul class="nav navbar-nav">
<li>President</li>
<li>Vice President</li>
<li>Secretary</li>
<li>Treasurer</li>
</ul>
Javascript change , change the click handler to read this data-tableid attribute:
$(document).on('click', 'a', function(event) {
//1. Hide all candidate class elements
$(".candidates").hide();
//2. Show the candidate which is clicked based on the data-tableid
var idOfTable = $(event.target).data("tableid");
$('#'+idOfTable).show();
})

Retrieve ACF unique ID generated by repeater field for use in a JavaScript function

I'm using advanced custom fields to repeat divs. There is a unique ID injected into the wrapper div for a click function that reveals content (i can't use a class because it triggers all the divs at once).
How do I target this ID in my javascript function dynamically? Here is my code;
<?php if( have_rows('team') ): $i = 0; ?>
<?php while( have_rows('team') ): the_row(); $i++;
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" id="wrap-<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
And my function;
<script>
(function($) {
$('#wrap-1').on('click',function(){
$('#show-1').slideToggle('slow');
});
$('#show-1 .close').on('click',function(){
$('#show-1').slideToggle('slow');
});
})( jQuery );
</script>
Edit: the id is dynamically injected here;
id="wrap-<?php echo $i; ?>"

I would add the ID to each element in a data attribute, and use this and that ID to toggle appropriately. To summarize the JS, when you click on the button, you get the stored data attribute, which can be used to find the appropriate target for toggling.
To the HTML, I add the data ID to the #show divs, and removed the id completely from the button. It's not needed.
HTML changes:
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
and
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">`
Javascript
(function($) {
$('.teamInfo').on('click', function() {
var id = $(this).data('toggle-id');
$('#show-' + id).slideToggle();
});
$('.card-reveal .close').on('click',function() {
var id = $(this).closest('.card-reveal').data('toggle-id');
$('#show-' + id).slideToggle('slow');
});
})( jQuery );
And the entire HTML as you posted it:
<div class="small-12 medium-4 large-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>

I'd look at using this. You can still use a class for an event selector, and in the handler, have context to know which was selected.
<script>
(function($) {
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
})( jQuery );
</script>
^ i'm not clear if you were adding the .close class for a visual cue or if you wanted to use that to trach shown state. Might just need the one handler to act as a toggle. Or an if statement in the toggle if other things need to happen on the transition.

How can i create a new set of columns to my code below instead of row?

I am trying to create a information site for my coworkers where they can add all the info they have so they don't need to write it down. The variable $cam_loc displays the location of certain equipment. When i use the code below instead of using one panel title per location it duplicates the location if there is more than 1 equipment in that place. I would like to make a conditional that verifies if the location is duplicated and if so instead of adding another panel-title it should add another column with the second pair of information in that location.
This is the code:
<?php
$cam = $db->prepare('select * from camere');
$cam->execute();
while ($cams = $cam->fetch(PDO::FETCH_OBJ)) {?>
<ul class="list" style="list-style: none;">
<div class="panel panel-primary">
<div class="panel-heading">
<li><h3 class="panel-title"><?php $cam_loc = $cams->locatie; ?><?php echo $cam_loc;?></h3> </li>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-2" align="center">
<div class="list-group">
<a class="list-group-item">Model: <strong><?php echo $cams->model; ?></strong></a>
<a class="list-group-item">Ip Intern: <strong><?php echo $cams->ip_int; ?></strong></a>
<a class="list-group-item">Ip Extern: <strong><?php echo $cams->ip_ext; ?></strong></a>
<a class="list-group-item">Port: <strong><?php echo $cams->port; ?></strong></a>
<a class="list-group-item">User: <strong><?php echo $cams->user; ?></strong></a>
<a class="list-group-item">Pass: <strong><?php echo $cams->pass; ?></strong></a>
</div>
</div>
</div>
</div>
</div>
</ul>
<?php } ?>

Firstly you'd need to sort your results by title in your SQL statement which will group them together, then use an if statement to work out if the current record has the same title as the previous one.
<?php
$cam = $db->prepare('select * from camere');
$cam->execute();
$heading = "";
while ($cams = $cam->fetch(PDO::FETCH_OBJ)) {?>
<ul class="list" style="list-style: none;">
<div class="panel panel-primary">
<?php $cam_loc = $cams->locatie;
if ($heading != $cam_loc) { ?>
<div class="panel-heading">
<li><h3 class="panel-title"><?php echo $cam_loc; ?></h3> </li>
</div>
<?php }
//Update $heading ready for the next row.
$heading = $cam_loc;
} ?>
<div class="panel-body">
<div class="row">
<div class="col-md-2" align="center">
<div class="list-group">
<a class="list-group-item">Model: <strong><?php echo $cams->model; ?></strong></a>
<a class="list-group-item">Ip Intern: <strong><?php echo $cams->ip_int; ?></strong></a>
<a class="list-group-item">Ip Extern: <strong><?php echo $cams->ip_ext; ?></strong></a>
<a class="list-group-item">Port: <strong><?php echo $cams->port; ?></strong></a>
<a class="list-group-item">User: <strong><?php echo $cams->user; ?></strong></a>
<a class="list-group-item">Pass: <strong><?php echo $cams->pass; ?></strong></a>
</div>
</div>
</div>
</div>
</div>
</ul>
<?php } ?>
You may have to move some of your HTML tags around a bit within those new code lines to give you the desired layout you require but as it is above you won't get a new heading for every record.