I am using indexed_property to handle a radio button which has values Yes and No.
indexed_property(:additional_info,
[
[:radio_button, :to_registered, {:name => 'rad_Registered%s'}],
])
case mychoice.upcase.strip
when "YES","Y","T","TRUE"
additional_info[cnt].select_to_registered # To select Yes ; cnt is the counter
when "NO","N","F","FALSE"
additional_info[cnt].clear_to_registered # To select No
end
While it selected the radio button using select_, I am NOT able to use the clear using clear_
What am I doing wrong? I am getting NoMethodError: undefined method clear' for #<Watir::Radio:0x5f3f190d>
Problem
With a basic HTML page, a user does not have the ability to directly clear a radio button. If the user clicks a radio button that is already selected, it does nothing (ie does not un-select it). The only way to clear the radio button is to select a different radio button of the same set.
I assume it is for this reason that Watir-Webdriver removed support for the Radio#clear method - see the commit from 2010. The removal of the method of course leads to the exception you see.
Note that the exception you are seeing will not occur when using Selenium-Webdriver. However, it does not actually appear to do anything as it just tries to click the radio button again.
Solution - Explicit Clear
If you really do need to clear the radio button, you can get around the normal user behaviour by executing Javascript:
case mychoice.upcase.strip
when "YES","Y","T","TRUE"
additional_info[cnt].select_to_registered
when "NO","N","F","FALSE"
execute_script('arguments[0].checked=false;', additional_info[cnt].to_registered_element)
end
Solution - Implicit Clear
Instead of explicitly clearing a radio button, you can implicitly clear it by selecting a different radio button in the group. From the comments, it sounds like the page has a series of Y/N radio buttons:
<html>
<body>
<input type="radio" name="rad_Registered0" value="Y">
<input type="radio" name="rad_Registered0" value="N">
<input type="radio" name="rad_Registered1" value="Y">
<input type="radio" name="rad_Registered1" value="N">
</body>
</html>
Each set of radio buttons with the same name are like a group. Only one radio button in the group can be selected at a time - ie selecting one radio button will implicitly clear the other radio button.
The page object gem provides a nice way to handle radio button groups through the radio_button_group accessor, which can also be used in indexed properties. For the above page, we can define the page as:
class MyPage
include PageObject
indexed_property(:additional_info, [
[:radio_button_group, :to_registered, {:name => 'rad_Registered%s'}]
])
end
Your case statement for selecting a radio button then simplifies to:
case mychoice.upcase.strip
when "YES","Y","T","TRUE"
additional_info[cnt].select_to_registered('Y')
when "NO","N","F","FALSE"
additional_info[cnt].select_to_registered('N')
end
Related
Assuming the following HTML:
<div *nfFor="let option of options" (click)="option.check = !option.check; selectionChanged.emit(option)">
<input type="radio" [(ngModel)]="option.check" (ngModelChange)="selectionChanged.emit(option)"/>
...additional elements related to input
</div>
I want to prevent the event from being emitted twice when clicked on the div instead of directly on the input. As far as I know the click is only registered once, if clicked directly on the input it'll fire that but if clicked outside of the input but within the div it'll execute the (click) statement.
So anyway the question is wether there will be two emits on selectionChanged when clicked on the div as there's also an ngModelChange on the input element itself. Does ngModelChange recognize changes on the ngModel bound property from outside the element it is attached to and therefore fire?
NOTE: I know the radio button has two event bindings which isn't the right way to go about things in Angular (I think, two chefs in the kitchen?) but that's something i'll fix later if necessary
In my AngularJS project I have an account details page where you can change your personal account information. This page allows for multiple phone numbers and e-mailaddresses to be supplied. Using mouse input (or tabbing to buttons and pressing them with space bar) works perfectly, however I'd like to add the convenience of the enter key pressing the 'logical' buttons.
My form looks like (accidentally forgot to translate a few items):
A simplified version of the HTML for the form can be found on PasteBin, I've mainly removed the directives for managing the lists.
All buttons are <button> elements except for the cancel button which an <a> to the previous page, and the submit button is <button type="submit">.
When selecting any text box and pressing enter, the first (non-disabled) <button> element is 'clicked'. Meaning if I would change the last name, hit enter, the first phone number would be removed.
When you're in a new entry of phone numbers or e-mailaddresses (the row with the green + button) it should click that button, and if it's disabled do nothing.
When you're in any other text box on the form it should hit the save button, and also if the save button's disabled, do nothing.
Both buttons will be disabled based on form validation.
There'd be no trouble in changing the type of a button from button to submit if that'd help.
I would preferably have an all HTML solution, using just semantics, but I doubt that's really possible. So the logical alternative would be to use an AngularJS directive.
Please do not provide a jQuery or plain JavaScript solution relying on IDs or something like that. I don't want to hack my way around AngularJS, rather embrace it.
In the meantime I've worked on a directive that allows me to declare what I've called 'submit scopes'.
In essence you have actions (inputs) and targets (buttons), they're bound through a service by a key you can assign in the template. To avoid keys from clashing and from simple annoying work you can create a submit-scope which will cause it's children to prepend a unique key to the value they're accessing.
Within a submit-scope you can still override an action to use a global key instead by setting the attribute global-submit="true".
Example code:
<div submit-scope>
<input type="text" submit-action />
<button type="button" submit-target>Pressing enter in the above field will click this button.</button>
</div>
You can view the entire source code and a slightly larger example on Plnkr.
I just tried to replace
<button>Cancel</button>
with
<input type="button" value="Cancel">
and it seems to work correctly...
I have a Employee entity that I'm binding to an "Edit" view in an MVC3/Razor application. The Employee entity has a property for OccupationTypeId. OccupationTypeId points to the OccupationType table which contains several lookup values. The natural choice would be to use #Html.DropDownListFor to render a <select> tag containing a list of Occupations.
The OccupationType table schema is fairly standard: Id, Name, Description, IsEnabled. Since OccupationTypes can be disabled, I want the OccupationTypeId drop down to still render disabled options so the user can always see their selection if it's disabled, but a disabled option can't be selected by the user. In other words, a user can't change an existing OccupationTypeId to a disabled option.
I thought about creating a #Html extension method to build my <select> tag with the options and simply tack on a disabled attribute to disabled options. I think that would be straight forward...
However, disabled selected options don't seem to post back to the controller method. In other words, Employee.OccupationTypeId would be null when I post to Edit.
Is there any way to change this behavior or is this built in to MVC 3? I thought about using hidden fields, but what if OccupationTypeId is required and I have validation enabled?
Has anyone else faced this?
Thanks
You could have a hidden field that gets updated when the change event occurs in the dropdown list. This way the OccupationTypeId field is always passed.
<input name='CurrentOccupationId' type='hidden' value='#Model.Employee.OccupationTypeId' />
<script>
$(function() {
$('#dropDownId').change(function() {
$('input[name="CurrentOccupationTypeId"]').val($(this).val());
});
});
</script>
Is there any way to change this behavior or is this built in to MVC 3?
I thought about using hidden fields, but what if OccupationTypeId is
required and I have validation enabled?
It has nothing to do with MVC 3 in particular; all disabled html elements don't post back in general.
The solution I've used is to "simulate" the disable element by styling the appropriate element with CSS. You can, for example, set the element's background (or foreground) color to gray and set the readonly attribute (when it makes sense) instead.
See this similar thread.
I have a form in which there is a reset button and three list box(Select Box) and submit button.
In which i have reset button like.
<s:reset name="reset" type="reset" id="reset" ></s:reset>
when i click on this before submit the page. it will reset the list box means it will select the default value of 'Select' Index = -1 means working fine. but after i submit the page. this will come to the same page with latest records. after that when i click the reset button. it will not give any response to that page. it should be change the default value of list box means "select" but it will select the last value of the list box (The value i selected before save button clicked). i change it to simple Html reset button also but still not get success. can you please help me abt this solution.
Thanks in Adv
Dhrumil Shah
the reset functionality only works in the current page stage (ie., it will reset the page to whatever state the page was in when it was loaded). since http is a stateless protocol it can't remember what was the value of the select box before the page was reloaded or submitted.
you can use javascript (jquery preferably) to accomplish things like this...
$("select").val(-1);// this would reset all combo boxes in the page to value -1
$(":text").val("");// this would reset all textboxes in the page to blank
$("textarea").val("");// this would reset all textarea in the page to blank
you can find more about jquery here.enter link description here
The <s:reset /> will renders as html <input type="reset"...>, of course it will not reset the submitted form.
#Dhrumil Shah
In which i have reset button like.
<s:reset name="reset" type="reset" id="reset" ></s:reset>
when i click on this before submit the page
The type is type of submit to use, valid values are input, button and image, default is input
You should use <s:a> to reset the form (reload the page). e.g.
<s:a><button>Reset</button></s:a>
Or
<s:a cssClass="button-like-css">Reset</s:a>
I have a bunch of optional "write-in" values for a survey I'm working on.
These are basically a radio button with a textbox within the answer field - the idea being that you would toggle the button and write something into the box.
What I'd like to do is have the radio button toggled whenever a user clicks in the text field - this seems like a use-case that makes a lot of sense.
Doing this:
<input type="radio" id="radiobutton"><label for="radiobutton">Other: <input type="text" id="radiobutton_other"></label>
works fine in Chrome (and I am guessing, other WebKit browsers as well), but there are weird selection issues in Firefox, so I'm assuming its a non-standard practice that I should stay away from.
Is there a way to replicate this functionality without using JavaScript? I have an onclick function that will work, but we're trying to make our site usable for people who might have NoScript-type stuff running.
Putting an input inside a label actually has a slightly different meaning. It doesn't make the input itself a label, it implicitly associates the label with the input in the same way as if they were linked by a for/id.
However, this only happens when the label doesn't already have a for attribute to override that (see HTML4 s17.9: “When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.”). It is unclear according to spec what should happen when both containment and for are present.
(And also it doesn't work in IE, which makes the point moot in practical terms.)
No, you'll need some scripting for this.
<input type="radio" id="radiobutton">
<label for="radiobutton_other">Other:</label>
<input type="text" id="radiobutton_other">
<script type="text/javascript">
var other= document.getElementById('radiobutton_other');
other.onchange=other.onkeyup= function() {
if (this.value!=='')
document.getElementById('radiobutton').checked= true;
};
</script>
It (an input inside a label) validates just fine as HTML 4.01. One potential issue I can see with your code is that both radio elements have the same ID in your example. Element IDs must be unique in HTML and XHTML documents and you should use the name attribute instead to identify a radio group.
If you are still having trouble after changing this, you will have to move the input outside of the <label> element and use scripting.