Would like to ask for your help with the following scenario:
I need to access a table, select the row that contains the status = 'GOO' then
I need to click in a button to activate the edit of this row then
I click a at the last column where the check box is located (this check box is responsible to change from False to true the value in the column or vice-versa)
The click at the button I am doing in a function:
function changeConformStatus(statusCode){
element(by.id('btnEdit-US.'+statusCode)).click();
browser.sleep(500);
}
Inside the same function above, I also have the action to click at the checkbox after it is displayed and the click to save it:
element(by.css('[editable-checkbox="scopeValue.getConformMapping(scopeValue.getDataRow('+'US.'+statusCode+')).conform"]')).click();
element(by.id('btnSubmit-US.'+statusCode)).click();
All the elements have the Status code after the 'US.' so thats why I am receiving the Status from the test and then passing it directly to the element locator.
My question/problem is... every time I execute the test, it works for the click at the button to edit (located in the first column of the table and same row as the checkbox I want to click) but fails for the checkbox:
"No element found using locator: By(css selector, [editable-checkbox="scopeValue.getConformMapping(scopeValue.getDataRow(US.GOO)).conform"])"
So.. How can I click at this checkBox then?
HTML:
<table id="datatableDir" class="table table-hover table-bordered table-striped dataTable no-footer" style="width: 100%" role="grid" aria-describedby="datatableDir_info">
<thead>...</thead>
<tbody>
<tr role="row" class="odd">
<td id="2-4" class="ng-scope">
<span editable-checkbox="scopeValue.getConformMapping(scopeValue.getDataRow('US.GOO')).conform" e-name="conform" e-form="scopeValue.rowforms['US.GOO']" e-required="" class="ng-scope ng-binding editable editable-hide">false</span>
<span class="editable-wrap editable-checkbox ng-scope">
<span class="editable-controls">
<input type="checkbox" name="conform" required="required" class="editable-input ng-touched ng-dirty ng-valid-parse ng-not-empty ng-valid ng-valid-required" ng-model="$data" style="">
<div class="editable-error ng-binding ng-hide" ng-show="$error" ng-bind="$error" style=""></div>
</span>
</span>
</td>
</tr>
</tbody>
</table>
UPDATE
#Sanja's answer was 99% correct, I had to do this in order to solve the problem:
element(by.xpath("//*[#editable-checkbox=\"scopeValue.getConformMapping(scopeValue.getDataRow("+'\'US.'+statusCode+"\')).conform\"]/../span/span/input")).click();
According to the code it looks like you want to click the span, not the checkbox.
In order to click the checkbox, you'll need to select the input element:
element(by.xpath(".//[#editable-checkbox='scopeValue.getConformMapping(scopeValue.getDataRow('+'US.'+statusCode+')).conform/../span[1]/span/input")).click()
Related
I've done some looking around at various examples and options and I've managed to stump myself and wondered if anyone could please help?.
I have a few rows pulled from a table that have a radio button within the row and an id (dynamic), which i wouldn't know as this is the row concatenated with 0 or 1 for show and hide. Below the radio buttons are additional information fields for each choice which match the id of the radio button later. These boxes the user can enter some text. When these fields are checked, the idea is the box is visible for them to add the info and hidden when unselected. The checked boxes work fine, all selected rows show a tick. I am using the same form to create and edit entries.
When a user selects an option and it is saved, on the edit page, the page loads and the checkbox is checked but i need that id of the checkbox to display or hide the row below it. As I don't know these ids, I can't get jQuery to grab it as they'll change and are dynamic.
What I want to do is on page load, grab the selected checkbox ids and then i can use those to show or hide the text boxes below.
Do anyone have any ideas of how precisely I can do this.
Many thanks in advance and sorry to have been initially vague.
Relevant code is...
<div class="form-group">
<label for="exampleInputEmail1">Here are your work experience placements</label>
<div class="row"><!--Start of row -->
<div class="col-md-12">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Business name</th>
<th scope="col">Address</th>
<th scope="col">Dates</th>
<th scope="col">Include on CV</th>
<th scope="col">Exclude from CV</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bolton College</td>
<td>Deane Road, Bolton, BL3 5BG </td>
<td>18/05/2018 to 18/05/2018</td>
<td><input type="radio" name="placement_id_0" id="we_check_13_1" value="13_1" onclick=" checkInclude(this.id);" checked/>
<td><input type="radio" name="placement_id_0" id="we_uncheck_13_0" onclick=" checkInclude(this.id);" value="13_0"/></td>
</tr>
</tbody>
</table>
</div>
</div>
</div> <!--End of row -->
<!--Work experience descriptins start here -->
<div class="row"><!--Start of row -->
<div class="col-md-12">
<h3>Work experience descriptions</h3>
<p class="lead">Please complete the brief descriptions of your roles at each of your work experience placements</p>
<hr/>
<div id='we_div_13'>
<p>What did you do at Bolton College between 18/05/2018 and 18/05/2018?</p>
<div class="form-group">
<textarea class="form-control" rows="10" id='description_13' name="we_desc_13" value="251" placeholder="Please detail your role and describe specifically what you did whilst on placement at Bolton College during that time period"></textarea>
</div>
</div>
</div>
</div>
When your table completed rendering, try to run this function:
// Get all input box elements
var boxes = $("input[type='checkbox']");
// Loop through each input box
$.each( boxes, function( key, value ) {
// Check if the input box is checked
if ($(this).prop('checked')) {
// Input box is checked - Add anything you want to happen in the clause below
var boxid = $(this).attr('id')
console.log(boxid + ' is checked');
} else {
// Input box is not checked - Add anything you want to happen in the clause below
var boxid = $(this).attr('id')
console.log(boxid + ' is not checked');
}
});
On another note, the second way to do it is by making the function server side by adding a condition when you bring the data in that if the following table column or object contains data or is null to do something; the above JS will identify all checked and unchecked items client side, I guess your question was how to identify if a box is checked; this should easily do it.
I want to know how to add one particular column value as textbox in an AngularJS grid.
So, I am implementing an AngularJS grid as below:
<div>
<table>
<tr>
<th>
<td>Customer Account Number</td>
<td>Customer Name</td>
</th>
</tr>
<tbody>
<tr ng-repeat="item in data">
<td>{{item.CustomerAccNumber}}</td>
<td>{{item.CustomerName}}</td>
</tr>
</tbody>
</table>
<input type=button value="Add Row" ng-click="Add()"/>
So, in scenario 2 things happen:
By default I am getting few records as "Customer Account Number" and "Customer Name".
But there is an "Add Row" button on the same page I need to implement which adds a new row to the grid.
The first column "Customer Account Number" is a text box and second row is noneditable.
So, how to place textbox as a column only when adding a new row from button?
Let's say after adding add row my first column is coming as text box, so after entering the account number in the textbox on textchange it should fetch the customer account number and display it in the same row.
Can someone help me figure out how to put the textbox into one particular column in grid?
Can it be done the way I have implemented the grid?
I don't want to use nggrid.
I would do something like this:
First, in your Controller, in your Add() function, when you push a new row, add a field such as isEditable to allow you to differentiate between a newly added row in the UI.
$scope.Add = function() {
$scope.data.push({
'CustomerAccNumber': 1,
'CustomerName': '',
'isEditable': true // field to identify new row
})
}
Then in your markup, having that flg available, you can leverage ngIf, like so:
<tr ng-repeat="item in data">
<td ng-if="!item.isEditable">{{item.CustomerAccNumber}}</td>
<td ng-if="item.isEditable">
<input type="text" ng-model="item.CustomerAccNumber">
</td>
<td>{{item.CustomerName}}</td>
</tr>
it should fetch CustomerAccount number
As far as your third item, you can use ngBlur to make a call when the user clicks out of the box:
1) Define a function in your controller to call when the user leaves the box.
$scope.doSomethingWithAccNumber() {
// $http call, etc
}
2) Update your textbox to use the ngBlur directive that will trigger when the user clicks out.
<td ng-if="item.isEditable">
<input type="text"
ng-model="item.CustomerAccNumber"
ng-blur="doSomethingWithAccNumber()">
</td>
If you want other keys to trigger this, you can use ngKeydown as well. Use of this is outlined well here. For example, you would want to add ng-keydown="$event.keyCode === 13 && doSomethingWithAccNumber()" to your input to trigger on Enter.
I have a table constructed with ng-repeat, where each row has a checkbox set by a value in the JSON data that's being repeated:
<tr ng-repeat="t in tabledata" ng-click="t.isChecked=t.!isChecked">
<td><input type="checkbox" ng-model="t.isChecked"></td>
<td>{{t.firstName}} {{t.lastName}}</td>
</tr>
I would like a click on the row to toggle the checkbox value in that row. I tried the above, but it does not work. Thoughts?
Try this:
ng-click="t.isChecked = !t.isChecked"
Exclamation sign should go in front of t.isChecked.
Also make sure you stop propagation of the click event on the checkbox itself, otherwise clicking on the checkbox will not allow you to check/uncheck anything.
<input type="checkbox" ng-model="t.isChecked" ng-click="$event.stopPropagation()">
Demo: http://plnkr.co/edit/KJziWDmlN2gTbthOF4yJ?p=preview
I'm using Angular.js 1.2 and I'm trying to use a Select input in the cell of an ngTable. The Option list populates but the ngModel directive doesn't seem to select the item for display.
This is what my table looks like at the moment:
<table class="col-xs-12 table" data-ng-table>
<tr data-ng-repeat="task in template.tasks">
<td data-title="'Category'">
<select class="form-control template-task-category" data-ng-model="task.categoryId" data-ng-options="category.description for category in taskCategories track by category.id"></select>
</td>
<td data-title="'Description'">
<input class="form-control template-task-description center-block" data-ng-model="task.description"/>
</td>
<td data-title="'Default Role'">
<select class="form-control" data-ng-model="task.defaultRoleId" data-ng-options="role.Name for role in roles track by role.id"></select>
</td>
<td data-title="'Est. Hours'">
<input class="form-control template-task-hours center-block" data-ng-model="task.estimatedHours"/></td>
<td data-title="'Order'"><input class="form-control template-task-sort center-block" data-ng-model="task.sortOrder"/>
</td>
<td data-title="'Remove'">
</td>
</tr>
</table>
The Category and Default Role columns always show as un-selected dropdowns, and when I display the task.categoryId and task.defaultRoleId directly they do have values that are part of the Options list. Is there something more I need to do here?
Edit
Here's an example. What I was expecting was for the dropdowns to have the associated value selected. http://plnkr.co/edit/9DkSQT?p=preview
I figured it out. The ng-model needed to point at a full instance of the associated object and not just the property that held the id. In my class I had both an Id field (that mimicked the database table) and the associated instance. Binding to the instance (task.taskCategory instead of task.categoryId) fixed it.
I created a popup box using jQuery. The popup box contains a button named submit.
1.In a table <td>, there are two buttons "Add the name" and "Add from list". When the user clicks "Add the name", a popup box will open and get the input from the user (namely text data).
2.After entering the text data in the popup box, they should press the submit button. On clicking submit, the input text entered by the user is displayed in a <div id="dynamic"></div> in a <td>. (See HTML below).
3.In the HTML below, the second <tr>: in a separate I put some text, i.first Aid notes with a check box ii.sent to sick bay with a check box iii.ambulance with a checkbox.
4.When the user clicks the submit button, the text data is displayed in the name <td> cell (See HTML below). But what I want is at the same time the above mentioned check box with label should bind in their respective <td>s in a table dynamically (See HTML below, I placed it in individual <td> (i.e when the user clicks the submit button the check box also should display, this should happen at every click on submit).
I don't know how to perform using Javascript or jQuery. Can any one please come up with code.
<table width="100%" cellpadding="0" cellspacing="0" id="rounded_border">
<tr>
<td colspan="4"><p><em>Please record the name</em></p></td>
</tr>
<tr>
<td><strong>Involved</strong></td>
<td><button>Add a name</button></td>
<td><p align=center>or</p></td>
<td>Add from list</td>
</tr>
<tr id="list" class="ir-shade"><div id="dynamic">
<td><span class="delete_icon">x</span>Atil</td>
<td>
<input id="firstaid" onclick="addtreatment();" type="checkbox"/>
FirstAid needed
</td>
<td>
<input class="sickbay" onclick="addtreatment();" type="checkbox"/>
Sent to Sick bay
</td>
<td>
<input class="ambulance" onclick="addtreatment();" type="checkbox"/>
Ambulance
</td>
</div>
</tr>
</table>
sample fiddle
This is what i required as ouptup,but it is displayed as in a single <td>,i want it to be happen that eack check box and their respective label in individual <td>.
How to do with jquery/javascript. Thanks.
That would be in your 'addtreatment' function, what code do you currently have there?