Im using angular and ng-repeat to populate a list of studies. This list is dynamic so you can toggle into child elements of each element. So basically I have a accordion style toggle list that can go three levels deep on each list item. I have a jQuery issue that I think should be solved with some angular directive or something. Basically I have an arrow (glyphicon) that should switch to up or down depending on if your looking at a child or a parent element in this list. I have this working with pure jQuery just adding and removing a css class from each list item. However, it only works on the first item in the list because ng-repeat creates multiple id’s but jQuery will only work on the first element with that id tag.
This is the HTML from the page.
<!-- User Studies List -->
<div ng-controller="StudiesController" id="before">
<h3 class="center"> User Studies </h3>
<div ng-repeat="study in studies" arrow>
<div class="panel-group" style="margin-bottom:0">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" href="#collapse{{$index}}">
<h3 class="panel-title">{{ study.study }} <span class="glyphicon glyphicon-menu-down pull-right"></span></h3>
<p></p>
</div>
<div id="collapse{{$index}}" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item" data-toggle="collapse" href="#collapse{{study.id}}" style="margin-left:1%" id="sampleID{{$index}}">
<i>Sample: </i>{{ study.sample }}
<span id="glyph-switch" class="glyphicon glyphicon-menu-down pull-right"></span>
<span id="glyph-up" class="glyphicon glyphicon-menu-up pull-right"></span>
</li>
<div id="collapse{{study.id}}" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item" style="margin-left:3%"><i>Fastq: </i>{{ study.fastq }}
<div class="dropdown center pull-right">
<button class="btn-xs btn-default hvr-shadow" id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dLabel">
<li id="list-item" data-toggle="modal" data-target="#more-metadata-modal" ng-click="showMore(study)">More Data</li>
<li id="list-item" data-toggle="modal" data-target="#edit-metadata-modal" ng-click="showMore(study)">Edit</li>
<li id="list-item" data-toggle="modal" data-target="#delete-metadata-modal" ng-click="showMore(study)">Delete</li>
</ul>
</div>
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
This is the Javascript
var count = 1;
$(document).on("click", "li[id*='sampleID']", function() {
console.log("clicked");
if(count > 0) {
$('#glyph-switch').css('visibility','hidden');
$('#glyph-up').css('visibility', 'visible');
count -= 1;
console.log("count", count);
} else {
$('#glyph-switch').css('visibility','visible');
$('#glyph-up').css('visibility', 'hidden');
count += 1;
console.log("count",count);
}
});
I would just use angular code (no jQuery at all).
Since you already have an object of studies, just handle an onClick="showGlyph($index)" passing the index and then in the code just set the a state for the up/down arrow $scope.GlyphUp = !$scope.GlyphUp.
In the template file have the up/down arrow object bind ng-show="GlyphUp"
Related
I have a nav bar that contains another page of my site, the page listed in the nav bar has a drop down list that is going to be linked to an accordion on the specific page. I'm having trouble implementing it, that if one of the drop down list items is click, then you will be taken to the page and the particular accordion linked to the item will be open.
For testing purposes I only have the nav bar list item "Monitoring" accordion linked right now; when I click "Monitoring" it takes me to the right page, but the accordion is still closed.
Here's my nav bar:
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #6F9824; text-align:center ">
<div class="navbar-header" align="center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" style="color:white;" align="center"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="color:white;" align="center">
<li>
<a asp-page="/Index" style="color:white;">Home</a>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" style="color:white;">
Centrify
<span class="caret"></span>
<ul class="dropdown-menu">
<li>Centrify Home</li>
<li>Monitoring</li>
<li>Patching</li>
<li>Onboarding</li>
<li>Disaster Recovery</li>
<li>Reporting</li>
</ul>
</li>
</div>
</nav>
Accordion I'm trying to open:
<div id="Accordion1" role="tablist" aria-multiselectable="true">
<div class="card">
<div class="card-header" role="tab" id="2">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Vault Status
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="2">
<div class="card-block">
<div class="form-group">
<label for="exampleFormControlSelect2">Select Environment</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>RTP</option>
<option>OMA</option>
<option>BGI</option>
<option>BG2</option>
<option>CLD</option>
<option>WRKSTN</option>
<option>QA</option>
</select><br />
<button>Submit</button>
</div>
</div>
</div>
</div>
JavaScript:
$(function() {
$("#Accordion1").accordion();
});
function getParam(name) {
var query = location.search.substring(1);
if (query.length) {
var parts = query.split('&');
for (var i = 0; i < parts.length; i++) {
var pos = parts[i].indexOf('=');
if (parts[i].substring(0, pos) == name) {
return parts[i].substring(pos + 1);
}
}
}
return 0;
}
$(function() {
var defaultPanel = parseInt(getParam('panel'));
$("#Accordion1").accordion({
active: defaultPanel
});
});
I don't know if that's what's causing the problem, but the end of you'r <ul> and first <li> is missing on you'r first HTML code
How do you expect your accordion to work if there are no headers? According to jQuery UI documentation, your HTML should look something like
<div id="accordion">
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>
</div>
but it does not. You need pairs header-content in order for it to work.
I need to be able to get access to an element that will be available via AJAX after several click events. I cannot simply use $(element).on('click', selector, event) because the element I need access to is not a child element.
For example, what appears on initial page load is this:
<ol class="opc" id="checkoutSteps">
<li id="opc-billing" class="section opc-step"
data-step-number="0">
<div class="step-title" data-href="#step-1">
<span class="number">1</span>
<h2>Billing Information</h2>
<a onclick="stepTo('#step-2'); return false;"
href="#step-2">
View </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="billing-step-login" class="step a-item">
<div id="step-2"
class="panel-collapse collapse in">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-shipping" class="section opc-step"
data-step-number="1">
<div class="step-title" data-href="#step-2">
<span class="number">2</span>
<h2>Shipping Information</h2>
<a onclick="stepTo('#step-3'); return false;"
href="#step-3">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping-step-login" class="step a-item">
<div id="step-3"
class="panel-collapse collapse ">
<div class="panel-body">
<button class="button btn-next" type="submit"><span><span>Continue</span></span></button>
</div>
</div>
</div>
</li>
<li id="opc-shipping_method" class="section opc-step"
data-step-number="2">
<div class="step-title" data-href="#step-3">
<span class="number">3</span>
<h2>Shipping Method</h2>
<a onclick="stepTo('#step-4'); return false;"
href="#step-4">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="shipping_method-step-login" class="step a-item">
<div id="step-4"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-payment" class="section opc-step"
data-step-number="3">
<div class="step-title" data-href="#step-4">
<span class="number">4</span>
<h2>Payment Method</h2>
<a onclick="stepTo('#step-5'); return false;"
href="#step-5">
Edit </a>
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="payment-step-login" class="step a-item">
<div id="step-5"
class="panel-collapse collapse ">
<div class="panel-body">
</div>
</div>
</div>
</li>
<li id="opc-review" class="section">
<div class="step-title" data-href="#step-6">
<span class="number">5</span>
<h2>Order Review</h2>
Edit
<a data-toggle="collapse" data-parent="#step-all"></a>
</div>
<div id="review-step-login" class="step a-item">
<div id="step-6" class="panel-collapse collapse">
<div class="panel-body"></div>
</div>
</div>
</li>
</ol>
Once I click the button inside div.#step-3, some content with a button loads in div.#step-4. After clicking the button in that div, a button loads in #step-5. Finally, after clicking on the button inside #step-5, there is content (textarea and another button) loaded in #step-6 that I'm interested in.
How do I go about writing a jQuery or JavaScript event that would allow me to get access to the div.#step-6 textarea? Can I write several nested $(element).on() events?
P.S. I don't have access to change any of the existing HTML, CSS, or JavaScript files. I can only write new JavaScript.
It seems that you can bind the delegated event to a common static ancestor.
For example, #checkOutSteps:
jQuery('#checkOutSteps').on('focus','div.#step-6 textarea',function(){
...
});
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future. --Event Delegation
I have a Component with view like below:
<div class="dropdown user-select">
<div class="gray-input dropdown-toggle" type="button" id="assigned_to" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<ng-content select="[selected-item-tmpl]"></ng-content>
<span class="caret"></span>
</div>
<ul class="dropdown-menu" aria-labelledby="assigned_to">
<li *ngFor="let item of items"
(click)="itemClick$.next(item)">
<ng-content select="[list-item-tmpl]"></ng-content>
</li>
</ul>
</div>
According to this and this, I now know that Transclusion with ngFor will not work.
But according to this, if I change my component to following:
<div class="dropdown user-select">
<div class="gray-input dropdown-toggle" type="button" id="assigned_to" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<ng-content select="[selected-item-tmpl]"></ng-content>
<span class="caret"></span>
</div>
<ul class="dropdown-menu" aria-labelledby="assigned_to">
<li *ngFor="let item of items"
(click)="itemClick$.next(item)">
<template [ngTemplateOutlet]="template"
[ngOutletContext]="{item: item}">
</template>
</li>
</ul>
</div>
For brevity the Component.ts after change:
#ContentChild(TemplateRef) template: TemplateRef<any>;
and use like following:
<ds-combobox [items]="attendeeService.users"
(itemClicked)="applySelectedUser($event)">
<div selected-item-tmpl>
--> <img *ngIf="newTask.assignedTo.photo" [src]="newTask.assignedTo.photo">{{newTask.assignedTo.name}}
<div *ngIf="!newTask.assignedTo.photo && newTask.assignedTo.initials" class="pull-left photo-avatar">
<div>{{newTask.assignedTo.initials}}</div>
</div>
</div>
<div list-item-tmpl>
<template let-item="item"><b>{{item.name}}</b></template>
</div>
</ds-combobox>
Then I do not get any errors and it seems to run but the template for the ngTemplateOutlet seems to take the template from the first slot and ends up being <img src="null">. If I remove the first slot and just leave <template let-item="item"><b>{{item.name}}</b></template> then it seems to work fine. So basically, how do I combine using Transclusion with Template Outlet in the same component?
NOTE:
After thinking for a while, I just reversed the <template> position with <ng-content> and it seems to work now as expected. But the question still remains why though?
How to toggle Element that is clicked and hide all other using bootstrap V3.5?
this is my code:
<div id="buttons" style="padding: 50px;">
<a data-toggle="collapse" data-target="#item-01">
<button class="btn btn-default">
Item-01
</button>
</a>
<a data-toggle="collapse" data-target="#item-02">
<button class="btn btn-default">
Item-02
</button>
</a>
</div>
<div id="itens">
<div class="collapse" id="item-01">
<span>Item 01</span>
</div>
<div class="collapse" id="item-02">
<span>Item 02</span>
</div>
</div>
DEMO page.
You should probably put the data-target attribute on the buttons themselves, but your code as is... use the following in jQuery:
$("button").on("click", function(){
var alertMsg = $(this).parent().data("target");
alert(alertMsg); //First grab the data-target from the button's parent, or alternatively the button itself as I would recommend.
//Note, you have a typo which I moved forward with below.
/* var itemToShow = "#" + alertMsg;
alert(itemToShow); */
// I would recommend as well you don't use hashtags in your data-*
// elements. Rather as shown here, add the hashtag in with code.
$("#itens .collapse").hide(); //first hide all of the elements
$(alertMsg).show(); //then show the element related to your button click event data-target id.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="buttons" style="padding: 50px;">
<a data-toggle="collapse" data-target="#item-01">
<button class="btn btn-default">
Item-01
</button>
</a>
<a data-toggle="collapse" data-target="#item-02">
<button class="btn btn-default">
Item-02
</button>
</a>
</div>
<div id="itens">
<div class="collapse" id="item-01">
<span>Item 01</span>
</div>
<div class="collapse" id="item-02">
<span>Item 02</span>
</div>
</div>
I am using bootstrap 3 and I have some collapsible panels which act as filters on a results page. So it isnt really an accordion menu as more than one can be open at any given time. Plus some will be open upon page load (using class in). So I need some javascript that will toggle the chevron depending on the state of the panel (opened or closed).
Here is the mark up:
<!-- Filter options -->
<div id="accordion">
<div class="panel-header">
<h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Subject<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
<div id="collapseOne" class="panel-collapse collapse in">
<ul class="list-unstyled">
<li class="selected"><span class="uxf-icon uxf-close-square"></span>Foreign Relations (15676) </li>
<li>Vietnam War (13013) </li>
<li>Government Documents (10479) </li>
<li class="selected"><span class="uxf-icon uxf-close-square"></span>Military Assistance</li>
<li>More...</li>
</ul>
</div>
</div>
<div class="panel-header">
<h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Geography<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
<div id="collapseTwo" class="panel-collapse collapse">
<ul class="list-unstyled">
<li>Foreign Relations (15676) </li>
<li>Vietnam War (13013) </li>
<li>Government Documents (10479) </li>
<li>Military Assistance
</li><li>More...</li>
</ul>
</div>
</div>
<div class="panel-header">
<h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Person As Subject<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
<div id="collapseThree" class="panel-collapse collapse">
<ul class="list-unstyled">
<li>Foreign Relations (15676) </li>
<li>Vietnam War (13013) </li>
<li>Government Documents (10479) </li>
<li>Military Assistance
</li><li>More...</li>
</ul>
</div>
</div>
</div>
Obviously at the minute all of the panels have the chevron down icon.
Many thanks
Check the open/closed status of each div by looking for the in class.
Once set you can swap the chevron classes within a click event.
// onload
$('a[data-toggle=collapse]').each(function() {
var chevron = $(this).parent().next('div');
if ( chevron.hasClass('in') ) {
$(this).children('span').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
} else {
$(this).children('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
}
});
// click event
$('a[data-toggle=collapse]').click( function() {
// swap chevron
$(this).children('span').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});
Bootply