I'm creating a large dynamic form and want to create checkboxes and radio buttons like:
<label><input type="radio" name="myradio"><span class="foo">This is the Label</span></label>
This is for a number of reasons. There's nothing wrong with this as far as HTML spec goes.
But, jquery mobile generates a DOM error for every checkbox or radio button generated this way. It really seems to want:
<input type="radio" name="myradio" id="radio1"><Label for="radio1">...</label>
Any workarounds? Ideas?
This works fine: http://jsbin.com/ofuhaw/228/edit with latest JQM
Maybe you should just swap the order of elements.
Related
I have a bit of an issue, im trying to select a radio button in a data-tables data. Im able to filter the single data-tables row down to one so it's the only one appearing on the page...but i've tried page.choose, page.find(<xpath>), page.find(<css>), i've also tried doing all the previous within a certain css selection and I can't quite figure out what's left to try.
The relevant HTML is here, unfortunately as this is a work item I can't post everything. however I AM able to click on the label if I specify the id via:
find(:xpath, "//label[#for='approve_row_5']").click however this doesn't actually seem to 'select' the radio button. I've also tried doing a wait after I filter the data-table results
anyways, here is the HTML for the 2 radio buttons after the row has been filtered (the radio buttons reside in a column)
<td class=" align-middle">
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_approve" value="person_approve" data-ui-verify-key="test_approve" data-ui-verify-title="2017-07-13 14:59:46 -0400">
<label for="approve_deny_row_5_approve">
<span>Approve</span>
</label>
</div>
<div class="radio">
<input type="radio" name="approve_deny_row_5" id="approve_deny_row_5_deny" value="person_deny" data-ui-verify-key="test_deny" data-ui-verify-title="2017-07-13 14:59:46 -0400" data-ui-verify-url="/irrelevant/stuff">
<label for="approve_deny_row_5_deny">
<span>Deny</span>
</label>
</div>
</td>
I thought about just finding the span by the text and clicking it, which passes....but doesn't actually select the radio button. Also I tried searching by the specific value selector as well via a find('input[value="test_approve"]').click but that had no luck either
Any ideas?
Assuming the actual radio inputs are visible on the page (and not hidden to allow for styling) the methods that should work for this are
choose("Approve")
choose("Deny")
or
choose("approve_deny_row_5_approve")
choose("approve_deny_row_5_deny")
If those tell you they can't find the elements then it's most likely the input elements are actually hidden (for styling reasons) and you should be able to use the
choose('Approve', allow_label_click: true)
which will click on the label element associated with the input rather than the input element. That should produce the same result (setting the radio button) unless the behavior you're looking for is based on JS looking for a click on a very specific element (rather than the change event on the input). If that happens to be the case then you need to figure out exactly what element the JS is looking for clicks on, or fix the JS to behave in a more intuitive manner.
I cannot get Capybara for find a checkbox element.
I've tried all the usual ways:
find_field
check
find
click_on
It's as if the element isn't there. If I select the parent element, and look at it's innerHTML the checkbox is included:
(byebug) all(:css, '.checkbox.form-group').last['innerHTML']
\n <input type=\"checkbox\" id=\"google_agreed_to_terms_at\" value=\"1\" required=\"true\" ng-model=\"agreed_to_terms\" required-notification=\"Please agree to the terms and conditions\" class=\"ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required\" bs-validation=\"\">\
but selecting the child elements it's not there:
(byebug) all(:css, '.checkbox.form-group').last.all :xpath, './*'
[#<Capybara::Node::Element tag="label"
path="//HTML[1]/BODY[1]/DIV[2]/DIV[1]/DIV[2]/FORM[1]/DIV[1]/LABEL[1]">]
I feel like I'm going mad.
Here's the relevant code (copied from save_and_open_page)
<div class="checkbox form-group">
<input type="checkbox" id="agreed_to_terms_at" value="1" required="true" ng-model="agreed_to_terms" required-notification="Please agree to the terms and conditions" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" bs-validation="">
<label class="label-light" for="agreed_to_terms_at">
I have read and agree to the terms</label>
</div>
I thought maybe rails was generating slightly non-compliant HTML, so I've gone to writing the checkbox by hand, but it didn't help.
What's going on here?
The checkbox is hidden to allow for uniform styling across all browsers. Since you have a label element correctly associated you can tell check to click the label instead of the actual checkbox
check('agreed_to_terms_at', allow_label_click: true)
which will click the checkbox if visible and if not it will click the label. If you want it to only click the label you can do
find(:label, 'I have read and agree').click
Or
find(:label, for:'agreed_to_terms_at').click
Due to CSS styling, the checkbox element was being hidden and the label used to present it. So the element was getting skipped over by capybara's default behaviour to ignore hidden elements.
I worked around it using
find('#agreed_to_terms_at', :visible => false).trigger('click')
I have some HTML for a Checkbox im trying to click:
<td class="surface center">
<div class="checkbox-inline checkbox-inline--empty">
<input type="hidden" value="0" name="stuff_check">
<input id="stuff_1" class="boolean optional" type="checkbox" name="stuff_1_checked" value="1" data-item="5">
<label class="optional" for="stuff_1">Checked</label>
</div>
</td>
When running a page.find_by_id('id').trigger('click') it does indeed work, just using click however it complains about Poltergeist possibly clicking another elements:
Capybara::Poltergeist::MouseEventFailed:
Firing a click at co-ordinates [-9468.5, 6] failed. Poltergeist detected another element with CSS selector '' at this position. It may
be overlapping the element you are trying to interact with. If you
don't care about overlapping elements, try using
node.trigger('click').
However I felt maybe this is because of it being set as "hidden", so I tried doing page.find_by_id('ID', :visible => false).click however it gave the same issue.
Any suggestions? Since I know using trigger.('click') isn't advised.
There is no way to do a proper click on a hidden element because there would be no way for a user to click on an element that doesn't appear on the screen.
Your example is confusing because the hidden element doesn't have the same name attribute as the checkbox element which is what I would normally expect in this kind of setup. Assuming that what you're really trying to do is check the "stuff_1" checkbox (and that is hidden via CSS) then you should be doing what a user of your app would have to do - click on the label.
page.find('label[for="stuff1"]').click
Try
within('.checkbox-inline checkbox-inline--empty') do
check('#stuff_1')
end
I really recommend using Pry to do this though as you'll save yourself a ton of pain finding which elements are where.
Here is the answer from another question: jQuery find $.find('selector') versus $('selector') difference
The reason this does not work is because find() lets you filter on a set of elements based on a selection you've already made.For example if you wanted to select all of the inputs within a particular form, you could write:
$('#aParticularForm').find('input')
It cannot be called on its own.
How can I expand this statement to find specific inputs on a page? (Specifically listviews)
Working example: http://jsfiddle.net/Gajotres/93VFG/
Wanted element must have a unique identification, like id or class.
HTML :
<form id="aParticularForm">
<input type="text" value="One" id="input1"/>
<input type="text" value="Two" id="input2"/>
</form>
Javascript :
var input = $('#aParticularForm').find('#input1');
alert(input.val());
You can even go further, because you are working with a jQuery Mobile you can have several pages loaded into the DOM and they can all have identical input fields, so to find elements only in a current active page you would use:
$.mobile.activePage.find('#input1');
The mobiscroll documentation states
This preset enhances a regular HTML select to select the values with a scroller. The original select is hidden, and a dummy input is visible instead. The value of the select is maintained by the preset.
The sample HTML code they provide uses inline styling to hide the original select element
<select name="City" id="select" style="display:none">
However, when I do this and setup the mobiscroll replacement to appear inline
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
I find that although the scroller appears I still end up with what looks like an input element above it. This does not happen in their demo code but there I note that what they do is something like this
<div id="select_cont" style="display: none;">
<select name="City" id="select">
but that simply hides everything including the mobiscroll replacement. Looking under the covers I found that calling
$('#select').scroller({preset:'select',theme:'default',display:'inline',mode:'scroller',inputClass: 'i-
txt'});
introduces a dummy input element into the DOM.
<input id='cities_dummy'...
I can get the dummy to hide itself by issuing a
$('#cities_dummy').css('display','none')
immediately after creating the scroller. However, I cannot understand why things are working differently in the demo code. I have noted that they are using jQuery Mobile v 1.1.1 whilst I am using the very latest version.
Perhaps this issue is related to versions? Or is there something else at play here? I'd much appreciate any help.
I figured it out. It is all down to the
inputClass:i-txt
bit in the scroller options settings. In the demo code they are probably playing with this class via script depending on the value of the display property in the options object. The point is this - in order to get the original select to disappear when the scroller display is set to "inline" you must define i-txt (or whatever input class you use) as
.i-txt{display:none}