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();
})
Related
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?
I am in the process of creating a support ticket system, however I have ran into a problem with getting generated modals to open. Below you will find the code that generates the list of tickets (As well as the button to open the modal) along with the modal generation itself.
<table class="table table-hover table-vcenter">
<tbody>
<?php
$Status = $_GET['filter'];
$DataArray = mysqli_query($con,"SELECT * FROM Tickets WHERE Status='$Status'");
while($row = mysqli_fetch_array($DataArray)) {
?>
<tr>
<td class="font-w600 text-center" style="width: 80px;">#TCK<?php echo $row['ticketID']; ?></td>
<td class="hidden-xs hidden-sm hidden-md text-center" style="width: 100px;">
<?php if ($row['Status'] == 'Open') { echo "<span class=\"label label-success\">Open</span>";}elseif($row['Stauts'] == 'Pending'){echo"<span class=\"label label-warning\">In Progress</span>";}else{echo "<span class=\"label label-danger\">Resolved</span>";} ?>
</td>
<td>
<a class="font-w600" data-toggle="modal" data-target=<?php echo $row['ticketID']; ?> href="#"><?php echo $row['Title']; ?></a>
<div class="text-muted">
<em><?php echo humanTiming($row['Created']); ?> ago</em> by <?php echo $row['Username']; ?>
</div>
</td>
<td class="hidden-xs hidden-sm hidden-md text-muted" style="width: 120px;">
<em><?php echo $row['Catagory']; ?></em>
</td>
<td class="hidden-xs hidden-sm hidden-md text-center" style="width: 60px;">
<span class="badge badge-primary"><i class="fa fa-comments-o"></i> <?php echo CountTicketComments($con,$row['ticketID']); ?></span>
</td>
</tr>
<?php } ?>
</tbody>
The above snippet is where I generate the table of tickets, 'data-target' should be the name of the modal as im aware, in this case i simply set the data-target to the tickets ID.
<?php
$Status = $_GET['filter'];
$DataArray = mysqli_query($con,"SELECT * FROM Tickets WHERE Status='$Status'");
while($row = mysqli_fetch_array($DataArray)) {
?>
<div class="modal fade" id=<?php echo $row['ticketID']; ?> tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-popout">
<div class="modal-content">
</div>
</div>
</div>
<?php } ?>
Lastly the above snipped is where I generate each modal (I removed the content to reduce clutter) as you can see I set the modal's 'id' to the ticketID just as I did with the data-target...
So I am unsure as to why this is not working, any help would be greatly appreciated.
The data-target attribute should be set to #elementID you're missing the # character at the start.
Try:
<a ... data-target="#<?php echo $row['ticketID']; ?>" ... > ... </a>
I am using BOOTSTRAP ACCORDIAN to show invited speakers in our website.
I am in Wordpress 4.8.
The code used addtionally is the following:
function toggleChevron(e) {
var theAccordion = $('#accordion');
$(e.target)
.prev('.panel-heading')
.find('i.indicator')
.toggleClass('glyphicon-minus glyphicon-plus');
//$('#accordion .panel-heading').css('background-color', 'green');
theAccordion.find('.panel-heading').removeClass('highlight');
$(e.target).prev('.panel-heading').addClass('highlight');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
I am getting the panel heading and body from a php:
PHP:
<div class="clearfix panel-group" id="accordion" >
<?php
global $wpdb;
$result = $wpdb->get_results( "SELECT * FROM `Invited_Speakers_auto`;");
foreach ( $result as $print ) { ?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#<?php echo $print->Last_Name;?>"> <?php echo $print->First_Name;?> <?php echo $print->Last_Name;?>, <?php echo $print->Institute_Address;?>
</a> </h4>
</div>
<div id="<?php echo $print->Last_Name;?>" class="panel-collapse collapse in">
<div class="panel-body">
<img style="border-radius: 10%; padding: 10px; float: left;" src="<?php echo $print->Image_link;?>" alt="" width="20%" align="middle" />
<table style="width:79%;float: right;">
<tbody>
<td ><?php echo $print->Designation;?> </td>
</tr>
<tr>
<td style="display:block; width:50%;"><?php echo $print->Department_Address;?></td>
</tr>
<tr>
<td> Email Id: <?php echo $print->Email_Id;?> </td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td >Research Interests</td>
<td>:</td>
<td> <?php echo $print->Research_Interests;?></td>
</tr>
<tr>
<td>
Achievements
</td>
<td> : </td>
<td> <?php echo $print->Acheivements;?>
<button style="float:right;"><a style="color: white;" href="Home_page_Link" target="_blank" rel="noopener"> More Info </a> </button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<?php } ?>
</div>
When I am running the above code, all works fine except the following issue:
All collapsible body is opened when the page gets refreshed.
For successive double click on any panel-heading all settle down normally.
What is the problem?
I dont want any of the body should open when the page gets refreshed. Only when the user click one of the panel heading, the corresponding panel-body should be displayed and the rest should remain invisible.
PS: I have added all the javascript files at the footer.
Is that a problem??
Is it a running error?
Kindly clarify this. Click here to visit the page. In that Invited Speaker section has this problem.
Thank you in advance.
Try removing the in class from the panel-collapse element. Bootstrap adds this automatically when opening an expander panel - having this class set by default causes each panel to appear open.
I have a page in which a user is able to select his desired category and get a listing of organizations. As for now, I've managed to get data from one selected category.
My issue now is getting multiple selected categories and retrieve data from multiple ids.
List of categories:
<div class="col-md-4 sidebar well col-md-push-8">
<div class="sidebar__block">
<div class="sidebar__inner">
<h4 class="h4">Filter by category</h4>
<?php foreach ($categories as $c): ?>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="category[]" id="<?php echo $c->id;?>" value="<?php echo $c->id;?>" class="styled" <?php if($c->id==$_GET['category']){ echo 'checked="checked"'; } ?>>
<label for="<?php echo $c->title; ?>"><?php echo $c->title;?></label>
</div>
</div>
<?php endforeach ?>
<div class="form-group">
<button type="submit" class="btn btn-sd btn-sd-green full-width filter_button" name="subscribe">Filter <i class="icon-right-small"></i></button>
</div>
</div>
</div>
</div>
List of data(organizations according to category selected):
<div class="col-md-8 col-md-pull-4">
<!--start show category with title-->
<div class="lgi__block lgi__block-2" id="appnendGridId">
<!--start show single category with title-->
<?php if(!empty($enterprises)): ?>
<?php foreach ($enterprises as $e): ?>
<div class="lgi__item category1">
<a class="lgi__item-inner" target="_blank" href="<?php echo $this->createUrl('frontend/enterprise', array('id' => $e->id)) ?>">
<div class="lgi__block-img">
<h5 class="lgi__label"><?php if($e->isIdeaEnterpriseActiveAccreditedMembership()): ?><?php echo $e->renderIdeaEnterpriseMembership('text')?><?php endif; ?></h5>
<img class="img-responsive-full lgi__img wp-post-image" src="<?php echo $e['imageLogoUrl']; ?>" alt="">
<div class="overlay"></div>
</div>
<div class="lgi__title stripe">
<h4><?php echo $e['title']; ?></h4>
<p><?php echo ysUtil::truncate($e['text_oneliner'], 85) ?></p>
</div>
</a>
</div>
<?php endforeach ?>
<?php else: ?>
<?php echo Notice::inline('Enterprises not found in this category or keyword') ?>
<?php endif; ?>
<!--end show single category with title-->
</div>
<!--end show category with title-->
<div class="row load_more_div">
<div class="col-sm-12 text-center">
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts collapse please_wait_btn_class">
<h4 style="margin-top: 7px; color: #fff;">Loading...</h4>
</button>
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts load_more_btn_class">
Load More <i class="icon-arr-down"></i>
</button>
</div>
</div>
</div>
JS :
$(document).on('click','.filter_button',function(e){
e.preventDefault();
var category = [];
$.each($("input[name='category[]']:checked"), function(){
window.location.replace('/idea/frontend/explore/category/'+$(this).val());
});
});
Appreciate if anyone could help me in this matter.
I am struggling to get this for cycle to show only 1 column in html. At the moment it works but it gives me the values for the 3 columns, please check the example above:
The columns I have in spreadsheet:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapsetest"><span class="glyphicon glyphicon-file">
</span>Extensions</a>
</h4>
</div>
<div id="collapsetest" class="panel-collapse collapse">
<div class="panel-body">
<? var linkdata = getLinks(); ?>
<? for (var i = 0; i < linkdata.length; i++) { ?>
<table class="table">
<tr>
<? for (var j = 0; j < linkdata[i].length; j++) { ?>
<td><span class="<?= linkdata[i][2] ?>"></span><a target="_blank" href="<?= linkdata[i][1] ?>"><?= linkdata[i][j] ?></a></td>
<? } ?>
</tr>
<? } ?>
</table>
</div>
</div>
</div>
You don't need the inner loop over j, since there is one entry per row. Instead of
<tr>
<? for (var j = 0; j < linkdata[i].length; j++) { ?>
<td><span class="<?= linkdata[i][2] ?>"></span><a target="_blank" href="<?= linkdata[i][1] ?>"><?= linkdata[i][j] ?></a></td>
<? } ?>
</tr>
you should have
<tr>
<td>
<span class="<?= linkdata[i][2] ?>"></span>
<a target="_blank" href="<?= linkdata[i][1] ?>"><?= linkdata[i][0] ?></a>
</td>
</tr>
(Also, it's not clear if you really wanted that span to be empty, or if you meant it to contain the link, in which case </span> should be moved after </a>.)