javascript displaying error function is not defined.

javascript displaying error function is not defined. - javascript

Javascript code:
<script>
$(document).ready(function(){
$("#verify").click(function(){
if ($("#cval").val()==$("#captcha").text()){
$("#pop").modal("hide");
var id=$("#captcha").attr("data-id");
if (_ths.hasClass("red")){
$.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){
_ths.removeClass("red");
});
}
else{
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){
_ths.addClass("red");
});
}
$("#captcha").val("");
}
else{
$("#cval").val("");
$("#cval").attr("placeholder","invalid captcha");
}
});
function thumb(id,ths){
if (<?=$loggedin?>){
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id});
$(ths).addClass("red");
}
else{
_ths=$(ths);
var number = Math.floor(Math.random()*90000) + 10000;
$("#captcha").attr("data-id",id);
$("#captcha").text(number);
$("#pop").modal("show");
}
};
function staticthumb(id,ths){
if (<?=$loggedin?>){
if ($(ths).hasClass("red")){
$.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){
$(ths).removeClass("red");
});
}
else{
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){
$(ths).addClass("red");
});
}
}
else{
_ths=$(ths);
var number = Math.floor(Math.random()*90000) + 10000;
$("#captcha").attr("data-id",id);
$("#captcha").text(number);
$("#pop").modal("show");
}
};
});
</script>
HTML code:
<div class="col-sm-8" id="lists">
<?php if(isset($products)):?>
<?php foreach($products as $p):?>
<div class="col-md-12">
<div class="product-view row" style="border-bottom:1px solid #eee;margin-bottom:20px;padding:20px 0px 20px 0px;background:#f1f1f1">
<div class="col-sm-3 col-md-3 col-lg-3">
<?php $j = 0;?>
<?php foreach($p['checkbox'] as $checkbox):?>
<?php if($j == 0):?>
<div class="large-image">
<img alt="#" src="<?php echo base_url();?>/uploads/<?php echo $checkbox['Image']?>" />
<div class="image-title"><span class="icon-thumbs-up" onclick="staticthumb(<?php echo $checkbox['UniqueID']?>,this);" id="thumb<?php echo $checkbox['UniqueID']?>" style="font-size:24px;"></span></div>
</div>
<?php endif;?>
<?php $j++;?>
<?php endforeach;?>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="product-label">
<h4><?php echo $p["FullName"];?>, <?php echo $p["Area"];?></h4>
<h5 style="font-size:14px"><span class="icon-calendar"></span> <?php echo $p["SaleDate"];?></h5>
<h5 style="font-size:14px"><span class="icon-clock"></span>
<?php for($i = 0; $i < count($p['StartTime']); $i++):?>
<?php echo $p['StartTime'][$i].'-'.$p['EndTime'][$i]?>
<?php endfor;?>
</h5>
<div data-balloon-length="fit" data-balloon=" <?php echo $p["Address1"].'-'.$p["Postal"];?>" data-balloon-pos="up" ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-home"></span> <?php echo $p["Address1"].'-'.$p["Postal"];?></h5></div>
<div data-balloon-length="fit" data-balloon=" <?php echo $p["description"];?>" data-balloon-pos="up" ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-file"></span> <?php echo $p["description"];?></h5></div>
<!--<div class="panel-group accordion-simple" id="product-accordion">
<div class="panel" style="background:#f1f1f1;">
<div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-address" class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Address </a> </div>
<div id="product-address" class="panel-collapse collapse">
<div class="panel-body"><h5 style="font-size:14px"><?php echo $p["Address1"];?></h5></div>
</div>
</div>
<div class="panel" style="background:#f1f1f1;">
<div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-size" class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Description </a> </div>
<div id="product-size" class="panel-collapse collapse">
<div class="panel-body"><h5 style="font-size:14px"><?php echo $p["description"];?></h5></div>
</div>
</div>
</div>-->
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="product-label">
<h4>CATEGORY</h4>
<?php foreach($p['checkbox'] as $checkbox):?>
<h5 style="font-size:14px"><?php echo $checkbox['Product']?></h5>
<?php endforeach;?>
</div>
</div>
</div>
</div>
<?php endforeach;?>
<?php else:?>
<h3 style="text-align:center">SORRY THERE IS NO ANY DATA IS AVAILABLE.</h3>
<?php endif;?>
HTML code for captcha validation:
<div class="modal fade bs-example-modal-sm" id="pop" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Please verify captcha</h4>
</div>
<div class="modal-body">
<h4 id="captcha" class="text-center"></h4>
<hr>
<div class="form-group">
<input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="verify">Verify</button>
</div>
</div>
</div>
</div>
when I am a clicking on thumb it displaying me function staticthumb is not defined. but in reality you can see that I wrote function staticthumb I declared staticthumb function but still it displaying error so please help me. right now I am helpless so please help me and try to resolve my issue and thanks in advance.

