I'm using uib-datepicker-popup fairly heavily in my application. It has worked perfectly until this specific instance.
I am using it exactly the same as I have in every other instance of my application, but it only half works.
The "Today", "Clear" and "Done" buttons in the bottom bar work as expected (hitting "today" puts the date in the input and hides the calendar, "clear" clears the input and hides the calendar, "done" hides the calendar).
However, when I select any date/day on the calendar it highlights it, but the date does not populate in the input and the calendar remains open.
Here's my html:
<input type="text" class="form-control" name="convert_date" uib-datepicker-popup="M/d/yyyy" ng-model="vm.case.convert_date" ng-disabled="!vm.isActive" placeholder="m/d/yyyy" is-open="open" ng-click="open = true" ng-focus="open = true" show-weeks="false">
Any ideas why the date buttons won't populate the input?
ngModelOptions was the culprit here. I had it set for the entire view in this area of my application as follows:
ng-model-options="{ updateOn: 'blur click', debounce: {'blur': 0, 'click': 0} }"
This prevented the day/date buttons from being able to fire their events and populate the input and hide the calendar.
I resolved my problem by adding another instance of ngModelOptions directly as an attribute to my uib-datepicker-popup element like so:
<input ng-model-options="{ updateOn: 'default' }" name="convert_date" uib-datepicker-popup="M/d/yyyy" type="text" class="form-control" ng-model="vm.case.convert_date" ng-disabled="!vm.isActive" placeholder="m/d/yyyy" is-open="open" ng-click="open = true" ng-focus="open = true" show-weeks="false">
This reset the model behavior to the default settings, so that the datepicker could function properly again.
Related
I am working on an application for disabled people in which NVDA screen reader is supposed to read out the current date if the user hit on element(date picker/calendar/cleave) with tab. When Navigating from top to bottom of page NVDA is ignoring aria=current="date" ( doesn't reads out as current date), but reads out the same date when navigating from b0ttom-top of the page.
reference of code snippet:
<tag
attribute1
attribute2
aria-current="date"
>
<input /calendar (could be calendar in place of input)
attribute1
type="date"
aria-current="date"
attribute2
more attributes
>
</tag>
aria-current is supposed to tell you which element within a set of elements is the current one. It has various values with the most common one being "true".
I just tried the various values with NVDA on both Firefox and Chrome and they all seemed to work.
<button>foo</button>
<button aria-current="true">foo</button>
<button aria-current="page">foo</button>
<button aria-current="step">foo</button>
<button aria-current="location">foo</button>
<button aria-current="date">foo</button>
<button aria-current="time">foo</button>
The results from NVDA were:
"foo button"
"foo button, current"
"foo button, current page"
"foo button, current step"
"foo button, current location"
"foo button, current date"
"foo button, current time"
i m trying to set the checkbox on a radio control with the .set? option. it returns false but I'm unable to set the checkbox.
<div class="">
<input name="radiostorage" id="zrs" value="2" type="radio">
<label for="zrs">Zone-redundant storage (ZRS)</label>
</div>
have tried with label(for: 'zrs').set .click .parent.click .parent.set, also directly trying to click on the input , but nothing happens, any clue on that
TIA
Given the way that the radio button is implemented, it will not be considered visible. You will get an exception trying to set it directly:
browser.radio(id: 'zrs').set
#=> element located, but timed out after 2 seconds, waiting for #<Watir::Radio: located: true; {:id=>"zrs", :tag_name=>"input", :type=>"radio"}> to be present (Watir::Exception::UnknownObjectException)
Instead of setting it directly, you can click its associated label, which is what an actual user would do:
browser = Watir::Browser.new
browser.goto('https://pricing-calculator.bluekiri.cloud/')
p browser.radio(id: 'zrs').set?
#=> false
browser.label(for: 'zrs').click
p browser.radio(id: 'zrs').set?
#=> true
How about
radio = browser.radio(id: 'zrs')
radio.set? #=> false
radio.set
radio.set? #=> true
See http://www.rubydoc.info/gems/watir-webdriver/Watir/Radio
Finding the text of a label using Capybara
Background: I have a KBA page and a set of question and answers, the answers are in the form of 5 possible answers using radio buttons. So I need to cycle through each label for each radio button to match up with valid answers in a yaml file.
HTML:
<div class="questions"></div>
<div class="answers"></div>
<p>
<label>
<input id="answers_question_0_1" type="radio" checked="checked" value="1" name="answers[question_0]"></input>
RADIO BUTTON TEXT 1
</label>
</p>
<p></p> #another radio button and label text 2
<p></p> #another radio button and label text 3
<p></p> #another radio button and label text 4
<p></p> #another radio button and label text 5
My test code:
def answer_questions
.
.
.
i=0
def answers
page.all('.answers')
end
#This is accessing the answer value from the selected correct question from the kba.yml file
valid_answers = this variable contains the valid answer to the question
#********THIS IS THE PROBLEM BLOCK*****************************
#Set the radio buttons if they match one of the answers
#correct_answer = answers[i].all(:radio_button).find do |radio|
valid_answers.include?(radio.parent.text)
end
#********THIS IS THE PROBLEM BLOCK*****************************
i +=1
unless #correct_answer
p "Unable to answer question: #{question_text}" and next
end
#correct_answer.select
end
The problem lies in the "problem block" noted in the above code snippet. I can't figure out how to get the text that is tied to one label/p tag per radio button, instead ALL radio button's text are returned and checked against the variable "valid_answers" and that always fails.
I basically want radio.button.text to equal "RADIO BUTTON TEXT 1" for it's respective radio button. But instead radio.button.text returns:
RADIO BUTTON TEXT 1 RADION BUTTON TEXT 2 RADIO BUTTON TEXT 3 etc.
I'm guessing it shouldn't be radio.parent.text but something else, which I'm not sure.
It looks like you're making this more complicated than it needs to be - you should just be able to do
answers[i].choose("the text of the radio button you want to select")
You can catch an exception if the value isn't found and output your warning there.
Note: parent in a Capybara element is not the HTML parent of that element - it's the element that a finder was called on when locating the given element - so in your case it's the .answers element. If you do want access to the nodes actual HTML parent element you can call element.find(:xpath, '..')
I created a simple Jquery slider:
<div id="slider"></div>
and attach one text input field to the slider handler by using Javascript:
$( "#slider" ).slider();
var value = "<input id='handler1InputValue' type = 'text' spellcheck = 'false' style='position:absolute;width:70px;height:15px;text-align:center;left:-2px;font-size:10px;display:block;' ></input>";
$( ".ui-slider-handle" ).html(value);
$( ".ui-slider-handle" ).unbind();
$( "#handler1InputValue" ).val(77777);
But in Firefox, the cursor does not follow mouse click in the text input field, mouse selection doesn't work as well, while everything works in Chrome side.
Anybody know how to solve the problem in Firefox side? And you can try the test sample here: slider with text input field
We're using the Html.DropDownList and other controls in various MVC3 user data entry forms.
When a user is editing a records data values and they haven't specified values for a DropDownList then the optionLabel text of 'Select One' is displayed in the input field.
We'd like to make it more obvious to the end-user when they're viewing a screen of data that 'Select One' isn't a data value by showing it in a different font colour (blue ?) and in italics.
Has anyone any ideas how to simply achieve this ?
If the DropDownList is required... just mark that field as requiered using the somehow standard red "(*)". If the user submit the form, the client side validation will display the message telling the user that this field is required.
The level of customization of the <select> HTML element is pretty limited. IIRC you could change the color but I am not sure that you can show it in italics:
#Html.DropDownListFor(
x => x.Foo,
Model.Foos,
"-- select a foo --",
new { #class = "foo" }
)
and then in your CSS file define the .foo rule:
.foo option:first-child {
color: red;
}
If you want more customizations of the look and feel of the standard <select> element you might take a look at some of the available jQuery plugins.