Show/Hide child table(html) on selection radio button in master table - html

I have requirement where on selecting radio button in the main table a child table has to appear below. Any help?
Thanks for the reply, this is my actual requirement.I have two tables Item attributes and Item attributes values. Onclicking Item attributes (i.e)e.g: ticket height checkbox the child table of ticket height should display. Like wise there will be 10 item attributes and its respective item attribute values. So on clicking each item attribute the child attr value table should display.

Add an id to the child table.
<table id=`childTable`>
...
</table>
Add an onclick handler to the radio button
<input type="radio" name="radShowChild" onclick=showHideChild()>
Add a javascript function to do the hiding
function showHideChild()
{
document.getElementById("childTable").style.visibility = "visible" ? "hidden" : "visible";
}
If you want to display specific "child" tables based on the radio button selected, pass the child table id as a parameter to the showHideChild() function.

Related

How to perform some actions based on the position of a div section in a html page in Angular using getBoundingClientRect()

I have a apply button in a filter bar with several filters , sometimes this apply button will display in the next row instead of showing it in the same row with the other filters. How can I perform a set of actions based on the position of this apply button. If the apply button is in the next row I want to do set of actions.
<button (click)="apply() "
[ngClass]="{'a-btn--disabled': isDisable}" id="apply"
mat-raised-button >Apply
</button>
In component i am using getBoundingClientRect(),
const height = document.getElementById('apply').getBoundingClientRect();
console.log(height);
I am trying to get getBoundingClientRect() value from top in order to identify it in the first row or the second row. But getBoundingClientRect().top returns different values at different times. Therefore can't apply a specific condition based on these getBoundingClientRect() value to identify it in the first row or second row. How can i solve this?
you can just define an element like span above the button, and replace id attribute from button to span.
then you can getBoundingClientRect() from span and it does not change at all.
<span id=apply></span>
<button (click)="apply() "
[ngClass]="{'a-btn--disabled': isDisable}"
mat-raised-button >Apply
</button>

How can i locate/ code in selenium to identify different radio button which belong to same class ,<span> html tag and has no unique identifier?

I am working with automation of the Standard Cases Object in salesforce app. There are different types of cases corresponding to each radio group.
there is no unique identifier for the same. How can i locate the radio button?
I cannot use the (.contain()) attribute as there is no label connected to radio button tag.
both of the span tags below belong to same tag.
and there are different radio buttons in the div tag.
(this is radio button)
Label
(this is the radio button label)
If all elements have same locators (for multiple matches) we could use findElements method to get all the matches and as we get list of WebElement as return type then can access the required one using index.
List<WebElement> elementList=driver.findElements(By.xpath("locator"));
Once we have the list we could use index or could apply other iteration techniques in list as per our requirement to access the webelement.
WebElement firstElement=elementList.index(0);
element.click();

XPath, how to select a "checkbox" that is a child to an element with a custom content

I have a task that requires using some XPath, the site is http://todolistme.net/
So, I need to select a checkbox: //input[contains(#type, 'checkbox')]
But before that, I need to add a custom item by typing it into the field and pressing enter, so it appears in a list of "todos". i.e. let's enter "customToDo".
So now I need to select the only one checkbox //input[contains(#type, 'checkbox')] which is a child of an //ul[contains(#id, 'mytodos')] and contains my custom list item //span[contains(text(), 'customToDo')].
How can I do that?
Get locator of li that contains text - and select it's input:
//li[./span[contains(text(), 'customToDo')]]/input

How to set focus to textbox without using an id to specify which textbox

I have this html
<div>
<input />
<span ondblclick="setFocusToInput()">42</span>
</div>
In setFocusToInput() method, how do I set the focus to the input?
This sample is highly simplified. The actual html is a treeview. The treeview can have the above repeated many times. Thus I cannot use an id on the div, the input, or the span.
The only reference I actually have is the event which is generated by the ondblclick event. The only thing which is certain is that the textbox which comes directly before the span is the one associated with the span.
What is happening in the treeview is that the user doubleclicks the span (which is the treeview text) and the treeview then unhides the textbox so the user can edit the value.
I need to be able to set focus to this textbox.
You can modify your setFocusToInput function to take one parameter and call it by passing this as the parameter
<div>
<input />
<span ondblclick="setFocusToInput(this)">42</span>
</div>
Then in the function you get the parent node and find the first input field
function setFocusToInput(htmlNode)
{
htmlNode.parentNode.getElementsByTagName("input")[0].focus();
}

auto-check radio-button using struts

I have a jsp page with two radio tags.
The page contains a struts2 form. When I submit the form one of two radio must be automatically checked.
Is it possible to do that?
One of the features of a radio input is that an item in a radio set once selected cannot be deselected except by another member of the set being selected (unlike a checkbox "set"). i.e. if you initialise the page with a selection you can guarantee you will have a value. Does a default value exist you can do this for? Then you can just set checked="checked" on that item.
Alternatively you'll just have to add another validation rule in JS and/or the server side.
I believe that with:
<html:radio property="foo" value="yes"/>
this radio tag will show selected (by default) if the method getFoo() of the form-bean returns the string "yes".
May be you can use that to link your form submit to your radio tags ?