Why Bootstrap Accordion is showing all the collapsible boxes? - javascript

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.

Related

modal not opening after generated

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>

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

Displaying iframe inside div

I want to display the iframe inside a div. I want to display the data inside the iframe. So I've tried like this:
nav-bar.php:
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="Report">Report<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Dashboard
</li>
</ul>
</li>
report.php:
<!DOCTYPE html>
<html lang="en">
<head>
<?php include("heading.php"); ?>
</head>
<body role="document">
<?php include("includes/inc-header.php"); ?>
<div class="panel-body">
<div class="col-sm-12">
<iframe id="iframe_report" name="iframe_report" style="border:dotted; width:100%; height:450px;"></iframe>
</div>
</div>
</body>
</html>
content.php:
<?php
include("configuration.php");
$report = $_GET["report"];
$title = $_GET["title"];
$pagetitle = $title;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<?php include("heading.php"); ?>
</head>
<body role="document">
<?php include("nav-bar.php"); ?>
<div class="panel panel-default">
<div class="panel-heading">
<?php echo $title; ?>
<input type="hidden" id="input" name="input" value="<?php echo $report; ?>">
</div>
<div class="panel-body">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="table_list" class="table table-striped table-bordered hide">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>List</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
jQuery.ajaxSetup({ cache: false });
var input_report = jQuery("#input").val();
var table_id = "#table_report_" + input;
jQuery(table_id).removeClass("hide").addClass("show");
jQuery(table_id).DataTable({
paging: false,
select: true,
ajax: "reports-db.php?report=" + input_report,
});
});
</script>
This is how I tried. When I click the option in the nav-bar, the data should be fetched and displayed in the same page. But, what happens is, when I click the option, it opens in the new page. But, I want to display it in the same page and all the nav-bar options should also be displayed. I've want it in such a way that, the nav-bar should be displayed and below that there lies a div, inside which the iframe should be displayed. But, don't know what's redirecting it to the new window. Can someone guide me?

GAS scriplet to create an HTML column with links from spreadsheet data

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>.)

jquery ajax pass variable from link

I'm trying to pass a variable from my link to ajax, but I cannot do so.
This is the code I'm working on:
<script type="text/javascript">
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
$("#btn-delete").click(function(e) {
var id = $(this).attr('data-id');
$.ajax({
type:"POST",
data: { id : id },
url:"delete-project.php",
success:function(result){
$("#dialog-example").modal('hide');
}
});
});
});
</script>
<table class="table table-bordered">
<tr>
<td>Project Code</td>
<td>Description</td>
</tr>
<?php
$stmt2 = $conn->prepare( "SELECT project_code, description FROM tblprojects" );
$stmt2->execute();
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];?>
<tr class="record" id="record-">
<td>
<?php echo $project; ?>
</td>
<td><?php echo $desc; ?></td>
<td>
<a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
</td>
<td>
<a href="#" data-id="<?php echo $project; ?>" id="<?php echo $project; ?>" class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">No<a>
<a data-id="<?php echo $project; ?>" class="btn btn-danger" id="btn-delete">Yes<a>
</div>
</div>
</tr>
<?php
}
?>
</table>
I have a table where it has a delete column, if it is clicked a confirmation modal will appear that has 2 options yes or no. If yes is clicked, I need to delete that record and dismiss the modal, display the result without refreshing the page. How can I do that? I tried using ajax, I don't know if I am using it correctly. Your help will greatly appreciated. Thanks.
IDs must be unique in your DOM.
You have multiple links with id="btn-delete". That is the reason your code is not working
Change it to class, as below
In your markup:
<a data-id="<?php echo $project; ?>" class="btn btn-danger btn-delete">Yes<a>
And in your jQuery:
$(".btn-delete").click(...);
IDs must be unique Change to class instead and use $(this).data("id")
You also likely want to hide the deleted data from the page too
<a data-id="<?php echo $project; ?>"
class="btn btn-danger btn-delete">Yes<a>
$(".btn-delete").on("click",function(e) {
e.preventDefault(); // cancel the link
var id = $(this).data('id');
$.ajax({
type:"POST",
data: { id : id },
url:"delete-project.php",
success:function(result){
$(this).closest("tr").remove(); // remove the row from view
$("#dialog-example").modal('hide');
}
});
});
Lastly I suggest you have only ONE dialog on the page and pass the ID to delete and ID or the row to it
Passing data to a jQuery UI Dialog
You're just hiding the modal when the delete success event is executed. You have to remove the line from the table too.
You can remove it like this :
$(this).parents('tr').remove();
UPDATE :
The following code was tested and is working. If you still have error, you should open firebug and report the error message. You have some basic syntax problem or errors in your code, I corrected some in this solution, but you should look at tutorials or documentations to learn basic and good practice to provide a good structured code.
Just replace the html table lines (tr) below with your php loop to generate the lines.
<!-- place your modal out of a table. In a table you have tr and td, no div.
By the way you just need 1 modal for all rows -->
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
No
Yes
</div>
</div>
<table class="table table-bordered">
<tr>
<th>Project Code</th>
<th>Description</th>
<th>Actions</th>
</tr>
<tr class="record" id="record-1">
<td>
project1
</td>
<td>description</td>
<td>
<a href="update-project.php?code=proj1" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
<a href="#" data-id="proj1" id="proj1" class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
</tr>
<tr class="record" id="record-2">
<td>
project2
</td>
<td>description</td>
<td>
<a href="update-project.php?code=proj2" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
<a href="#" data-id="proj2" id="proj2" class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
</tr>
</table>
<script>
$(function(){
$(".btn-show-modal").click(function(e){
e.preventDefault();
var btnDelete = $("#btn-delete");
//show the modal
$("#dialog-example").modal('show');
//save the id to delete if confirmed
var id=$(this).attr('data-id');
btnDelete.data('toRemove', id);
return false;
});
//action when clicking YES
$("#btn-delete").click(function(e) {
var id = $("#btn-delete").data('toRemove');
alert(id);
$.ajax({
type:"POST",
data: { id : id },
url:"delete-project.php",
success:function(result){
//hide the modal
var modal = $("#dialog-example");
modal.modal('hide');
var btnDelete = $("#btn-delete");
//remove the saved id
var id= btnDelete.data('toRemove');
//remove the row dynamically
$("#"+id).closest('tr').remove();
},
error:function( jqXHR, textStatus ) {
alert( "Request has failed! ; " + jqXHR.status + " / "+textStatus);
}
});
});
});
</script>

Categories