I have a table where each td has an input (like a spreadsheet).
My html template the code as follows:
<tr *ngFor="let project of projects" (click)="onSelect(project)">
<th class="panel fixed">{{project.id}}</th>
<th class="panel fixed">{{project.name}}</th>
<td *ngFor="let load of projectLoads[project.code]; let d=index" class="cell panel scrolling">
<input class="load" [(ngModel)]="projectLoads[project.code][d]" title="{{project.code+' . '+d}}" />
</td>
…
When I fill one cell in with a number, for example 1, the number is repeated in the next cell.
How it comes?
(Note that there is no ngForm in my current code.)
Related
I have seen questions pertaining to accordion but not entirely to my specific need. My table is populated using spacebars, more specific a nested each loop like this:
<tbody>
{{#each piece in pieces}}
<tr id="{{piece._id}}" class="itemList table-warning">
<th class="name tText">{{piece.name}} {{piece._id}}</th>
<td class="pdf tText" style="text-align: center"><a class ="pdf" href="{{piece.pdf}}" target="_blank"><i class="fa fa-file-text-o" aria-hidden="true"></i></a></td>
<td class="audio tText" style="text-align: center"><a class="audio" href="{{piece.audio}}" target="_blank"><i class="fa fa-volume-up" aria-hidden="true"></i></a></td>
<td class="format tText">{{piece.instrumentation}}</td>
<th class="price tText" >${{piece.price}}</th>
<td><input class ="qty" type ="number" name ="quantity" value="0" min="0"></td>
</tr>
<!-- Row that is being clicked-->
<tr class="partsList">
<td colspan="3"></td>
<th class="partName tText">{{piece.name}} Parts</th>
<td colspan="2"></td>
</tr>
{{#each part in piece.parts}}
<!-- Rows that should accordion -->
<!-- Currently ALL rows accordion on click. Need to accordion based on _id-->
<tr class="partList">
<td colspan="3"></td>
<td class="pname tText">{{piece.name}}: {{part.pname}}</td>
<td class="price tText">${{part.pprice}}</td>
<td><input class="qty" type="number" name="quantity" value="0" min="0"></td>
</tr>
{{/each}}
{{/each}}
</tbody>
I have a click function like so:
'click .partsList': function(e){
e.preventDefault();
$('.partList').nextUntil('tr.itemList').toggle();
}
The accordion function works, however it works with every instance of the each loop. i.e. every tr class ="partsList" will accordion at the same time on click.
To my understanding of the each loop, I can access the _id of a document using {{piece._id}}. If I set the table row id to equal that however, it only reads the _id of the FIRST document in the collection.
What I need is on click for the <tr class="partList"> to accordion based on _id. Or perhaps you would go about this a different way than bootstrap tables?
Please let me know if my question needs clarification.
You could filter the clicked .partslist using a data-* attribute. This causes jQuery to select only this specific items. Note that you need to attach the data-* attribute to the row that is clicked and to the rows that should collapse:
<tbody>
{{#each piece in pieces}}
...
<!-- Row that is being clicked-->
<!-- use the _id value of the piece context as data attribute -->
<tr class="partsList" data-id="{{piece._id}}">
<td colspan="3"></td>
<th class="partName tText">{{piece.name}} Parts</th>
<td colspan="2"></td>
</tr>
{{#each part in piece.parts}}
<!-- Rows that should accordion -->
<!-- Currently ALL rows accordion on click. Need to accordion based on _id-->
<!-- use the _id value of the piece context as data attribute -->
<tr class="partList" data-target="{{piece._id}}">
...
</tr>
{{/each}}
{{/each}}
</tbody>
'click .partsList': function(e, templateInstance){
e.preventDefault();
// get the data-id attribute of the clicked row
const targetId = templateInstance.$(e.currentTarget).data('id')
// skip if this row is not intended to toggle
if (!targetId) return
// toggle based on data-target attribute
templateInstance.$(`.partList[data-target="${targetId}"]`).nextUntil('tr.itemList').toggle();
}
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'))
Just starting to learn Coffeescript, and I'm working with React.js. I'm trying to determine which was clicked, and I've been advised not to use data-attributes on each header. I have some ideas how to handle this under the handleHeaderClick function, but I'm not exactly sure how they should be implemented. I'm also thinking about splitting up the ContactsTable component into a ContactsTableHeader component and a ContactsTableRow component, but I should still have the same issue in ContactsTableHeader - determining which header was clicked.
#Application.cjsx
handleHeaderClick: ->
# childComponent.props
# childComponent.refs
# React.findDOMNode(childComponent.refs.firstName)
# React.findDOMNode(childComponent.refs.lastName)
# React.findDOMNode(childComponent.refs.age)
render: ->
<div>
<ContactsTable contactList={#state.contacts} onClick={#handleHeaderClick} />
</div>
#ContactsTable.cjsx
render: ->
if #props.contactList
contactsList = #props.contactList.map (contact) ->
<tr><td>{"#{contact.firstName}"}</td><td>{"#{contact.lastName}"}</td><td>{contact.age}</td></tr>
<table style={tableStyle}>
<thead style={headerStyle} onClick=#props.onClick>
<tr>
<th>FirstName</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{contactsList}
</tbody>
</table>
You can do something like this.
#Application.cjsx
handleHeaderClick: (header) ->
#setState({clickedHeader: header})
#do something else
render: ->
<div>
<ContactsTable contactList={#state.contacts} onClick={#handleHeaderClick} />
</div>
#ContactsTable.cjsx
render: ->
if #props.contactList
contactsList = #props.contactList.map (contact) ->
<tr><td>{"#{contact.firstName}"}</td><td>{"#{contact.lastName}"}</td><td>{contact.age}</td></tr>
<table style={tableStyle}>
<thead style={headerStyle}>
<tr>
<th onClick={#props.onClick('FirstName')}>FirstName</th>
<th onClick={#props.onClick('LastName')}>Last Name</th>
<th onClick={#props.onClick('Age')}>Age</th>
</tr>
</thead>
<tbody>
{contactsList}
</tbody>
</table>
Here the clickedHeader is preserved inside the component which is present in Application.cjsx. You can also preserve it inside ContactsTableHeader which should look something like similar.
I'm a beginner and I'm trying to write a Selenium web driver. I'm using eclipse and trying to locate a link available in next column. In each row I have different link. For example in my employee data table I have 2 columns and 10 rows in one page. The first column contains the name of person and second column contains its employee ID (ID is a hyperlink). I'm trying to select the hyperlink of any employee but I'm not able to do it.
I have below the HTML code and sample script.
<span id="37">
<div class="clear"></div>
<div id="FC_Schema.1021.WIP" type="DataCheckingList" name="FC_Schema.1021.WIP">
<input id="baseurl" type="hidden" value="/Web/" name="baseurl">
<input id="hdnDcCnt" type="hidden" value="13" name="hdnDcCnt">
<input id="PageNo" type="hidden" value="1" name="PageNo">
<meta content="width=device-width" name="viewport">
<style type="text/css">
<div id="DataCheckingLoad">
<div id="SupplyChainTabs">
<div id="gbo" class="InnerAlertsTabs">
<table id="one" class="draggable" width="100%">
<thead>
<tbody>
<tr>
<td valign="top" align="center">
<td valign="top">
<td valign="top">
<a onclick="return ButtonClick(this,'TxnyD.Communities.2.1','Org.2000476_Product.THQS|SMS|Questionnaire.WIP_Questionnaire_TxnyD.Communities.2.1_THQS_TxnyD.Operationaloffice.1.2');" href="#f">Axiom
Process LLC</a>
<div class="country-name">
<div class="CompanyInfoContactLinks">
</td>
<td valign="top">
THQS
<div class="clear"> </div>
<a id="Org.2000476_Product.THQS|SMS|Questionnaire.WIP_Questionnaire_TxnyD.Communities.2.1_THQS_TxnyD.Operationaloffice.1.2" onclick="RedirectToQuestionnairePage(id)" href="#">THQS</a>
<div class="clear"> </div>
</td>
In the above code first column contains company name i.e "Axiom
Process LLC" and second column contains company subcription name i.e."THQS". I have to select the THQS link of company "Axiom Process LLC"
Selenium script designed for it as below
public static void main(String[] args) throws Exception {
WebDriver driver = new FirefoxDriver();
driver.manage().window().maximize();
driver.get("http://XXX.XXX.XXX.XXX/Web");
Thread.sleep(1000);
driver.findElement(By.xpath("//input[#id='UserName']")).sendKeys("Gbouser.1");
driver.findElement(By.xpath("//input[#id='Password']")).sendKeys("****");
driver.findElement(By.xpath("//input[#name='Login']")).click();
driver.findElement(By.xpath("//a[contains(text(),'Task')]")).click();
driver.findElement(By.xpath("//a[contains(text(),'Data Checking')]")).click();
driver.findElement(By.partialLinkText("Axiom")).findElement(By.xpath("//a[contains(text(),'THQS')]")).click();
}
So basically these are dynamic tables and each time it will have different records. How can select the link available in column?
I also tried below script as well:
driver.findElement(By.name("*[id^='CLS'][id$='Demolition Limited']")).findElement(By.xpath("//a[contains(text(),'THQS')])[3]")).click();
welcome to Stackoverflow. Before answering your question, just a few pointers. Think that you had a downvote 'cause you didn't format your question well. Otherwise a perfectly legal question, and you would receive help much earlier.
Secondly, don't ever put the real Web site address, username and password :). I was able to login, and understand exactly what you need, but a malicious guy could do bad wonders there.
To answer your question, instead of the line that is causing you problems, try this
Thread.sleep(3000);
TablePageObject tablePageObject = PageFactory.initElements(driver, TablePageObject.class);
tablePageObject.clickLink("Axiom");
Where TablePageObject is
public class TablePageObject {
private WebDriver driver;
#FindBy(css = "table tr")
private List<WebElement> allTableRows; // find all the rows of the table
public TablePageObject(WebDriver driver) {
this.driver = driver;
}
public void clickLink(String companyName) {
for(WebElement row : allTableRows) {
List<WebElement> links = row.findElements(By.cssSelector("a"));
// the first link by row is the company name, the second is link to be clicked
if (links.get(0).getText().contains(companyName)) {
links.get(3).click();
}
}
}
}
An explanation, TablePageObject class will be your programmatic handle for the dynamic table you're trying to control. It follows a page factory pattern of selenium, which I heartly recommend, and you can learn more here https://code.google.com/p/selenium/wiki/PageFactory
It basically keeps a collection of rows of your table, which more or less looks like:
<tr>
<td valign="top" align="center">
// irelevant
</td>
<td valign="top">
// irelevant
</td>
<td valign="top">
<a>Axiom Process LLC</a>
<a>company details</a>
<a>web details</a>
</td>
<td valign="top">
<a>THQS</a>
</td>
<td valign="top" align="center" style="display: none">
// irelevant
</td>
<td valign="top">
//irelevant
</td>
<td valign="top">
// irelevant
</td>
<td valign="top">
</td>
<td>
</td>
</tr>
You collect all the links from the table, check the company name against the first link, and if matched, click the fourth link,
Hope it helps, best,
by the way, I've masked your password in the question
Given this table structure:
<table id="tblBranchDetails">
<tr>
<td width="120px">Branch:</td>
<td id="branchName" class="branchData">
<label id="lblBranchName"></label>
<input type="text" id="txtBranchName" class="hideOnLoad editBranchInfo" />
</td>
</tr>
<tr>
<td>Address Line 1:</td>
<td id="branchAddress1" class="branchData">
<label id="lblAddress1"></label>
<input type="text" id="txtAddress1" class="hideOnLoad editBranchInfo" />
</td>
</tr>...
I'm trying to select the label and input in each td so I can clear the label's text and hide the input.
This gives me the text in the label (verified in the console):
$('table#tblBranchDetails tr td:nth-child(2):eq(0)').text();
So I know I can clear the label's text with ".text('')"
Having figured that out, I thought this would give me the value of the input:
$('table#tblBranchDetails tr td:nth-child(2):eq(1)').val()
But it gives me the value of the label in the next td. So obviously I'm using the :nth-child() and :eq() functions wrong.
What's the correct way to do what I'm trying to do?
I was nuking this.
Here's the solution:
$('#btnShowBranchEditBoxes').click(function() {
$('#tblBranchDetails tr').find('label').fadeOut(200);
$('#tblBranchDetails tr').find('.editBranchInfo').delay(200).fadeIn(200);
// Replace the buttons
$('table#tblBranchDetails input#btnShowBranchEditBoxes').fadeOut(200);
$('table#tblBranchDetails input.btnEditBranch').delay(200).fadeIn(200);
});