I am tryind to add a class in fluid based on a condition after addind itenIteration to the each loop.
Here it is only the first that works. Number two comes out as text. So there must be something wrong in the formatting.
<tr class="item{f:if(condition: itemIteration.isFirst, then: 'hidden')}">
<tr class="item{f:if(condition: itemIteration.index > 10, then: 'hidden')}">
I can write it this way so index is working fine!
<tr class="<f:if condition="{itemIteration.index} > 10">hidden</f:if>">
You forgot to quote the condition
<tr class="item{f:if(condition: itemIteration.index > 10, then: 'hidden')}">
must be
<tr class="item{f:if(condition: '{itemIteration.index} > 10', then: 'hidden')}">
Related
I understand that with Svelte (or any other framework) it's not a good idea to access the DOM directly, eg. document.getElementById and then do something over it. I have a non-dynamic table that is already on a page as a Svelte component then I also have the following data: an array representing the table row's cells (let's say I have 5 cells per row) and also another array where each element has the index number where I must add a CSS attribute active='1' in the correspondent table cell.
ex.: arrIdxs = [1,3,4] and arrCells = [a,b,c,d,e]
<table>
<tr>
<td>a</td>
<td active="1">b</td>
<td>c</td>
<td active="1">d</td>
<td active="1">e</td>
</tr>
</table>
What is a good way to accomplish that?
I'm not sure i understand the use case, but you would have to do something like this:
<script>
const arrIdxs = [1, 3, 4];
const arrCells = ['a', 'b', 'c', 'd', 'e'];
</script>
<table>
<tr>
{#each arrCells as cell, index}
<td class:active={arrIdxs.includes(index)}>{cell}</td>
{/each}
</tr>
</table>
<style>
.active {
background-color: red;
}
</style>
im a new bee of protractor .
here is the code:
// fist line
<table class="table">
<tbody class="table-body">
<tr class="table-tree" ng-repeat="items in page">
<td class="checkbox" >
<input type="checkbox">
<td class="node-name">
<span class="node-icon" title="tree">
// second line
<tr class="table-tree" ng-repeat="items in page">
<td class="checkbox" >
<input type="checkbox">
<td class="node-name">
<span class="node-icon" title="flower">
// third line
<tr class="table-tree" ng-repeat="items in page">
<td class="checkbox" >
<input type="checkbox">
<td class="node-name">
<span class="node-icon" title="flower">
</tbody>
</table>
Im want to click the sencond checkbox , and the first line is not always present, so i cant use $$('.checkbox').get(1) to get it, so I trying to locate the first checkbox where has [title = "flower"], then I write this:
var a = $$('[title="flower"]').get(0).getWebElement();
var b = a.getDriver().findElement(by.css('.checkbox'));
b.click();
but when the process finish , the first line checkbox was be click,
whats the wrong? and how can I fix it?
try $$('[title="flower"]').get(0).$('.checkbox').click()
First of all: why do you use .getWebElement() and .getDriver()?
What is you error message?
#Vlad's solution would be ok, but checkbox is not an ancestor of flower.
You need to get tr, check whether it contains title="flower" and if so, click checkbox of tr.
I won't write code for you, but you can check my answer: https://stackoverflow.com/a/48020146/6331748 and adjust code for your needs.
Option 1) Use XPath
element(by.xpath('//tr[td/span[#title="flower"]]/td[1]/input')).click();
Option 2) Use element() chain
// find the `SPAN` which title is flowser <br>
element(by.css('span[title="flower"]')) <br>
// find parent of `SPAN` until `TR` <br>
.element(by.xpath('./../..')) <br>
// find the `input` inside the first `TD` of above `TR` <br>
.element(by.xpath('./td[1]/input'))
I am trying to get my script to click on a button called Enter Response located in the same row as a specific text (SID). I am able to locate both separately but can't seem to make both work at the same time.
The table is dynamic so I am using the SID, finding it's row and then want to click on it's response button. I.E. find text '123456' & click on 'Enter Response' found in the same row.
I tried this but am getting an error locator not found:
//tr/td/a[#class='title-abbr' and text()='123456']/following-sibling::td/a[text()='Enter Response']
Table Row Headers:
Title/Source/Source ID/SID/Create Date/(Enter Response button)/Form Type
<tr>
<td class="t-Report-cell" headers="TITLE_ABBR">this is my title</td>
<td class="t-Report-cell" headers="SOURCE_NAME">source1</td>
<td class="t-Report-cell" headers="SOURCE_NUMBER">142417</td>
<td style="background-color: rgb(13, 13, 13);" class="t-Report-cell" headers="SID_ABBR">
123456
</td>
<td class="t-Report-cell" headers="TRANSACTION_DATE">07/28/2016</td>
<td style="background-color: rgb(13, 13, 13);" class="t-Report-cell" headers="LINK" align="center">
<a style="background-color: rgb(0, 255, 255);" class="response-btn" href="f?p=58117:50:27077013481519::NO::P50_TRIGGER_ID:321860">Enter Response</a>
</td>
<td class="t-Report-cell" headers="FORM_TYPE">Questions</td>
</tr>
Any help would be greatly appreciated!
if I am looking right, you should first get to the parent node before trying to get to the next sibling....because "a" element has no sibling, so basically something like that:
//tr/td/a[#class='title-abbr' and text()='123456']/../following-sibling::td/a[text()='Enter Response']
You could also just use following-sibling::td[2] instead of selecting by text in the second part of xpath, but maybe you need it for some reason.
Btw some tips:
If the element could have multiple style classes, you will have to use contains
The same applies to text, beware of spaces etc. you should trim the text or use contains to avoid wrong selectors
In my application,I've to select the last td (which is an img) in table.Can anyone help me with this ?
HTML
<table>
<tbody>
<tr>
<td>
<td>
<a onclick="return confirm('Delete creative?')" href="delete.page?cid=47">
<a href="edit.page?id=47"><a href="?duplicateId=47">
<img title="Duplicate" src="/tracker/images/skin2/bolean.png">
</a>
</td>
</tr>
</tbody>
</table>
Implemenetd as below :
#browser.img(:src => "/tracker/images/skin2/bolean.png").click
#browser.img(:src => "/tracker/images/skin2/bolean.png").last.click
which is clicking on the first image.
When you do:
#browser.img(:src => "/tracker/images/skin2/bolean.png")
This returns the first matching element.
If you want to get all of the matching elements, you need to pluralize the method:
#browser.imgs(:src => "/tracker/images/skin2/bolean.png")
You will then get a collection of all images that have the specified src. You can then get the last one and click it similar to how Ċ½eljko did it for tds.
#browser.imgs(:src => "/tracker/images/skin2/bolean.png").last.click
Try this:
#browser.tds.last.click
I have a table structure as follows. Now I need to sort these nested tables separately. Forexample: sorting chapter's row will only update chapters order in a separate table. Whereas, sorting items will update their order in another table.
I managed to setup the code and sorting. However, when I drag the items from chapter 4, it pass on the order of the items in from chapter 1 since they come before chapter 4???
Could someone help me with sorting only relevant items??
NOTE: This list is dynamic coming from database. So I am interested in one jquery code covering all the ordering bits.
<table id=subsortsortable>
<tbody class=content>
<tr id="chapter_1"><td>Chapter one</td></tr>
<tr id="chapter_2"><td>Chapter two</td></tr>
<tr id="chapter_3">
<td>
<table>
<tbody class=subcontent>
<tr id="item_31"><td>three.one</td></tr>
<tr id="item_32"><td>three.two</td></tr>
</tbody>
</table>
</td>
</tr>
<tr id="chapter_4">
<td>
<table>
<tbody class=subcontent>
<tr id="item_41"><td>four.one</td></tr>
<tr id="item_42"><td>four.two</td></tr>
<tr id="item_43"><td>four.three</td></tr>
<tr id="item_44"><td>four.four</td></tr>
<tr id="item_45"><td>four.five</td></tr>
</tbody>
</table>
</td>
</tr>
<tr id="chapter_4"><td>Chapter Four</td></tr>
</tbody>
</table>
The code I am using is as follows:
//for sorting chapters - which is outer table
$("#subsortable tbody.content").sortable({
opacity: 0.7,
cursor: 'move',
placeholder: "ui-state-highlight",
forcePlaceholderSize: true,
update: function(){
var order = $('#subsortable tbody.content').sortable('serialize') + '&action=updateChaptersOrder';
$.post("/admin/ajax/ajax_calls.php", order, function(theResponse){
});
}
});
// For sorting and updating items within a specific chapter - which is nested tbody
$("tbody.sortItems").subcontent({
opacity: 0.7,
cursor: 'move',
placeholder: "ui-state-highlight",
forcePlaceholderSize: true,
update: function(){
var order = $('tbody.subcontent').sortable('serialize');// + '&action=updateListings';
$.post("/admin/ajax/ajax_calls.php", order, function(theResponse){
});
}
});
I have got the answer to my own question.. In case someone else encounter the same problem. I have changed the following code inside the internal table:
var order = $('tbody.subcontent').sortable('serialize');
to
var order = $(this).sortable('serialize');