A Function declaration in JavaScript has Functional Scope, meaning it is only accessible from within the function in which it is declared. If it is not declared in a function, it is in global scope.
You are declaring your staticthumb function within an anonymous function so it will only be available within that scope. The easiest fix is to move the function declaration out of the anonymous function, which will pollute your global variable space ( which you would want to generally avoid, but that is a topic on its own)
TL;DR; Move your staticthumb function to the first line right after your <script> tag before your $(document).ready.

Related

How do I hide a section of a collapsible FAQ if the data is empty?

I have a collapsible FAQ section that sits on each members profile page. I'd like to hide the question and answer if the data field is empty.
<div class="row">
<div class="col-md-10">
<div class="panel panel-default1">>
<div class="panel-heading">
<h3 class="panel-title"><b>Who is the registered manager of <?php echo $user['full_name']?>?</b></h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<?php echo $user['registered_manager']?> is the registered manager of <?php echo $user['full_name']?>.
</div>
</div> </div>
<div class="col-md-10">
<div class="panel panel-default2">
<div class="panel-heading">
<h3 class="panel-title"><b>How many beds are there at <?php echo $user['full_name']?>?</b></h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
There are <?php echo $user['number_of_beds']?> beds in total at <?php echo $user['full_name']?>.</div>
</div> </div>
<div class="col-md-10">
<div class="panel panel-default3">
<div class="panel-heading">
<h3 class="panel-title"><b>Who owns <?php echo $user['full_name']?>?</b></h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<?php echo $user['full_name']?> is owned and operated by <?php echo $user['group_name']?>.</div>
</div> </div>
</div>
</div>
<script type="text/javascript">
jQuery(function ($) {
$('.panel-heading span.clickable').on("click", function (e) {
if ($(this).hasClass('panel-collapsed')) {
// expand the panel
$(this).parents('.panel').find('.panel-body').slideDown();
$(this).removeClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
}
else {
// collapse the panel
$(this).parents('.panel').find('.panel-body').slideUp();
$(this).addClass('panel-collapsed');
$(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
});
</script>
.panel-heading span
{
margin-top: -20px;
font-size: 15px;
}
.row
{
margin-top: 40px;
padding: 0 20px;
}
.clickable
{
cursor: pointer;
}
The $user['full_name'] will always be populated so I don't need to worry about that. In question one the field that needs to not be blank is $user['registered_manager']
Question 2 is $user['number_of_beds'] and Question 3 is ```<?php echo $user['group_name']
thanks in advance

You can achieve that by adding CSS class .hidden and checking if $user is empty in PHP
CSS:
.hidden { display: none; }
PHP:
<div class="col-md-10 <?php if( empty($user['registered_manager']) ) echo 'hidden' ?> ">
<div class="panel-heading">
<h3 class="panel-title">
<b>Who is the registered manager of <?php echo $user['full_name']?>
</b>.
</h3>
<span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-up"></i></span>
</div>
<div class="panel-body">
<?php echo $user['registered_manager']?> is the registered manager of <?php
echo $user['full_name']?>.
</div>
</div>

You can wrap parts of your html with php if statement which says when to render it. For example this part willl be only rendered when $user['full_name'] is not falsy (empty string, null, zero...).
<?php if ($user['full_name']): ?>
<div class="col-md-10">
...
<?php echo $user['full_name']?>
...
</div>
<?php endif ?>
See more examples here: https://www.w3schools.com/php/php_if_else.asp

I have a business sales page that shows results from a json file. I want to be able to pass the information for one listing on a results page [duplicate]

This question already has answers here:
PHP Pass variable to next page
(9 answers)
Closed 1 year ago.
My index.php page has a display of listings from a json file which looks good. But I am trying to send a result of a single listing from that page to another page (result.php). How do I display the results of that single listing to the new page?
Here is the code for my first page that is attached to the json file:
<?php
$filename = file_get_contents("/ListingCollection.json");
$listings = json_decode($filename);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://kit.fontawesome.com/ac048d9955.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div style="margin-left:150px; margin-right:150px; margin-bottom:150px;">
<?php foreach ($listings as $listing) { ?>
<span style="visibility:hidden;"><?= $listing->Oid; ?></span>
<div class="row align-items-center border-top">
<div class="col-3" style="padding:10px;">
<?= $listing->AdPhoto; ?>
</div>
<div class="row col-8" style="margin-left:10px;">
<div class="col-8 align-items-center">
<h2 style="color:#00471C; width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" type="button"><?= $listing->AdTitle; ?></h2>
<h3><?= $listing->AdTagLine; ?></h3>
<p><?= $listing->AdTagLine; ?></p>
</div>
<div class="col-4 align-items-start">
<center><h1><?= $listing->ListingPrice; ?></h1><h3>EBITDA: $<?= $listing->EBITDA; ?></h3></center><br><br>
<center><a class="btn btn-primary" href="<?= $listing->WebsiteURL; ?>?<?= $listing->Oid; ?>" role="button">See Listing</a></center>
</div>
</div>
</div>
<?php } ?>
</div>
</body>
</html>
Here is the code to my second page that I want to pull from single listing of index.php file:
<?php
require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
get_header();
$filename = file_get_contents("/ListingCollection.json");
$listings = json_decode($filename);
?>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://kit.fontawesome.com/ac048d9955.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div style="margin-left:150px; margin-right:150px; margin-top:50px; margin-bottom:50px;">
<?php foreach ($listings as $listing) { ?>
<!-- Ad Header -->
<div class="row align-items-center" style="margin-bottom:25px;">
<div class="col-12">
<h1><?= $listing->AdTitle; ?></h1>
<h3><?= $listing->County; ?>, <?= $listing->State; ?></h3>
</div>
</div>
<!-- Ad Photo -->
<div class="row" style="margin-bottom:25px;">
<div class="row col-8 align-items-center">
<div class="col-12">
<?= print "Your registration is: ".$regValue."."; ?>
<?= $listing->AdPhoto; ?><br><br>
</div>
<!-- Ad Pricing -->
<div class="col-6">
<h2>ASKING PRICE: $<?= $listing->ListingPrice; ?></h2>
</div>
<div class="col-6">
<h2>CASH FLOW: $<?= $listing->CashFlow; ?></h2>
</div>
<!-- Above button info -->
<div class="col-3">Gross Revenue: </div><div class="col-3">$<?= $listing->GrossRevenue; ?> </div><div class="col-3">Inventory: </div><div class="col-3">$<?= $listing->Inventory; ?></div>
<div class="col-3">EBITDA: </div><div class="col-3">$<?= $listing->EBITDA; ?> </div><div class="col-3">Rent: </div><div class="col-3">$<?= $listing->Rent; ?> </div>
<div class="col-3">FF&E: </div><div class="col-3">$<?= $listing->FFandE; ?> </div><div class="col-3">Established: </div><div class="col-3"><?= $listing->YearEstablished; ?> </div><br><br>
<!-- buttons -->
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">SAVE</a>
</div>
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">PRINT</a>
</div>
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">SHARE</a>
</div>
<div class="col-3">
<a class="btn btn-primary" style="width:100%;" type="button" href="">VALUATION REPORT</a>
</div>
<!-- Ad Description -->
<div class="col-12"><br><br><hr><br>
<h2>DESCRIPTION</h2>
<h2><?= $listing->AdTagLine; ?></h2>
<?= $listing->AdDescription ?><br>
<hr><br>
</div>
<!-- Ad Details -->
<div class="col-3">
<h3>Location:</h3>
</div>
<div class="col-9">
<?= $listing->County ?>
</div>
<div class="col-3">
<h3>Building SF:</h3>
</div>
<div class="col-9">
<?= $listing->TotalSqFt ?>
</div>
<div class="col-3">
<h3>Employees:</h3>
</div>
<div class="col-9">
<?= $listing->EmployeeCount ?>
</div>
<div class="col-3">
<h3>Facilities:</h3>
</div>
<div class="col-9">
<?= $listing->AdFacilityDescription ?>
</div>
<div class="col-3">
<h3>Competition:</h3>
</div>
<div class="col-9">
<?= $listing->AdCompetitiveAnalysis ?>
</div>
<div class="col-3">
<h3>Growth & Expansion:</h3>
</div>
<div class="col-9">
<?= $listing->AdOpportunityForGrowth ?>
</div>
<div class="col-3">
<h3>Support & Training:</h3>
</div>
<div class="col-9">
<?= $listing->AdSupportAndTraining ?>
</div>
<div class="col-3">
<h3>Reason for Selling:</h3>
</div>
<div class="col-9">
<?= $listing->AdReasonForSelling ?>
</div>
<div class="col-3">
<h3>Business Website:</h3>
</div>
<div class="col-9">
<?= $listing->WebsiteURL ?>
</div>
</div>
<div class="col-4 bg-light">
<div class="container">
<!-- CHANGE THE URL HERE -->
<div class="col-12">
<form action="https://app.99inbound.com/e/123" method="POST" target="_blank">
<h1 style="text-align: center;"><br>CONTACT US</h1>
<div class="form-group">
<input name="name" type="text" class="form-control" id="name" placeholder="Full Name" required>
<input name="phone" type="phone" class="form-control" id="phone" placeholder="Phone Number" required>
<input name="email" type="email" class="form-control" id="email" placeholder="Enter Email" required>
</div>
<div class="form-group">
<textarea name="message" class="form-control" id="message" rows="5" placeholder="Enter message" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<br><hr>
</div>
<div class="row col-12">
<div class="col-6"><p>Business Listed By:<br>
<?= $listing->SellerFirstName; ?> <?= $listing->SellerLastName; ?></p></div>
<div class="col-6"><p><i class="fas fa-phone-square-alt"></i> <?= $listing->SellerPhone; ?></div>
</div>
</div>
</div>
</div>
<?php } ?>
</div>
<?php get_footer(); ?>
</body>
</html>

I might make a subtle change to the link to turn the ?id into a key/value pair, like
<center><a class="btn btn-primary" href="<?= $listing->WebsiteURL; ?>?display=<?= $listing->Oid; ?>" role="button">See Listing</a></center>
Then on the second page
<?php
require($_SERVER['DOCUMENT_ROOT'].'/wp-load.php');
get_header();
$filename = file_get_contents("/ListingCollection.json");
$display = $_GET['display'];
$listings = json_decode($filename);
$listing=array_filter($listings, function($a) use($display) {
return $a->Oid === $display;
});
$listing = array_values($listing)[0];
// get rid of the loop on this page
// foreach ($listings as $listing) { <-- GONE
?>
<!-- then the rest of your code, using $listing -->

I fixed the problem by doing this to the button:
<?php echo"<a class='btn btn-primary' role='button' href='https://samplesite.com/result.php?" . http_build_query($listing) . "'>See Listing</a>"; ?>
Then echoing the items on the results page.

Dynamically split div columns

code i have written below is working fine but at the end of the looping the div is not closed its still opening a loop
<div class="carousel-inner">
<div class="item active">
<div class="row">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<?php
$split++;
if ($split % 4 == 0){
echo '</div></div><div class="item"><div class="row">';
}
}
?>
</div>
</div>
</div>
The Div has splited very well but in end of the loop div has not been closed. Thats only the problem please provide me the help to sort out the problem
When I inspect the element the last loop will show at the given result as follows:
<div class="col-sm-3">
<div class="col-item">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/1557301934.jpg" alt="User one">
</div>
<div class="info">
<div class="name">UPHOLSTERY</div>
<div class="degination">UPHOLSTERY</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div></div><div class="item"><div class="row">
I want to remove the two opening div's as dynamically. How can i set this to remove opened div's at then end of the looping

You can do this:
<div class="carousel-inner">
<?php
$recent_projects_sql="SELECT * from recent_projects where service_type='upholstery'";
$recent_projects_conn=mysql_query($recent_projects_sql) or die(mysql_error());
$i=0; $split=0;
while($projects=mysql_fetch_array($recent_projects_conn)) {
$i++;
?>
<div class="item <?php if($i==1) echo "active";?>">
<div class="row">
<div class="col-sm-3">
<div class="col-item" style="">
<div class="photo-shadow"></div>
<div class="photo">
<img src="admin/assets/images/uploads/projects/<?php echo $projects['attachment1']; ?>" alt="User one">
</div>
<div class="info">
<div class="name">
<?php echo $projects['service_name']; ?>
</div>
<div class="degination">
<?php echo $projects['sub_title']; ?>
</div>
<div class="buttons">
<a class="btn btn-theme ripple-effect" href="#">View More</a>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>

How to open a specific nested bootstrap accordeon based on its unique id

I am generating a dynamic nested accordion with unique client ids. Let's say a user needs to do a modification on accordeon 3, he opens the specific accordion and click on the button "modify". The user is then transported to a new form on a new page to do his modification.
After validating his modification, the user needs to return to the previous page with the listed accordion and have only the specific accordion he selected earlier open. Can somebody please assist me?
Here is my code:
<div id="accordionbox">
<?php
if (isset($listeClient) && count($listeClient) > 0) {
?>
<?php
$iClients = 0;
while ($iClients < count($listeClient)) {
$CLIENT_ID = $listeClient[$iClients]['CLIENT_ID'] == "" ? "" : $listeClient[$iClients]['CLIENT_ID'];
$nom = $listeClient[$iClients]['CLIENT_NOM'] == "" ? "" : $listeClient[$iClients]['CLIENT_NOM'];
$prenom = $listeClient[$iClients]['CLIENT_PRENOM'] == "" ? "" : $listeClient[$iClients]['CLIENT_PRENOM'];
$projet[] = $listeClient[$iClients]['projet'];
?>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain<?php echo $iClients; ?>" class="panel-group" aria-multiselectable="true">
<div id="headingClient<?php echo $iClients; ?>" class="panel">
<a class="panel-heading collapsed" title="Tab1"
aria-controls="collapseMain-<?php echo $CLIENT_ID; ?>" aria-expanded="false"
href="#collapseMain-<?php echo $CLIENT_ID; ?>" data-toggle="collapse">
<span class="panel-title"><?php echo $nom . ' ' . $prenom; ?></span>
</a>
<div id="collapseMain-<?php echo $CLIENT_ID; ?>" class="panel-collapse collapse"
aria-labelledby="heading<?php echo $CLIENT_ID; ?>" aria-expanded="false">
<div class="panel-body">
<div id="accordionInside-<?php echo $CLIENT_ID; ?>" class="panel-group"
aria-multiselectable="true" role="tablist">
<!-- Informations Personnelles -->
<div class="panel panel-default">
<a id="headingPersonnelle-<?php echo $CLIENT_ID; ?>"
class="panel-heading collapsed" title="Tab1"
aria-controls="collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
aria-expanded="false"
href="#collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title">Informations Personnelles</span>
</a>
<div id="collapsePersonnelle-<?php echo $CLIENT_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingPersonnelle-<?php echo $CLIENT_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
Personelle
</div>
</div>
</div> <!-- Fin Informations Personnelles -->
<!-- Contracts -->
<div class="panel panel-default">
<a id="headingContract-<?php echo $CLIENT_ID; ?>"
class="panel-heading collapsed" title="Tab2"
aria-controls="collapseContract-<?php echo $CLIENT_ID; ?>"
aria-expanded="false"
href="#collapseContract-<?php echo $CLIENT_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title">Dossiers</span>
</a>
<div id="collapseContract-<?php echo $CLIENT_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingContract-<?php echo $CLIENT_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
<div id="accordionContractBody-<?php echo $CLIENT_ID; ?>"
class="panel-group" aria-multiselectable="true"
role="tablist">
<?php
$iProjets = 0;
while ($iProjets < count($projet[$iClients]['projetz'])) {
$PROJET_ID = $projet[$iClients]['projetz'][$iProjets]['PROJET_ID'];
?>
<div id="accordionContract-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-group rapprocher"
aria-multiselectable="true" role="tablist">
<div class="panel panel-default">
<a id="headingProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-heading collapsed" title="Tab1"
aria-controls="collapse-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
aria-expanded="false"
href="#collapseProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
data-toggle="collapse" role="tab">
<span class="panel-title"><?php echo $projet[$iClients]['projetz'][$iProjets]['PROJET_NOM']; ?></span>
</a>
</div>
<div id="collapseProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
class="panel-collapse collapse"
aria-labelledby="headingProjet-<?php echo $CLIENT_ID . '-' . $PROJET_ID; ?>"
role="tabpanel" aria-expanded="false">
<div class="panel-body">
Contracts
</div>
</div>
</div>
<?php
$iProjets++;
}
?>
</div>
</div>
</div>
</div> <!-- Fin Contracts -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
$iClients++;
}
?>
<?php
}
?>
</div>
And here is what i have been trying:
<?php
if (isset($client_id) && $client_id <> "") {
?>
<script>
$(document).ready(function () {
//open all div starting with collapseMain
$("div[id^='collapseMain']").addClass("in");
//open all div starting with collapsePersonnelle
$("div[id^='collapsePersonnelle']").addClass("in");
//open all div starting with collapseContract
$("div[id^='collapseContract']").addClass("in");
//open all div starting with collapseProjet
$("div[id^='collapseProjet']").addClass("in");
//how to open only the specific accordion with the client id
});
</script>
<?php
}
?>

We can see that you have added unique id to all your ".panel-collapse" divs as id="collapseMain-<?php echo $CLIENT_ID; ?>". We also know that you have the id for which you want to open the accordion.
You can use jquery selector $("#collapseMain-<?php echo $client_id; ?>") to select only the accordion that should be opened.
Lets assume the html code generated by php is:
<div id="accordionbox">
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-1" class="panel-group" aria-multiselectable="true">
<div id="headingClient-1" class="panel">
<a class="panel-heading collapsed" title="Tab1"
aria-controls="collapseMain-1>" aria-expanded="false"
href="#collapseMain-1" data-toggle="collapse"><span class="panel-title">Client 1</span></a>
<div id="collapseMain-1" class="panel-collapse collapse"
aria-labelledby="heading1" aria-expanded="false">
<div class="panel-body">
Content 1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-2" class="panel-group" aria-multiselectable="true">
<div id="headingClient-2" class="panel">
<a class="panel-heading collapsed" title="Tab2"
aria-controls="collapseMain-2>" aria-expanded="false"
href="#collapseMain-2" data-toggle="collapse"><span class="panel-title">Client 2</span></a>
<div id="collapseMain-2" class="panel-collapse collapse"
aria-labelledby="heading2" aria-expanded="false">
<div class="panel-body">
Content 2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-12">
<div class="panel panel-default">
<div id="accordionMain-3" class="panel-group" aria-multiselectable="true">
<div id="headingClient-3" class="panel">
<a class="panel-heading collapsed" title="Tab3"
aria-controls="collapseMain-3>" aria-expanded="false"
href="#collapseMain-3" data-toggle="collapse"><span class="panel-title">Client 3</span></a>
<div id="collapseMain-3" class="panel-collapse collapse"
aria-labelledby="heading3" aria-expanded="false">
<div class="panel-body">
Content 3
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Then you can generate javascript code using php like
<?php
if (isset($client_id) && $client_id <> "") {
?>
$(document).ready(function() {
$("#collapseMain-<?php echo $client_id; ?>").addClass("in");
});
<?php } ?>
You can have a look at this jsfiddle

how to use multiple bootstrap collapse elements dynamically in php

I am using this code which contains html along with php, when there are multiple elements in collapse only the first element is working properly because there is id named collapseOne which should change dynamically for each element.
So, the problem is how to change the id dynamically
<div class="accordion">
<?php foreach ($topics_list->result_array() as $row) { ?>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<h2><?php echo $row['name'];
?></h2>
</a>
</div>
<div id="collapseOne" class="accordion-body collapse ">
<div class="accordion-inner">
<b><h3> Material Link-:<?php
echo "<a href='" . $row['link'] . "'>Link</a></h3></b>";
echo"<br> <b><h3>Hardness-:";
echo $row['hardness'] . "</h3></b>";
echo "<br><b><h3>Type-:" . $row['type'] . "</h3></b>";
?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>

Increment an index on each iteration and include it in the markup output
<div class="accordion">
<?php
$i=0;
foreach ($topics_list->result_array() as $row) {
$i++;
?>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle"
data-toggle="collapse" data-parent="#accordion2"
href="#collapse<?=$i?>">
<h2><?php echo $row['name'];
?></h2>
</a>
</div>
<div id="collapse<?=$i?>" class="accordion-body collapse ">
<div class="accordion-inner">
<b><h3> Material Link-:<?php
echo "<a href='" . $row['link'] . "'>Link</a></h3></b>";
echo"<br> <b><h3>Hardness-:";
echo $row['hardness'] . "</h3></b>";
echo "<br><b><h3>Type-:" . $row['type'] . "</h3></b>";
?>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>

Try this ...I can use it
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-primary">
<?PHP
$i = 0;
while($objResult = mysqli_fetch_array($objQuery)) {
$i++;
?>
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne<?=$i?>" aria-expanded="true" aria-controls="collapseOne">
<?=$objResult["rela_Name"];?>
</a>
</h4>
</div>
<div id="collapseOne<?=$i?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<?=$objResult["rela_Detail"];?>
</div>
</div>
<?PHP
}
?>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

javascript displaying error function is not defined. - javascript

Related

How do I hide a section of a collapsible FAQ if the data is empty?

I have a business sales page that shows results from a json file. I want to be able to pass the information for one listing on a results page [duplicate]

Dynamically split div columns

How to open a specific nested bootstrap accordeon based on its unique id

how to use multiple bootstrap collapse elements dynamically in php

Categories

Resources