I've added kendo-grid like this:
https://www.telerik.com/kendo-vue-ui/components/grid/selection/#toc-checkbox-selection
But when I investigate my source code under console I don't see tags "id" and "for"
<td role="gridcell">
<input class="k-checkbox" data-role="checkbox" aria-label="Select row" aria-checked="false" type="checkbox">
<label class="k-checkbox-label k-no-text"></label>
</td>
Related
I've 3 rows in my table and I want to select a check box that contains text 1024.0281. I can find text contains part number like this
xpath=//a[text()='1024.0281']
But I don't know how to select checkbox in that line, How to do that?
I'm trying to do this in Selenium IDE.
Thank you in advance!
<tbody>
<tr class="odd">
<td><input class=RightText name='DHR' type='checkbox' id='Chk_DHR0' value='1^310^0^^^^' onClick=javascript:fnCalcDHRAmt( 'Chk_DHR0',this.form) tabindex="8"><input type=hidden name='hDHRID0' value='GM-DHR-200789551'> <input type=hidden name='hVID0' value='334'> <input type='hidden' value='0' name='hDHRAmtGMDHR200789551'></td>
<td>PS-1876546</td>
<td><a title="7.5mm REVERE HA Monoaxial Screw, 27mm">1024.0131</a></td>
</tr>
<tr class="even">
<td><input class=RightText name='DHR' type='checkbox' id='Chk_DHR1' value='1^465^0^^^^' onClick=javascript:fnCalcDHRAmt( 'Chk_DHR1',this.form) tabindex="9"><input type=hidden name='hDHRID1' value='GM-DHR-200789552'> <input type=hidden name='hVID1' value='334'> <input type='hidden' value='0' name='hDHRAmtGMDHR200789552'></td>
<td>PS-1876546</td>
<td><a title="8.5mm REVERE HA Monoaxial Screw, 25mm">1024.0281</a></td>
</tr>
<tr class="odd">
<td><input class=RightText name='DHR' type='checkbox' id='Chk_DHR2' value='1^1000^0^^^^' onClick=javascript:fnCalcDHRAmt( 'Chk_DHR2',this.form) tabindex="10"><input type=hidden name='hDHRID2' value='GM-DHR-200789553'> <input type=hidden name='hVID2' value='334'> <input type='hidden' value='0' name='hDHRAmtGMDHR200789553'></td>
<td>PS-1876546</td>
<td><a title="REVERE 4.5 Thoracic Lamina Hook, Narrow, Medium">1041.9902</a></td>
</tr>
</tbody>
Use the following xpath which will select the tr based on anchor text and then find the input checkbox.
//tr[.//a[text()='1024.0281']]//input[#class='RightText']
Or use preceding
//a[text()='1024.0281']/preceding::input[#name='DHR'][1]
I have been trying to click on the one particular checkbox, but all the checkboxes have the same tags and parameters inside. Only the text which is the name of the check box is varying, but unfortunately couldn't get that also to be used. Kindly do help me with this.
Html code:
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox1 name
<br/>
</td>
</tr>
<!-- end ngRepeat: group in groupsList | orderBy:'groupName' -->
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox2 name
<br/>
</td>
</tr>
<!-- end ngRepeat: group in groupsList | orderBy:'groupName' -->
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox3 name
<br/>
</td>
</tr>
<!-- end ngRepeat: group in groupsList | orderBy:'groupName' -->
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox4 name
Answers would be very much helpful and appreciated.
The xpaths I have tried:
//table/tbody/tr/td/input/following-sibling::text()
this is highlighting all the texts i.e names of checkboxes
//table/tbody/tr/td/input/following-sibling::br/preceding::text()='Checkbox name'
//table/tbody/tr/td/input/text()\[preceding::br and contains(../text(),'Checkbox name')\][1]
You should try using following xPath to select checkbox which is based on visible text :-
//td[contains(., 'Checkbox1 name')]/input
As you mentioned in the question, your purpose is to click on the checkbox.
You can select the input tag with the exact text:
//input[.="Checkbox1 name"]
or if you think there could be some extra spaces or text around the text, then you can use contains function:
//input[contains(., "Checkbox1 name")]
Also you can select by index:
element(by.tagName('table')).all(by.tagName('input')).get(INDEX).click();
Check this - protractor allows to search byCssContaining text -
http://www.protractortest.org/#/api?view=ProtractorBy.prototype.cssContainingText
It might be better than xPath.
Here is for your question:
function clickCheckboxByName (name) {
var checkbox = element(by.cssContainingText("input[type='checkbox']", name));
checkbox.click();
}
I'm adding <input> fields in form using jquery html() on click event.
$('#container').html('<input type="text" name="ce" value="some" >');
after submitting php POST i'm unable to see index ce with print_r($_POST);
is there any special method to add elements to dom for this ? please advise.
Solved ! Thanks for answering. in my scenario even with append it didn't work. now it's done with my previous code using html(). Problem was wrapping the <form>. my table is large i'm only pointing out the problem. my structure was suppose to like:
<table>
<tr>
<form id="myform">
<td><input type="text" name="name" ></td>
<td>
<div id="container">
<!-- dynamically generated inside this div against it's id (which didn't work) -->
<input type="text" name="ce" >
</div>
</td>
</form>
</tr>
</table>
i simply Put the entire table into the 'form' tags
<form id="myform">
<table>
<tr>
<td><input type="text" name="name" ></td>
<td>
<div id="container">
<input type="text" name="ce" > <!-- dynamically generated inside div (works!) -->
</div>
</td>
</tr>
</table>
</form>
it worked perfectly with both append() and html(). hope will be helpful for someone.
When you do $('#container').html you are not adding a new input, you are replacing all your content with this new input..
try $('#container').append tag
Look at this example -> https://jsfiddle.net/660a3t1g/
$('#myInputs').append('<input type="text" placeholder="LastName: " name="some" >');
I have a dom structure like this
<tr class="">
<td class="labelCol requiredInput">
<label for="name_lastacc2" class="">
<span class="requiredMark">*</span>
Last Name</label>
</td>
<td class="dataCol col02">
<div class="requiredInput">
<div class="requiredBlock"></div>
<input id="name_lastacc2" maxlength="80" name="name_lastacc2" size="20" tabindex="3" type="text"></div>
</td>
<td class="labelCol">
<label for="00NG0000008Rybp">Business Ext.</label>
</td>
<td class="dataCol">
<input id="00NG0000008Rybp" maxlength="10" name="00NG0000008Rybp" size="20" tabindex="22" type="text"></td>
</tr>
I am trying to find the input box next to its label.
Eg:
Last Name: ________________
I have tried using xpath queries like
//label[contains(text(),'Last Name']/../following-sibling::*/div/input[#type='text']
but i get an [INVALID XPATH EXPRESSION] error. Where am i going wrong ?
Your path expression is missing the closing bracket of contains().
//label[contains(text(),'Last Name')]/../following-sibling::*/div/input[#type='text']
But that said, I do not think your path expression is correct now. Your expression will match any following sibling of the parent of label[contains(text(),'Last Name')]. What you want it to find is the input element that immediately follows.
The only reason your original expression only finds one input element is that the second one is nested inside one more div. But I do not think you should rely on that.
Instead, try:
//label[contains(.,'Last Name')]/following::input[1]
Then, the result is
<input id="name_lastacc2" maxlength="80" name="name_lastacc2" size="20" tabindex="3" type="text"/>
Well I have to implement something as follows:
I need to display a list of Contact IDs of all the contacts I have in my model.
<ul>
#for (int i = 0; i < Model.Contacts.ToList().Count; i++)
{
<li><a onclick="showContactInfoDialog(#Model.Contacts.ToList()[i].ContactId)">Model.Contacts.ToList()[i].ContactId</a></li>
}
</ul>
Each list element will be clickable, upon clicking which, a dialog will popup.
function showContactInfoDialog(id) {
document.getElementById('contact-dialog').style.display = 'block';
}
The dialog should show that particular contact's First Name, Last Name, Title, Email.
<div id="contact-dialog">
<form action="Contact/SaveContactEdits" method="post">
<table>
<tr>
<td>First Name</td>
<td>
<input type="text" name="FName"value="#Model.Contacts.ToList()[id].FirstName" /></td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input type="text" name="LName" value="#Model.Contacts.ToList()[id].LastName" /></td>
</tr>
<tr>
<td>Title</td>
<td>
<input type="text" name="Title" value="#Model.Contacts.ToList()[id].Title" /></td>
</tr>
<tr>
<td>Email Address</td>
<td>
<input type="text" name="Email" value="#Model.Contacts.ToList()[id].Email" /></td>
</tr>
</table>
<input type="submit" value="Save"/>
</form>
</div>
The dialog should let user make edits to the contact's details.
How do I do this? I'm having problem in passing the 'id' parameter to the dialog box element.
<div id="contact-dialog">
I'm having problem in passing the 'id' parameter to the dialog box
element.
The way you are using the id is not correct as you use it like the following. In the given code below (taken from your code) you are using the id as the index and that won't work most of the time especially if the ids does not start with 0.
Model.Contacts.ToList()[id]
That also won't work because the onclick event happens on the client side where the model is no longer available. So what you can do, since calling another controller method is not an option is to write all the details in a hidden field. Put them on a single container, for example one div per contact, the assign the id of the contact to the div. When the a tag is clicked, you read the values from the div and assign them to the form. All of this can be handled easier with tools like knockout, but if using it is not an option then here's the code that will do the trick.
// in your loop do this
// btw, it would be better if you Contacts object is an IList so you can do indexing easier
<li><a onclick="showContactInfoDialog(#Model.Contacts.ToList()[i].ContactId)">Model.Contacts.ToList()[i].ContactId</a>
<div id="#("contactrow"+Model.Contacts.ToList()[i].ContactId)">
#Html.HiddenFor(m=>Model.Contacts.ToList()[i].FirstName)
// do the same for the rest of the fields you want to show on the dialog
</div>
</li>
before you show the dialog, copy the contents to the form:
function showContactInfoDialog(id) {
// we are targetting this -> <input type="text" name="FName"
// assign an id (fname) for optimal performance
var container = $("#contactrow"+id);
$("#fname").val(container.find('#FirstName').val());
// do the same for the rest of the fields
document.getElementById('contact-dialog')
.style.display = 'block';
}