I have been looking on many different examples how to iterate a table.
If I am using code below for selenium I get exactly what I want.
driver.findElement(By.xpath("//td[contains(.,'Apple Pomace')]"));
though I would like to instead to iterate the code and find the value below:
<td class="ng-binding">Apple Pomace</td>
Notice there are Apple Pomace in two places
See image
there is my table:
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
<h3 ng-show="searchQuery" class="page-header page-header-sm"><span translate="TITLE_SEARCH_RESULTS" class="ng-scope">Search Results</span> <span class="label label-default ng-binding" ng-bind-html="searchQuery">Apple Pomace</span></h3>
<h3 ng-show="!searchQuery" class="page-header page-header-sm ng-scope ng-hide" translate="TITLE_ALL_PRODUCTS">All Products</h3>
<div class="alert-info ng-hide" ng-show="confirmation">
<p class="ng-binding"></p>
</div>
<table class="table table-striped table-bordered table-condensed">
<tbody><tr>
<th translate="LABEL_IMAGE" class="ng-scope">Image</th>
<th translate="LABEL_PRODUCT" class="ng-scope">Product</th>
<th translate="LABEL_DESCRIPTION" class="ng-scope">Description</th>
<th translate="LABEL_PRICE" class="ng-scope">Price</th>
<th></th>
</tr>
<!-- ngRepeat: product in products --><tr data-ng-repeat="product in products" class="ng-scope" style="">
<td><img src="/public/images/products/apple_pressings.jpg" class="img-responsive img-thumbnail" style="width: 200px" ng-click="showDetail(product.id)"></td>
<td class="ng-binding">Apple Pomace</td> //here is the item I want to fetch 'Apple Pomace'
<td><div ng-bind-html="product.description" class="ng-binding">Finest pressings of apples. Allergy disclaimer: Might contain traces of worms. Can be sent back to us for recycling.</div></td>
<td class="ng-binding">0.89</td>
<td>
<div class="btn-group">
<a class="btn btn-default btn-xs" ng-click="showDetail(product.id)"><i class="fa fa-eye"></i></a>
<a class="btn btn-default btn-xs ng-hide" ng-click="addToBasket(product.id)" ng-show="isLoggedIn()"><i class="fa fa-cart-plus"></i></a>
</div>
</td>
</tr><!-- end ngRepeat: product in products -->
</tbody></table>
</div>
I hade made following code but it's not correct in my opinion.
element.all(by.css('.ng-binding')).each(function(element, index)
{
element.getText().then(function (text)
{
});
})
notice I got 'Apple Pomace' in two places that's why its important to iterate through the td-class 'ng-binding'.
Could someone help me
Thank you in advance
In case if you want to just access the td you can use this:
element(by.cssContainingText('.table td', 'Apple Pomace'))
In case if you would like to filter the rows in the table by the product and get the element you can use below code snippet:
element.all(by.repeater('product in products')).filter(function(elem, index) {
return elem.element(by.cssContainingText('td', 'Apple Pomace')).isPresent();
}).first();
Related
SO basically right now I have a simple input group which is made to trigger a filter in my angular app. (sizeFilter)
<div class="container">
<div class="input-group input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-lg">Filter by size</span>
</div>
<input [(ngModel)]="sizeInput" type="text" class="form-control" aria-label="Large"
aria-describedby="inputGroup-sizing-sm">
</div>
<table class="table">
<thead>
<tr>
<th scope="col">hash</th>
<th scope="col">size</th>
<th scope="col">time</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody *ngFor="let data of json | sizeFilter : sizeInput"> <-- THis is there my filter is right now
<tr>
<td (click)="onUpdateClick(data.hash , data.size, data.time)" class="hHover"
title="Click to update the data">{{data.hash}}</td>
<td>{{data.size}}</td>
<td>{{data.time}}</td>
<td><button class="btn btn-primary" (click)="onDeleteClick(data.hash)">Delete</button></td>
</tr>
</tbody>
</table>
But I want to create another filter, and add a dropdown menu to the input group . So I can select the filter that I want to use. For example the current one is only for size. But maybe I want to filter by other paramenter , time for example.
I was looking at this input group with a dropdown menu
<div class="input-group mt-3 mb-3">
<div class="input-group-prepend">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Filter1</a> <--- THis is where I would want to trigger some filters depending of the selection
<a class="dropdown-item" href="#">Filter2</a>
<a class="dropdown-item" href="#">Filter3</a>
</div>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
But how AM i supposed to trigger the ngModel and specify the trigger I want to use with an element?
I've built a feedback function to be used on the bottom of pages on our company website. The visitor can vote YES or NO on the question, "Was this information useful to you?" The click show a div (feedbackDiv1/feedbackDiv2) via Javascript.
The function works, but I want the question and the answer buttons to disappear after the visitor has voted, I.e. hide the div #pagefeedback.
I've tried all my tools, but I cant get this to work.
Help would be very much appreciated!
This is the JavaScript used:
function showFeedback1() {
document.getElementById('feedbackDiv1').style.display = "block";
function showFeedback2() {
document.getElementById('feedbackDiv2').style.display = "block";}
This is the HTML used:
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody>
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback1()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback2()"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center"><div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div></div>
</div>
Kind regards,
Pete
Based on Robert's answer, you could do a simple function which receive the ID of the element that has to be shown.
function showFeedback(feedback) {
document.getElementById(feedback).style.display = "block";
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">Was this information useful to you?</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center"><a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('feedbackDiv1')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES</a></td>
<td align="center"><a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('feedbackDiv2')"><i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO</a></td>
</tr>
</tbody>
</table></div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">POSITIVE FEEDBACK</div></div>
<div align="center"><div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">NEGATIVE FEEDBACK</div>
</div>
</div>
If you give your table an ID it's fairly easy to just change it's display css to none. Also you can accomplish the same with 1 function and simply pass an argument to it that you can use in a conditional statement to show your appropriate feedback.
function showFeedback(feedback) {
if (feedback == 'yes') {
document.getElementById('feedbackDiv1').style.display = "block";
} else {
document.getElementById('feedbackDiv2').style.display = "block";
}
document.getElementById('options').style.display = "none";
}
<div class="greycontentbox">
<div id="pagefeedback">
<h4 style="text-align: center;">
Was this information useful to you?
</h4>
<table align="center" width="70%" border="0" cellspacing="2" cellpadding="5">
<tbody id="options">
<tr>
<td align="center">
<a class="knappfeedbackyes knappsmall" href="#" onclick="showFeedback('yes')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>YES
</a>
</td>
<td align="center">
<a class="knappfeedbackno knappsmall" href="#" onclick="showFeedback('no')">
<i style="margin-right: 10px;" class="fa fa-thumbs-up"></i>NO
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div align="center">
<div id="feedbackDiv1" style="display:none;" class="negativefeedback answer_list">
POSITIVE FEEDBACK
</div>
</div>
<div align="center">
<div id="feedbackDiv2" style="display:none;" class="positivefeedback answer_list">
NEGATIVE FEEDBACK
</div>
</div>
</div>
I am learning Angular 4 in combination with Bootstrap.
The idea is to receive an array of lists from my backend server, which works fine, and to display each list in one single accordion (collapse).
My problem is the following: As the array of lists varies in length, I have to create the elements dynamically, which creates this error:
zone.js:569 Unhandled Promise rejection: Template parse errors:
Can't bind to 'target' since it isn't a known property of 'tr'. (" <tbody>
<tr *ngFor="let listObj of lists" class="panel panel-default" data-toggle="collapse" [ERROR ->]data-target="#collapse{{listObj.index}}">
<td><div class="panel-group">
<div class="p"): ng:///AppModule/TestComponent.html#8:90 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'target' since it isn't a known property of 'tr'. (" <tbody>
<tr *ngFor="let listObj of lists" class="panel panel-default" data-toggle="collapse" [ERROR ->]data-target="#collapse{{listObj.index}}">
<td><div class="panel-group">
<div class="p"): ng:///AppModule/TestComponent.html#8:90
How it should look like:Tested with hardcoded HTML
My HTML:
<table class="table table-hover ">
<thead>
<tr>
<th>Description</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let listObj of lists" class="panel panel-default" data-toggle="collapse" data-target="#collapse{{listObj.index}}">
<td><div class="panel-group">
<div class="panel-heading">
{{listObj.list.listDescription}}
{{listObj.index}}
</div>
<div id="collapse{{listObj.index}}" class="panel-collapse collapse">
<ul class="list-group">
<li *ngFor="let item of listObj.list.listItems" class="list-group-item col-lg-12">{{item}}</li>
</ul>
</div>
</div>
</td>
<td>{{listObj.list.listAuthorName}}</td>
<td>
<div class="input-group">
<input type="text" class="form-control" #listAdd>
<span class="input-group-btn">
<button (click)="onClickAddItem(list.listId, listAdd.value)" class="btn btn-default" type="button">add</button>
<button class="btn btn-danger" type="button">Delete</button>
</span>
</div>
</td>
</tr>
</tbody>
</table>
The array of list-objects is in standard JSON-format
also exuse my english and thank you for your help
I guess you are looking for attribute binding like
[attr.data-target]="'#collapse' + listObj.index"
my PHP programming return following JSON via AJAX which is being set in a scrope variable $scope.roleAssigned which then eventually generates an Accordian with a table and checkbox:
$json2 = '{"status":"OK","data":[{"label":"Admin","id":1,"rights":[{"id":"1","label":"create","selected":"1"},{"id":"2","label":"update","selected":"0"},{"id":"3","label":"delete","selected":"0"},{"id":"4","label":"lists","selected":"0"}]},
{"label":"Normal User","id":2,"rights":[{"id":"1","label":"create","selected":"1"},{"id":"2","label":"update","selected":"1"},{"id":"3","label":"delete","selected":"1"},{"id":"4","label":"lists","selected":"0"}]}]}';
Now on button click I want to send back same data back to PHP in JSON. selected field is telling whether someone clicked on checkbox or not. So for instance {"id":"1","label":"create","selected":"1"} could be {"id":"1","label":"create","selected":"0"}
Is there any Angular Way to update key of scope array on checkbox click? I don't want to generate iterating DOM(jQuery way).
HTML
<div class="dynamic" ng-repeat="role in roles | orderBy:sortType:sortReverse | filter:queryRoles ">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title text-center">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapse_{{role.id}}">
{{role.label}}
</a>
</h2>
</div>
<div id="collapse_{{role.id}}" class="panel-collapse collapse">
<div class="panel-body text-center">
<table id="roles-table" class="table table-striped" align="center">
<thead>
<tr>
<td>Droit</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="right in role.rights">
<td>{{right.label}}</td>
<td>
<input data-rid="{{role.id}}" type="checkbox" ng-checked="right.selected == 1">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
Let me know if possible.
You can make use of $parent.$index and $index
<input data-rid="{{role.id}}" type="checkbox" ng-checked="right.selected == 1" ng-click="checkIt($parent.$index, $index, right.selected)">
$scope.checkIt= function(parentIndex, index, selected){
selected = (selected === "1") ? "0" : "1";
$scope.roles[parentIndex].rights[index].selected = selected;
};
Okay here I have a jsp page, in which I have used a jsp code in inflating elements in an HTML table using a loop...Now when i reload this table using AJAX...what happens simply is that it becomes unresponsive...ie...I'm unable to apply the onClick sorting and search bar which were working before reloading..
Here's my coding for the table
<div class="row-fluid sortable" id="tableRow">
<div class="box span12" id="teacherTableRow">
<div class="box-header" data-original-title>
<h2><i class="halflings-icon user"></i><span class="break"></span>STAFF TABLE</h2>
<div class="box-icon">
<i class="halflings-icon wrench"></i>
<i class="halflings-icon chevron-up"></i>
</div>
</div>
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>TN</th>
<th>TC</th>
<th>Actions</th>
</tr>
</thead>
<tbody >
<% while(resultset.next()) { %>
<tr>
<td> <%= resultset.getString(1) %> </td>
<td> <%= resultset.getString(2) %> </td>
<td class="center" >
<a class="btn btn-info" href="#">
<i class="halflings-icon white edit"></i>
</a>
<a class="btn btn-danger" href="deleteTeacherData.jsp?tc=<%=resultset.getString(2)%>" onclick="return deleteTeacher()" >
<i class="halflings-icon white trash" ></i>
</a>
</td>
</tr>
<% }%>
</tbody>
</table>
</div>
</div><!--/span-->
</div><!--/row-->
Here is my javascript code which I have tried so far to reload and get it active..
$('#teacherTableRow').load('HOD-page1.jsp #teacherTableRow');
I also tried this, but no avail...
$('#teacherTableRow').load('HOD-page1.jsp #teacherTableRow',function(){
$('#teacherTableRow').on("load",'HOD-page1.jsp #teacherTableRow'});