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();
Related
<a class="mobileSortBy-toggle_new"
data-collapsible="mobileSortBy-panel-{{type}}"
data-collapsible-disabled-breakpoint="medium"
data-collapsible-disabled-state="closed"
data-group-collapsible="main">{{lang 'common.sorter.sort_by'}}</a>
<div class="mobileSortBy-panel" id="mobileSortBy-panel-{{type}}" data-mobile-sort-by>
<h4 class="mobile-panel-heading"><span class="mobile-panel-heading-ellipse">{{lang 'common.sorter.sort_by'}}</span></h4>
<a class="mobile-panel-close" href="#" data-collapsible="mobileSortBy-panel-{{type}}" data-group-collapsible="main"><svg><use xlink:href="#icon-close" aria-hidden="true"></use></svg></a>
<div class="mobileSortBy-panel-body" data-lock-body-scroll>
<ul class="navList navList--mobileSelectList">
<li class="navList-item">{{lang 'common.sorter.relevance'}}</li>
<li class="navList-item">{{lang 'common.sorter.newest'}}</li>
<li class="navList-item">{{lang 'common.sorter.price_asc'}}</li>
<li class="navList-item">{{lang 'common.sorter.price_desc'}}</li>
</ul>
</div>
</div>
SORT BY code for the mobile version. When the user is selecting an option, the code shows the "is-active" in the class, and that places a V mark next to it.
The problem is with the first option. It ignores the If statement and doesn't show the mark.
What can be done to fix it?
I am currently am trying to get this below function working. I would like to use a relative path in order to add an active class for my different ul li a tag in my dom. The problem I am facing is that despite splitting the URL, it doesn't appear to be checking and comparing right part of the url and href. here is an of my HTML structure:
<div class="parent-bar"> <ul> <li>
<a class="parent-link" href="/dummy-parent-2/">
<div class="wrap">
<span class="text">Parent page 2
</span>
</div> </a> <div id="child-menu-1" class="child-menu">
<ul>
<li>
<a href="/dummy-parent-2/dummy-child-1/" class="child-links">
<div class="wrap">
<span class="text">child page 1
</span>
</div>
</a>
</li>
</ul> </div> </li> </ul> </div>
and here is the jQuery supposed to be tracking the url:
jQuery(function($) {
var path = window.location.href;
path = path.split("/");
$(".parent-link").each(function() {
if (this.href === path[3]) {
$(this).addClass('active');
}
});
if($('.parent-link').hasClass('active')){
$('.child-links').addClass('active');
}
});
The console is not showing any errors. I can see the active class is not added. The reason I am looking to do this is to allow the children of the parent items to be active as well. I will apply the same principle to the children to track the parent's respective URL. if that makes sense.
Any help or insight would be much appreciated.
I have a todo list and I want to show each item in a "li" tag. And in this tag, i also want to add a link X to be able to delete the item. But I got an error:
org.xml.sax.SAXParseException: The value of attribute "th:text" associated with an element type "li" must not contain the '<' character.
Here is the code that got the error:
<li th:each="todoitem : ${todolist}" th:text="${todoitem.text} + <a href='#' class='close' aria-hidden='true'>×</a>" th:attr="data-value=${todoitem.id}" ></li>
I also tried like this, also did not work:
<li th:each="todoitem : ${todolist}" th:text="${todoitem.text}" th:attr="data-value=${todoitem.id}"><a href='#' class='close' aria-hidden='true'>×</a></li>
The code that I am trying to generate is like this:
<li data-value="0">text of todo list ×</li>
So how can I make a loop that can also add the link into the li tag?
One option is to use a <span> to render the text.
So from your second attempt, i.e.
<li th:each="todoitem : ${todolist}" th:text="${todoitem.text}" th:attr="data-value=${todoitem.id}"><a href='#' class='close' aria-hidden='true'>×</a></li>
move the th:text into a new <span>
<li th:each="todoitem : ${todolist}" th:attr="data-value=${todoitem.id}">
<span th:text="${todoitem.text}" th:remove="tag"></span>
<a href='#' class='close' aria-hidden='true'>×</a>
</li>
You could also use th:inline="text" as explained here.
I am trying to put html in the bootstrap popover and the content shows nicely but when I click on my links inside the popover it just goes to the parent 'OpenRecent' method on the anchor tag that triggers the popover. You can see below in the data-content html the different ways I try to call the function I want. How can I achieve this?
<ul id="RecentSearches" class="nav nav-tabs nav-stacked well" data-bind="foreach: CurrentItems">
<li>
<div>
<input type="checkbox" class="checkbox inline" data-bind="value: $data.TransId,
checked: $root.ItemsSelected"/>
<a href="#"
data-bind="text: $data.Description + '-' + $data.County,
attr:
{
id: $data.TransId,
'data-title': $data.Description
},
click: $root.OpenRecent"
data-trigger="hover"
rel="popover"
data-html="true"
data-content="<a data-bind='click: $parent.Print.bind($data)'>Print</a> |
<a data-bind='click: app.RecentSearches.Print.bind($data)'>Print 2</a>
<a data-bind='click: $parent.Email'>Email</a> |
<a data-bind='click: $parent.SaveToPDF'>PDF</a> |
<a data-bind='click: $parent.SavetToCSV'>CSV</a>">
</a>
</div>
</li>
</ul>
The HTML is your data-content will not have been bound by Knockout, as it was added dynamically later.
One option is to add a way to identify the links (class) and then use an unobstrusive approach to adding an event handler.
$("ul").on("click", ".print", function(event) {
var context = ko.contextFor(this);
context.$root.Print(context.$data);
event.preventDefault();
});
I am not sure why your OpenRecent function is getting called. It appears to me that bootstrap creates the popover outside of the element that it is triggered on. So, this would not be a parent of the popover. If you are still having an issue with that part, then maybe you could get it working in jsFiddle.
Here is a fiddle with the unobtrusive handler: http://jsfiddle.net/rniemeyer/Edww3/
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