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>.)
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'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();
})
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 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.