how to select croissant (the one with class 'selected' ) to $scope.selected variable in angular ?
<ul id='ulsel' placement="top-left" style="max-height: 154px;">
<li value="Apple fritter" class="" tabindex="-1">Apple fritter</li>
<li value="Croissant" tabindex="-1" class="selected">Croissant</li>
<li value="Donut" tabindex="-1" class="">Donut</li>
<li value="Financier" tabindex="-1" class="">Financier</li>
<li value="Jello" tabindex="-1">Jello</li><li value="Madeleine" tabindex="-1">Madeleine</li>
<li value="Pound cake" tabindex="-1">Pound cake</li>
<li value="Pretzel" tabindex="-1">Pretzel</li>
<li value="Sfogliatelle" tabindex="-1">Sfogliatelle</li></ul>
Your markup is very strange, li's having values attributes and using a class as selected rather then a input is an unusually approach. Regardless you can use the below:
$scope.selected = $('#ulsel li.selected').html();
This just gets the text inside the li with the selected class.
I have used the text inside the element rather then the value attribute you have put on, as I'm not sure how supported that's going to be
Agreed with atmd. I'd instead have Angular build the li's with ng-repeat, then you have much more control instead of relying on jQuery to parse.
Here's another way to get the value with jQuery:
$scope.selected = $("#ulsel").find('.selected').attr('value');
Works in Chrome, didn't test further.
Related
I have some list items which are treated as Tabs in my UI. I also have a 'next' button under every tab and last tab have a 'finish' button. I need to move to next tab when i clicked on 'Next' button. I am working on an Angular2 project with typescript version 2.3.4. So i need some typescript code to work on button click.
While searching, i got some jquery code like,
$('.nav-tabs > .active').next('li').find('a') from how to display next bootstrap tab on button click.
I tried it in my button click(.ts file) and it works!. But i am not sure about the using of jquery in my project. Is it possible to get the element(html) in its typescript file? Or is this is the good possible way to do this?
My list is like,
<div class="row">
<ul class="nav nav-tabs bg-white">
<li class="active"><a data-toggle="tab" href="#BasicInfo">BasicInfo</a></li>
<li id="idAddInfoTab"><a data-toggle="tab" href="#AdditionalInfo">AdditionalInfo</a></li>
<li id="idPlayerIdentity" class="active-border"><a data-toggle="tab" href="#PlayerIdentity">PlayerIdentity</a></li>
</ul>
</div>
Thanks in advance!
I would do something like this
page.ts
//declare 3 variables
isT1Active:boolean = true;
isT2Active:boolean = false;
isT3Active:boolean = false;
...
activate(elem){
//deactivate all first
this.isT1Active = false;
this.isT2Active = false;
this.isT3Active = false;
switch(elem){
case 't1':{this.isT1Active = true;break;}
case 't2':{this.isT2Active = true;break;}
case 't3':{this.isT3Active = true;break;}
}
}
page.html
<div class="row">
<ul class="nav nav-tabs bg-white">
<li [ngClass]="{'active': isT1Active}" (click)="activate("t1")"><a data-toggle="tab" href="#BasicInfo">BasicInfo</a></li>
<li [ngClass]="{'active': isT2Active}" (click)="activate("t2")" id="idAddInfoTab"><a data-toggle="tab" href="#AdditionalInfo">AdditionalInfo</a></li>
<li [ngClass]="{'active': isT3Active}" (click)="activate("t3")" id="idPlayerIdentity" class="active-border"><a data-toggle="tab" href="#PlayerIdentity">PlayerIdentity</a></li>
</ul>
</div>
And you can do same thing to the next button, In assume that each tab will have a next button
I would stay away from jQuery, but instead learn how to better use Angular to control the view. Basically, you want the active class in your template tab to be bound to your component selected model, so that when the selected model is updated, Angular will automatically apply the active class to the matching tab.
In your component, define the array that stores the tab info and define a selectedTab that refers to the specific tab that should be active:
export class AppComponent {
tabs = [
{id:'idBasicInfo', href:'...',label:'BasicInfo'},
{id:'idAddInfo', href:'...',label:'AdditionalInfo'},
{id:'idPlayerIdentity',href:'...',label:'PlayerIdentity'}
];
selectedTab = this.tabs[0]; // which is active by default
}
Then in your template, use these properties to drive the view:
<ul>
<li *ngFor="let t of tabs" [id]="t.id" [class.active]="t===selectedTab">
<a data-toggle="tab" [href]="t.href" (click)="selectedTab=t"> {t.label}} </a>
</li>
</ul>
When a tab is clicked, it will be made the selectedTab and its active class will be set.
I am not able to click on the link nestled inside a list tag.
Here is the HTML code:
<div class="sideBarContent" ng-include="'routes/sidebar/sidebar.tpl.html'">
<div id="innerSidebarContent" ng-controller="SidebarController">
<div>
<ul class="menuItems bounceInDown">
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/">
<li id="menuConfigurator" ui-sref="configurator" ng-click="closeMobileMenu()" href="/configurator/">
<span class="menuIcon regularImage blueHighlight activated icon-selectAndTailor"></span>
<span class="menuIcon icon-selectAndTailor_active activeImage">
<p class="mainMenuLabel multiLine">Select & Tailor Methods</p>
</li>
I tried all these ways to locate the text and click on it:
describe('Test objects in /configurator/ route', function() {
it('Click on select and tailor banner icon', function(){
//element(by.css('ul.menuItems > li[href=/configurator/]')).click();
//element(by.className('menuIcon icon-selectAndTailor_active activeImage')).click();
//element(by.css("li[#id='menuConfigurator' and #href='/configurator/']")).click();
//element(by.id('menuConfigurator')).click();
//element(by.xpath("//div[#class='sideBarContent']/p")).click();
//element(by.css("#menuConfigurator > p")).click();
//element(by.partialLinkText('Select & Tailor Methods')).click();
element(by.linkText("Select & Tailor Methods")).click();
console.log('in the configspec ...');
})});
Can someone help me resolve this?
Just had the same issue.
It turned out that wrapping the list in a < div > block was the problem.
Once the list was moved to be outside any < div > block the < a > tags worked.
li can not have href attribute
Use
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()"></li>
Or
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/"></li>
Instead of
<li id="menuHome" class="" ui-sref="home" ng-click="closeMobileMenu()" href="/home/"></li>
According to html this is not link.
Select it using other selectors:
element(by.className("multiLine")).click();
element(by.css(".mainMenuLabel.multiLine")).click();
element(by.css("[class='mainMenuLabel multiLine']")).click();
element(by.xpath(".//p[#class='mainMenuLabel multiLine']")).click();
I'm currently in the process of developing a website that has to match AA accessibility standards. I have a custom-built dropdown being a part of a form and can't figure out how to label it for screen-readers. Sadly I can't use a native select dropdown (despite being accessible, the website is rather design heavy and it was the best way to apply custom styling to this), so can't use a regular label tag. So far I've used the below, but I believe that it's not the correct approach.
<form>
(...) other inputs
<ul class="dropdown" role="listbox" aria-labelledby="location" aria-multiselectable="false" aria-expanded="false" tabindex="0">
<li class="first" aria-labelledby="location">
<span>Location</span>
</li>
<li tabindex="-1" role="option" aria-selected="false">Location1</li>
<li tabindex="-1" role="option" aria-selected="false">Location2</li>
<li tabindex="-1" role="option" aria-selected="false">Location3</li>
</ul>
</form>
Just to describe the behaviour - this is a regular dropdown with only li.first visible initially (on click/enter all the fields become visible and the value can be chosen). Once an option is picked, aria-selected is set to true and the value is replacing the Location text in span.
Could anyone suggest a better solution for this? My biggest concern at the moment is possibly the incorrect usage of aria-labelledby, but I don't know what should be the right option.
Thanks,
E.
Edit: JS + jQuery
$('.dropdown').on('click', function () {
$(this).toggleClass('opened');
if ($(this).attr('aria-expanded') === 'false') {
$(this).attr('aria-expanded', 'true');
} else {
$(this).attr('aria-expanded', 'false');
}
})
$('.dropdown li').on('click', function () {
if (!$(this).hasClass('first')) {
var text_drop = $(this).html();
$(this).parent().find('span').html(text_drop);
$(this).parent().children().not('.first').attr('aria-selected', 'false')
$(this).attr('aria-selected', true);
$('.dropdown').animate({scrollTop: 0}, 200);
}
});
The aria-labelledby should refer to the id of an existing element. You have a problem with your label being inside the object itself. Something like the following would make more sense.
<form>
(...) other inputs
<div id="location" aria-expanded="false" aria-owns="listchoices">Location</div>
<ul class="dropdown" role="listbox" aria-labelledby="location"
aria-multiselectable="false" tabindex="0">
<li tabindex="-1" role="option" aria-selected="false">Location1</li>
<li tabindex="-1" role="option" aria-selected="false">Location2</li>
<li tabindex="-1" role="option" aria-selected="false">Location3</li>
</ul>
</form>
Without the javascript part, I can't give you more help
How to set a class attribute if some condition is true in a tag in JSP?
In my JSP page I have some tabs. In the first tab I have a form field and after submission, it will call servlet, process it and then it will forward to the same JSP page and will set a session attribute value (say the id of next Tab) And in my JSP page in the LI tag I am setting the class attribute to active if the string got from session attribute is some value.
But I am not able to get it.
Here is part of servlet code
String dataloadType=request.getParameter("dataloadType");
if(dataloadType.equals("fromDB"))
{
request.setAttribute("activeTab", "fromDatabase");
RequestDispatcher rd=request.getRequestDispatcher("index.jsp");
rd.forward(request, response);
}
Part of index.jsp is
<div class="navbar btn-navbar">
<div id="tabs" class="tabbable">
<ul id="myTab" class="nav nav-tabs">
<li><a href="#datacollector" target="main"
data-toggle="tab">Data Collector</a></li>
<li id="fromDB" class="selectDataloadType <c:if test="${activeTab == 'fromDatabase'}">active</c:if>" style="display: none;"><a
href="#fromDatabase" target="main" data-toggle="tab">Data Load
Database</a></li>
<li id="fromFile" class="selectDataloadType" style="display: none;"><a
href="#fromFiles" target="main" data-toggle="tab">Data Load
File</a></li>
<li id="email" class="selectDataloadType" style="display: none;"><a
href="#fromEmail" target="main" data-toggle="tab">Data Load
Email</a></li>
<li id="webServices" class="selectDataloadType"
style="display: none;"><a href="#fromWebServices"
target="main" data-toggle="tab">Data Load Web</a></li>
<li><a href="#datamap" target="main" data-toggle="tab">Data
Map</a></li>
<li>Schedule</li>
</ul>
LI with id fromDB is setting the class attribute to active if the session attribute is 'fromDatabase' But its not working as it is not taking that part as code.
Here is the index.jsp
It is showing the code in page, so its not taking it. How can I solve it?
I think you're not setting the class attribute correctly... The class attribute of the LI tag is selectDataloadType [space] active, so eventually it is just selectDataloadType I think...
Why not something like:
<li id="fromDB" <c:if test="${activeTab == 'fromDatabase'}">class="active"</c:if>...
You can use choose instead of if if you need to have a class attruibute in any case...
I am supposed to find a class and apply a logic for that.
My code structure is as follows.
<div class="class">
<form>
<ul>
<li>xxx</li><li>xxx</li>
</ul>
<ul>
<li>xxx</li><li>xxx</li>
</ul>
<ul class="ul_class">
<li>
<input ....><a ...><span ..></span>
<a href="#" title="View History" class="hstry">
<span class="hide"> </span></a>
</li>
<li>xxx</li>
</ul>
</form>
How to find the class hstry inside the ul with the class named ul_class.
Just use a normal CSS selector to find nested classes like the following:
$( 'ul.ul_class .hstry' )
Note the whitespace between both classes. Without it, it would match an element having both classes, instead of an element with class hstry which is below some <ul> element with class ul_class.
If you want the content, try
var hstry = $('body').find('.hstry').html();
Then you can operate with this variable any way you want.
Using jquery:
$("ul.ul_class").find(".hstr");
$('ul.ul_class .hstry').html(); //for html content
$('ul.ul_class .hstry').text(); //for text data