Display different data in collapsible panel body - javascript

I am working on displaying data into multiple collapsible panel body dynamically to display individual data into each body on click but somehow on every click it sharing same data for each panels.
What I wanted to do is to display individual data for each item. Here is my sample code that I have written.
<span ng-repeat="t in tabledata">
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#{{t.appSystemName}}">
<table class="table borderless">
<tr>
<td>
<span class="glyphicon glyphicon-plus"
ng-click="getDataForProdQa(t.appSystemName)"
ng-model="plus">
</span>
</td>
<td>{{t.dbName}}</td>
<td>{{t.appSystemName}}</td>
<td>{{t.Id}}</td>
<td>{{t.frequency}}</td>
<td>{{t.timeStamp}}</td>
</tr>
</table>
</a>
</h4>
</div>
</div>
<div id="{{t.appSystemName}}" class="panel-collapse collapse">
<div class="panel-body">
<table class="table table-responsive" >
<tr ng-repeat="i in innertabledata">
<td>{{i.dbName}}</td>
<td ng-model="check">{{i.appSystemName}}</td>
<td>{{i.Id}}</td>
<td>{{i.frequency}}</td>
<td>{{i.timeStamp}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</span>
Looking some assistance to fix this issue

just try to make the id="accordion" dynamic as it is under ng-repeat and everytime same id is duplicated.So make dynamic id like id="accordion{{$index}}" and also the data-parent make it dynamic.Hope this helps.
Thanks

Related

If all html elements inside a whatever element are hidden, then hide a specific html element

I have an issue where what I want is to check if all the tr elements with class="RateContainer" inside that div are hidden(display:none because of hide()). And if they are hidden pls select for example class="elementToHide" and hide it also:
<div class="elementToHide">
<div class="panel panel-default">
<div class="panel-heading" id="cabeceraTarifas">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#HotelAccordion0" href="#collapse2" class="collapsed" aria-expanded="false"></a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body no-padding">
<table class="table table-bordered table-condensed">
<tbody>
<tr class="RateContainer" style="display:none">
</tr>
<tr class="RateContainer" style="display:none">
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
What I have tried is this:
$(".panel-body.no-padding>table>tbody>tr").each(function () {
if ($(this).find(">table>tbody>tr:visible").length == 0) {
$('.elementToHide').hide();
}
});
Also this:
$(".panel-body.no-padding").filter(function () {
return $(this).find("tr:visible").length == 0;
}).hide();
And this:
var elementsHidden = $(".panel-body.no-padding").not(function () {
return ($(this).children(":visible").length > 0) ? false : true;
});
$(".resultElementos").html(elementsHidden.length);
//And here them if length == 0 them take the bif father and hide him from the cops jeje
But I´m not able to hide it!!, do you know why??
Thank you (:

Add id to ng-template with Angular Bootstrap accordion

I'm having trouble adding dynamic id to the heading template. I tried including an id="{{group.title}}" but it doesn't work. Any help or suggestion would be great!
<div ng-controller="AccordionDemoCtrl">
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" template-url="group-template.html" ng-repeat="group in groups">
<uib-accordion-heading>
{{group.title}}
</uib-accordion-heading>
{{group.content}}
</div>
</uib-accordion>
</div>
<script type="text/ng-template" id="group-template.html">
<div id="{{group.title}}" class="panel-heading" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<a href tabindex="0" class="accordion-toggle" >
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
<b>{{heading}}</b>
</span>
</a>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: left" ng-transclude></div>
</div>
</script>
Here is the plunkr: https://plnkr.co/edit/WbDY1S?p=preview
You can't use group in that context as you have a different scope inside template.
group will be available in a parent scope, so you could use {{$parent.group.title}}
https://plnkr.co/edit/f7fHKohu7StKB4wJLeTv?p=preview

Accordion opens all panes instead of switching panes

I have code for an Accordion element in my website. I had this working as I wished, I clicked on header and the selected panel opens. When I click on another header, the previous pane closes and the selected pane open. Basic Accordion functionality.
For some reason, without touching any of the code, this Accordion effect stopped working. Now, whenever I select a pane, it just opens. So if I select other panes, they will open as well but none will automatically close on opening another pane. So where did this go wrong, I can't seem to find the error.
Here's the code:
<div class="panel-group" id="accordion">
<div class="panel panel-default" ng-repeat="item in All | unique:'gebieden'">
<div class="panel-heading text-center" data-toggle="collapse" data-parent="#accordion" data-target="#{{$index}}">
<h4 class="panel-title">
{{item.gebieden}}
</h4>
</div>
<div id="{{$index}}" class="panel-collapse collapse ">
<div class="panel-body text-center">
<ul class="nav nav-tabs">
<li ng-repeat="sub in All | unique: 'onderwerpen'">
<a data-toggle="tab" data-target="#{{sub.onderwerpen}}">
{{sub.onderwerpen}}
</a>
</li>
</ul>
<div class="tab-content" style="padding:2%">
<div id="{{sub.onderwerpen}}" class="tab-pane fade">
<table class="table table-bordered text-center">
<thead>
<tr>
<th class="text-center">Jaar</th>
<th class="text-center">Waarde</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(key,val) in item" ng-hide="$index<2" >
<td>{{key}}</td>
<td>{{val}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
So I just want the normal functionality back, being that there can only be 1 panel active at all times. Please help

HTML with id's construct dynamically

I have an html page with a div that has a bootstrap button to collapse/expand a table. I want to click on it to toggle collpase/expand.
I am inspired by this fiddle.
The javascript is
$('.meu-painel-colapsar').on('click', function () {
var id1 = $('.meu-painel-colapsar').attr('id');
var id2 = $('.colapsar-competencias').attr('id');
alert(id1);
$('#' + id2 + ' .colapsar-competencias').collapse('toggle');
});
And the html is
#foreach($dados as $dimensaoNome => $dimensao)
<div class="panel panel-{{ $cores[$dimensaoNome] }} meu-painel-colapsar" id="accordion-{{ $dimensao->id }}">
<button type="button" class="btn btn-success btn-xs"
id="dimensao_{{ $dimensao->id }}"
data-toggle="collapse" data-target="#">
<span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span> veja os resultados
</button>
<div class="panel panel-default">
#foreach($dimensao->competencias as $competenciaNome => $competencia)
<div class="panel-heading">
<div class="row">
<div class="col-md-6"><h4 class="competencia-head">{{ $competenciaNome }}</h4></div>
<div class="col-md-6" style="padding-top:8px;">
</div>
</div>
<div class="collapse colapsar-competencias" id="competencia-{{ $competencia->id }}">
<table class="table table-condensed">
<thead>
<tr>
<th>Situação atual</th>
<th class="col-md-6">Oportunidades identificadas</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>{{ $competencia->nivel->texto }}</p>
</td>
<td>
<div class="col-lg-12">
{!! $competencia->recomendacao !!}
</div>
</td>
</tr>
</tbody>
</table>
</div>
#endforeach
</div>
</div>
#endforeach
The id's accordion-{{ $dimensao->id }} and competencia-{{ $competencia->id }} are generated with the two foreach's.
The problem is that the javascript code only gets the first id's of accordion-{{ $dimensao->id }} and competencia-{{ $competencia->id }}.
I'm struggling with this for hours without success. How can I get this id's correctly when I click the button?
If I'm understanding right, you are much better off not using ids at all and just relying on classes. Use $(this).find(...) to only find .colapsar-competencias elements that are inside the clicked element.
$('.meu-painel-colapsar').on('click', function () {
$(this).find('.colapsar-competencias').collapse('toggle');
});
http://jsfiddle.net/Vq6gt/120/
$('#accordion .panel-collapse',this).collapse('toggle');

Can you copy an existing div to a modal dialog

I have a dashboard with multiple panels to display different information and I would like to be able to add a button to display the panel in a modal.
I am using bootstrap and all I can find is modals already written. I would like to copy the content of a div tag which is a panel and then display that in the model, but I am unsure as how to go about it. The html for the panel can be seen below. The panel does contain a table but I have cut the code down. I have looked around but I can't seem to find a solution for what I need. I understand that I need to use jQuery, copy the panel and add it to the contents of the modal dialog. I have tried to do this but had no luck. I have included a fiddle to show the approach I have taken Here this does launch the modal but the content is not displayed nor the button to close it.
Any help would be greatly appreciated.
HTML code for the panel:
<div class="panel sample panel-yellow message">
<div class="panel-heading">
<h3 class="panel-title">
<i class="fa fa-flask fa-fw"></i>Sample Updates
<i class="fa fa-spinner fa-spin sample "></i>
<a id="refreshMessage" class="refreshButton pull-right" href="#"><span class="fa fa-refresh"></span></a>
<a id="hideMessage" class="refreshButton pull-right" href="#"><span class="fa fa-arrow-up"></span></a>
<a id="focusMessage" class="focusButton pull-right" href="#"><span class="fa fa-eye"></span></a>
</h3>
</div>
<div class="panel-body">
<center>
<h5 class="text-warning">Table shows samples created or modified in the last ten minutes</h5>
</center>
</div>
</div>
Screenshot of the panel I want to display:
Please Try this
<div class="panel sample panel-yellow message">
<div class="panel-heading">
<h3 class="panel-title">
<i class="fa fa-flask fa-fw"></i>Sample Updates <i class="fa fa-spinner fa-spin sample ">
</i>
<a id="refreshMessage" class="refreshButton pull-right" href="#"><span class="fa fa-refresh"></span></a>
<a id="hideMessage" class="refreshButton pull-right" href="#"><span class="fa fa-arrow-up"></span></a>
<a id="focusMessage" class="focusButton pull-right" href="#"><span class="fa fa-eye"></span></a>
</h3>
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-condensed table-hover table-bordered table-responsive">
<thead>
<tr>
<th>
New Samples
</th>
<th>
Modified Samples
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="sampleCount"></span>
</td>
<td>
<span class="sampleCount2"></span>
</td>
</tr>
</tbody>
</table>
</div>
<center>
<h5 class="text-warning">
Table shows samples created or modified in the last ten minutes</h5>
</center>
</div>
</div>
<div id="SampleModal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-body">
</div>
Only Change in Mark Up is I removed the class hide
$('.focusButton').click(function(){
var newRow = $(this).parent().parent().parent('.sample').clone();
$('#SampleModal .modal-body').html(newRow);
$('#SampleModal').modal();
});
Check This Fiddle: http://jsfiddle.net/hoja/qsbkqc9m/12/
You can achieve this by using the following code
Using JQuery:
var html = $(id).html();
Using Javascript:
var html = document.getElementById(id).innerHTML;
Hope this helps.

Categories