I am trying to find the parent of the span element with label First Name and go up the DOM until i get to the input element with class "mat-input-element"
I have attempted with the following xpath, but did not get the result i needed:
//div/div/span[contains(.,'First Name')]/parent::div[#class='add-users']/lib-text-input-v3/div/mat-form-field/div/div/div[1]/input
Any help would be appreciated. Thanks!
You can try with the below xpath.
//span[normalize-space(.)='First Name']/ancestor::div[#class='input-v3']//input[#class='mat-input-element']
Sample HTML: From jsfiddle
<html><head></head><body>
<div class="add-users">
<lib-text-input-v3 errortext="”Error" a="" valid="" first="" name”="">
<div class="input-v3">
<mat-form-field class="mat-form-field">
<div class="mat-form-field-wrapper">
<div class="mat-form-field-flex">
<div class="mat-form-field-infix">
<input class="mat-input-element" type="text">
<span class="mat-form-field-label-wrapper">
</span>
</div>
</div>
<div class="mat-form-field-underline>
<span class=" mat-form-field-ripple"="">
</div>
<div class="mat-form-field-subscript-wrapper">
<div class="mat-form-field-hint-wrapper">
<div class="mat-form-field-hint-spacer">
</div>
</div>
</div>
</div>. //closes mat-form-field-wrapper class
</mat-form-field>
<div class="input-v3__label"> // same level as input-v3 class
<div class="input-v3__label--text">
<span class="ng-tns-c11-01">First Name
</span>
</div>
</div>
</div> // closes input-v3 class
</lib-text-input-v3>
<lib-text-input-v3>…..
</lib-text-input-v3></div></body></html>
Related
I've to filter the div elements obtained from a database based on user input. This is a list of users of a chat and I want to show only the div of the user written in the input.
I've tried several solutions on the site but they don't work in React. I'm getting mad. Ideas?
Thanks so much in advance.
<div class="sidebar__chat--container">
<a class="link" href="/room/A">
<div class="sidebar__chat">
<div class="avatar__container">
<img src="1" class="MuiAvatar-img">
</div>
</div><div class="sidebar__chat--info">
<h2>Mario</h2>
</div>
</div>
</a>
<a class="link" href="/room/B">
<div class="sidebar__chat">
<div class="avatar__container">
<img "2" class="MuiAvatar-img"></div>
</div>
<div class="sidebar__chat--info">
<h2>John</h2>
</div>
</div>
</a>
</div>
<div className="sidebar__search">
<form className="sidebar__search--container">
<input
placeholder="Search for users"
type="text"
id="search"
/>
</form>
</div>
I provided an example in this SandBox
Note: I created a custom usersList that will be replaced by the data fetched from database
I want to hide a div element on hover of kendo-menu-item in angular 8.
I want to hide a div whose class is "nav-flyout" on hover of kendo-menu-item "what we do"
Here is the html code
<div class="toolbar navbar" role="banner">
<span><h3>My Project</h3></span>
<div class="spacer"></div>
<kendo-menu class="navbar">
<kendo-menu-item
[cssClass]="'what-we-do'"
text="What We Do"
url="/whatwedo"
></kendo-menu-item>
<kendo-menu-item text="Our Team" url="/ourteam"></kendo-menu-item>
<kendo-menu-item text="Our Work" url="/ourwork"></kendo-menu-item>
<kendo-menu-item text="Resources" url="/resources"></kendo-menu-item>
<kendo-menu-item text="Who Are We" url="/whoarewe"></kendo-menu-item>
</kendo-menu>
<button kendoButton [primary]="true">Let's Talk</button>
<div id="rightSpace"></div>
</div>
<div class="content" role="main"></div>
<div class="mega-nav-contain project-container">
<div id="what-we-do-flyout" class="nav-flyout">
<div class="row-fluid center">
<div class="span4">
<h3 class="loop-title">
<a href="">
<span class="green">Website</span> Design</a>
</h3>
</div>
</div>
</div>
</div>
Any help would be appreciated.
you need to add mouse-eventin kendo-menu-item like:
<kendo-menu-item (mouseover)="yourFun()" text="Our Team" url="/ourteam"></kendo-menu-item>
and in this function yourFun() change display-style , Triggers when cursor is over the mouseover applied element (like hover).
I just want to add a tooltip to the element which is clicked.
Tooltip is added to all repeat elements when clicked. Please help me.
<div ng-repeat="item in listOfMenu" class="repeat_container">
<div ng-repeat="menu in item" class="repeat_block" ng-click="getTool(menu,menu.pricelist.length)" >
<div class="shadow img_cont">
<img src="{{menu.itemimage}}" class="item_img">
<div ng-repeat="innerItem in menu.pricelist | limitTo:1">
{{innerItem.itemprice}}
</div>
</div>
<div>
{{menu.menuitemname}}
</div>
<div ng-repeat="menu in addToCart" class="add_circle" ng-show="circle">
{{menu.quantity}}
</div>
</div>
</div>
Change the div in:
<div ng-repeat="menu in item" class="repeat_block" ng-click="getTool(menu,menu.pricelist.length)" ng-class="{'clicked': menu.clicked}">
In getTool method
menu.clicked = true;
but you should put clicked:false to all others menu in items
I need extract value of attribute src from this HTML.
For example from this HTML:
<div class="css_telo js_telo">
<div class="css_teloV">
<div class="css_vlavo">
<div class="css_info css_zena">
<a class="css_foto big_foto" href="" title="Fotka: endoskopia"><span><img id="PPAsrc" src="http://m3.aimg.sk/profil/v_08c261dabb82e3eaded3e54c28c49e35.jpg?13922246241392224624" width="176" height="220" alt="Fotka: endoskopia" /></span></a>Zmeniť fotku
</div>
<div class="por_0">
<div class="css_album css_menubox edit c_prazdne" id="m_fotoalbumy">
<h3>Fotoalbumy<small> (0)</small></h3>
</div>
</div>
<div class="por_1">
<div class="css_album c_video xcss_akt css_menubox edit" id="m_videoalbumy">
<h3>Videoalbumy<small> (0)</small></h3>
</div>
</div>
<div class="por_2">
<div class="css_priatelia css_menubox edit" id="m_userFriends">
<h3>Priatelia<small> (0)</small></h3>
</div>
</div>
</div>
I need get this:
http://m3.aimg.sk/profil/v_08c261dabb82e3eaded3e54c28c49e35.jpg?13922246241392224624
I tried this XPATH expression:
//div[#class="css_telo js_telo"]/div[#class="css_teloV"]/div[#class="css_vlavo"]/div[#class="css_info css_zena"]/a/span/img/#src
But it not work. Where is problem?
it seem like its the only src on the page, you can simply do:
//img/#src
or more specific:
//img[#id="PPAsrc"]/#src
I've got this code in the jsp (sized down a bit):
<div class="popup default" ng-app="interview" ng-init="employeeId = '${employee.id}'; findTimelineEntries(); getAddInterviewRights(); getEditInterviewRights();" ng-controller="TimelineCtrl">
<div class="box-wrapper edit" ng-show="hasAddInterviewRights">
<div class="box">
<div class="pointer"></div>
<div class="box-content">
<div class="icon close" ></div>
<div class="form-item">
<!-- cut -->
</div>
</div>
<div class="form" id="convo">
<div class="form-item">
<!-- cut -->
</div>
<div class="form-break"></div>
<div class="form-item">
<div class="label">
<div class="fi-content">
Currently open goals
</div>
</div>
<div class="value">
<div class="editable" ng-repeat="goal in interviewForm.goals" ng-click="openEditable($event.target)">
<div class="icon edit"></div>
<div class="icon close" ng-click="closeEditable($event.target)"></div>
{{goal.shortDescription}}
<div class="ed-content">
<div class="form-item">
<div class="label">
<div class="fi-content">
Deadline
</div>
</div>
<div class="value">
<input type="text" ng-model="goal.dueDate" ui-date="dateOptions" size="15" />
</div>
</div>
<div class="form-item">
<div class="label">
<div class="fi-content">
Status
</div>
</div>
<div class="value select">
<select ng-model="goal.status" ng-options="code as description for (code, description) in goalStatusses"></select>
</div>
</div>
<div class="form-item">
<div class="label">
<div class="fi-content">
Comment
</div>
</div>
<div class="value">
<div class="fi-content">
<table class="plain">
<tr ng-repeat="progress in goal.progresses">
<td>{{progress.progressDate | date: 'dd-MM-yyyy'}}</td>
<td>{{progress.progressReport}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="editable">
<div class="icon add"></div>
<div class="icon close" ng-click="closeEditable($event.target)"></div>
Add a new goal
And it works in Firefox (20.0.1) just like it should: It shows 2 current goals and the option to add a new goal. But somehow the same jsp doesn't work that well in Chrome (27) as it just shows the option to add a new goal
When looking into the HTML with the Developer Tools I see that the ng-repeat is commented out by Chrome, but why would it do that??
I googled on ng-repeat getting commented out, but the answer there was that the div using the ng-repeat was not inside the div with the ng-controller, but that's certainly not the case with my code
The HTML taken from the Developer Tools:
<div class="value">
<!-- ngRepeat: goal in interviewForm.goals -->
<div class="editable">
<div class=icon add"></div>
<div class=icon close" ng-click="closeEditable($event.target)" style="dispay:none;"></div>
Add new goal
I've checked other browsers and it doesn't work in Safari (5.1) either and also doesn't work in IE8 although a colleague says it does work in his IE9
Well, I finally found what was going wrong and it actually was a
$('.select .option').click(function() {
var choice = $(this).text();
etc.
that had to be changed into
$(".select #itemAddSelector").change(function(){
var selectedOption = $(this).children(":selected");
var choice = $(selectedOption).text();
etc.
As the function that retrieves the goals from the controller was never called in Chrome, because Chrome doesn't process a jQuery click event on an option (Click event on select option element in chrome).
So it just commented in the HTML about ng-repeat saying it had tried to iterate over the goal objects, but there were no objects present ... pfff, I've been looking in the wrong direction for too long.