I have a datatable initialized as
$("#grid").dataTable();
I have a form tag for the entire datatable as
<form name="adddetails" id="adddetails" method="POST">
<table id="grid" class="table table-striped table-bordered table-hover" cellspacing="0" width="30%">
<thead>
<tr>
<th>S.No.</th>
<th>No. Of Jobs</th>
<th>Earliest Start Date</th>
</tr>
</thead>
<tbody class="tbodyy">
//there will be more than 30 records in my loop which i use to print in tbody. a ex of that is below.
<tr>
<td style="vertical-align: middle;">1</td>
<td style="vertical-align: middle;"><input type="text" name="job" id="job"></td>
<td style="vertical-align: middle;"><input type="text" name="job" class="datepicker" id="datepicker"></td>
</tr>
</tbody>
</table>
</form>
There are 2 problems i face here.
When i submit the form, only those text box values in page 1 of the grid is getting submitted. Skips all data from page 2
Date picker works for page 1 of the grid only. It doesn work from page 2.
I tried searching about this, but couldn find a solution.
Related
In below html code when i focus on any button. All 3 button are read instead of just focused one.
<table>
<tr>
<th >Column 1</th>
<th >Column2</th>
<th >
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</th>
</tr>
<tr>
<td>Row1</td>
<td>Row2</td>
<td>Row3
<div>
<button>Button1</button>
<button>Button2</button>
<button>Button3</button>
</div>
</td>
</tr>
</table>
Is this JAWS issue. or am i missing something in my code.
I'm using Angular-datatables and when I define the table using the angular renderer I can see nice arrows for sorting column.
<table class="dataTable row-border hover" datatable="ng" dt options="vm.dtOptions">
<thead>
<tr>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">My header</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ex in ::vm.exes">
<td>{{ex.myValue}}</td>
</tr>
</tbody>
</table>
When I define the columns with DTColumnBuilder.newColumn the arrows are missing (sorting works).
<table datatable="" dt-options="vm.dtOptions" dt-columns="vm.dtColumns"
class="dataTable row-border hover"
dt-disable-deep-watchers="true"
dt-instance="vm.dtInstanceCallback">
</table>
and
vm.dtColumns = [
DTColumnBuilder.newColumn('myValue').withTitle('My header'),
Can I bring the sorting arrows back?
I need to select radion button with id="optProfile" in 7th tr using text "Internet Users" in td/font tag. I am using below code but it is not working and selecting radio button from 1st tr row. Can anyone help
<html>
<head>
<body onmousedown="infCheckMouseDown(event);" onkeydown="infCheckDownKey(event);" onbeforeunload="INFIEExit();" onload="INFsetInitialFocus();window_onload();CreateScriptingFrames();">
<form action="PEINFCommon.ASP?WCI=Genericcreen&WCE=GenericEvent" onsubmit="return false" name="Genericcreen" method="post">
<table class="TopLevelTable" align="center" width="100%" border="0">
<tbody>
<tr>
<td width="100%">
<table width="100%" border="0">
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<td width="100%">
<div align="center">
<center>
<table width="98%" cellspacing="0" cellpadding="0" border="0" cols="1">
<tbody>
<tr align="center">
<td align="left">
<table width="100%">
<tbody>
<tr>
<tr>
<tr>
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<tr height="">
<td width="5%">
<input id="optProfile" type="Radio" callfunction="" value="" onblur="ResetScript(this);return true;" onfocus="HighlightScript(this);" onclick="" name="" size="11">
<font class="fLabel"></font>
<br>
<input id="hidCurrentProfile" type="hidden" onblur="ResetScript(this);" onfocus="HighlightScript(this);" value="N" callfunction="" size="11" name="/Root/ACORD/InsuranceSvcRs/nk_ck_com.cc_FetchUserProfileRs/nk_ck_com.cc_SecurityDetails/nk_ck_com.cc_AvailableProfile[12]/nk_ck_com.cc_CurrentProfileInd">
<input id="hidProfile" type="hidden" onblur="ResetScript(this);" onfocus="HighlightScript(this);" value="RACINTER" callfunction="" size="11" name="/Root/ACORD/InsuranceSvcRs/nk_ck_com.cc_FetchUserProfileRs/nk_ck_com.cc_SecurityDetails/nk_ck_com.cc_AvailableProfile[12]/nk_ck_com.cc_ProfileCd">
</td>
<td>
<font class="">Internet Users</font>
</td>
</tr>
<tr height="">
<tr height="">
<tr height="">
<tr>
<tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</td>
</tr>
<tr>
<tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
</frame>
<frame id="Script" scrolling="Yes" frameborder="0" noresize="">
</frameset>
</html>
you need to use ancestor instead of preceding:
//font[text()='Internet Users']/ancestor::tr[1]/td/input[#type='Radio']
and it's also a better practice to tell which one of the tr-ancestors you want -> [1] - since you want the first direct ancestor
Is there a reason why you are not using the id of the radio button?
WebElement wElement = wDriver.findElement(By.Id("optProfile"));
You can use the following XPath
//tr[.//font[text()='Internet Users']]//input[#id='optProfile']
This xpath looks for the tr containing the font tag with text "Internet Users" and then navigates to the input tag with id = 'optProfile'
You can use preceding as below-
By.xpath("//font[contains(text(),'Internet Users')]/preceding::input[#id='optProfile']")
Thanks everyone here for your help. I really appreciate it.Its working with below code
WebElement trs = GlobalVar.wDriver.findElement(By.xpath("//font[text()='Internet Users']/ancestor::tr[1]"));
trs.findElement(By.id("optProfile")).click();
I would try something like this
List<WebElement> trs = driver.findElements(By.cssSelector("table > tr"));
for (WebElement tr : trs)
{
List<WebElement> fonts = tr.findElements(By.tagName("font"));
if (!fonts.isEmpty() && fonts.get(0).getText().trim().equals("Internet Users"))
{
tr.findElement(By.id("optProfile")).click();
break;
}
}
You didn't show the TABLE tag in the HTML snippet so you will likely need to be more specific in the initial CSS selector. Basically this code loops through the TRs looking for "Internet Users" in the FONT tag. Once it finds it, it click the radio button with id=optProfile.
If you will post the TABLE tag in the HTML snippet I can help with the CSS selector.
Edit 1: changed the code to address the case where some TRs don't contain FONT tags.
I have put together a Bootply demonstration here: http://www.bootply.com/Ss2aAnzqlZ.
It's a panel with a table as per http://getbootstrap.com/components/#panels-tables. However, I've also made the panel collapsible. The collapsing bit works OK, but the table itself doesn't retain shape. As you'll see in the Bootply, it doesn't fill the width of the panel when you first load the page. When you click "Improvements" in the panel header to collapse the panel, the table takes up the full panel width during the animation, then disappears. When you click again to show the panel content, the table is the full width until the animation stops, at which point, it shrinks back to what looks like an "auto" width.
Oddly enough, inspecting the table element shows that the table itself is full width, but the thead, tbody and tfoot aren't.
I've sort of tracked it down to the presence of the "collapse" class in the table. If you start the Bootply without the "collapse" class, it's full width until you collapse the panel. When you expand it, it goes back to auto width. I don't know why ... do you?
Here's the snippet, but the collapsing doesn't appear to run here. The Bootply is better.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div style="margin:15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<table id="improvementsPanel" class="table panel-collapse collapse in" aria-expanded="true" style="">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>
The collapse class toggles the display style on the table between none and block and this appears to be interfering with the standard table CSS.
You can resolve this by putting your table inside a div and setting that div to collapse rather than the table.
New Bootply: http://www.bootply.com/L8h2OdpMuD
HTML:
<div style="margin: 15px">
<div class="panel panel-default">
<div class="panel-heading">
Improvements
</div>
<div id="improvementsPanel" class="panel-collapse collapse in" aria-expanded="true">
<table class="table">
<thead>
<tr>
<th>Description</th>
<th class="text-right">Qty</th>
<th>UOM</th>
<th class="text-right">Rate</th>
<th class="text-right">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td class="text-right">133.00</td>
<td>m²</td>
<td class="text-right">425.00</td>
<td class="text-right">56,525</td>
</tr>
<tr>
<td>Item 2</td>
<td class="text-right">85.00</td>
<td>m²</td>
<td class="text-right">70.00</td>
<td class="text-right">5,950</td>
</tr>
<tr>
<td>Item 3</td>
<td class="text-right">25.00</td>
<td>m²</td>
<td class="text-right">100.00</td>
<td class="text-right">2,500</td>
</tr>
<tr>
<td>Item 4</td>
<td class="text-right"></td>
<td></td>
<td class="text-right"></td>
<td class="text-right">1,500</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="text-right" colspan="4">Total</th>
<th class="text-right">66,475</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
Alternatively, you can add the css:
table.collapse.in {
display: table;
}
Arguably this could be a patch to component-animations.less.
Using Selenium IDE, I'm able to fill an input field (using "type" command), but when I "save" the value, this value is lost. Doing the same by hand, everything works fine.
Any hint to solve this issue? I've already tried using typeKeys command.
The code inside the target page is:
<!-- language-all: lang-html -->
<div id="editDiv" class="editDialog">
<table cellspacing="0" width="100%">
<tbody>
<tr>
<td width="25%" style="">period</td>
<td align="right" width="25%" style="padding: 6px;">
<input id="period" type="text" onblur="changeValue(this.id, this.value, undefined)">
<br>
<label>da 0 a 9</label>
</td>
</tr>
</tbody>
</table>
<table cellspacing="0" width="100%">
<input type="button" value="Save" onclick="applyChanges()">
<input type="button" value="Cancel" onclick="removeEditDialog(false)">
</div>
To help more on this issue:
function changeValue(id, value, paramPos) {
var par = tempGlobalParams[id] ? tempGlobalParams[id] : tempGlobalPaintingsParams[paramPos][id];
if(checkRules(id, value, paramPos)){
par.custom = value;
}