given this:
<span data-v-086f077a="" data-v-bf29e118="" class="toggle undefined-undefined small">
<span data-v-086f077a="" class="toggle-label"></span>
<input data-v-086f077a="" type="checkbox" id="tracked-item-toggle-0">
<label data-v-086f077a="" for="tracked-item-toggle-0"><span data-v-086f077a="" class="on-text">Tracked</span>
<span data-v-086f077a="" class="off-text">Not Tracked</span>
</label>
</span>
How can I get the displayed text of the input checkbox.
clicking on the checkbox toggles it back and forth and displays either Tracked or Not Tracked. I just need to know which one it is so I can toggle it to Tracked if its Not Tracked.
To toggle I use //span[#class='toggle undefined-undefined small']
I have tried many things including //label[#for='tracked-item-toggle-0' and ./span[contains(.,'Not Tracked')]]
but that finds it whether its displayed or not.
None of the code changes based on toggling the checkbox
Thanks!
The label contains two spans which contain the text Tracked and Not Tracked and have class attributes on-text and off-text, respectively. Which of the two labels is displayed is presumably controlled by CSS.
My guess would be that there are CSS rules which control the display or visibility properties of these two spans, presumably using their class attributes in conjunction with some other attribute of the parent element.
Maybe take a look at the CSS (and include it in your question) and see what it reveals?
Related
I have a text box that I'm trying to fill in with Capybara. I've tried to play around with it and try to figure something's out but my tests don't pass.
Here's
It's for this specific text box:
<span class="ui-grid-header-cell-label ng-binding" ui-grid-one-bind-id-grid="col.uid + '-header-text'" id="14213131-uiGrid-0008-header-text">DOB</span>
<input type="text" class="ui-grid-filter-input ui-grid-filter-input-0 ng-touched" ng-model="colFilter.term" ng-attr-placeholder="{{colFilter.placeholder || ''}}" aria-label="Filter for column" placeholder="" aria-invalid="false" style="">
Here's the code I have.
find('ui-grid-filter-input ui-grid-filter-input-0 ng-touched').set('1414234')
Ideally I'm trying to find this specific text box and type something in.
To fill the <input> using Capybara you can use either of the following locator strategies:
find('[aria-label=Filter for column]').set('1414234')
or
find('input[aria-label=Filter for column]').set('1414234')
As a CSS selector 'ui-grid-filter-input ui-grid-filter-input-0 ng-touched' is looking for a ng-touched element which is a descendant of a ui-grid-filter-input-0 element which is a descendant of a ui-grid-filter-input element - which obviously isn't what you want. Since you're trying to match on classes you need to use the CSS class selector which starts with .
find('.ui-grid-filter-input.ui-grid-filter-input-0.ng-touched')
would be the correct way to do what you were doing, however you probably don't really need all those classes, and the more you specify the more brittle you are making your selectors. It's likely that just
find('.ui-grid-filter-input-0').set('1414234')
would do what you want - or better
find('.ui-grid-filter-input-0').fill_in(with: '1414234')
We are re-designing a site and part of that re-design involves making the site accessible to screen readers and the like. I'm using latest version (2.8.0). Here's what's happening --- validation for all text, select and textarea fields in our forms work perfectly. In order to be accessible, checkbox and radio inputs are wrapped in tags. The html for a set of checkboxes looks like this:
<div class="form-group">
<p id="applicant_type_desc" style="margin-bottom: 6px;"><strong>I am: <span class="text-danger" aria-hidden="true">*</span><span class="sr-only">Required</span></strong> <em class="small">(check all that apply)</em></p>
<div class="checkbox">
<label id="applicant_type_patient_desc">
<input type="hidden" name="applicant_type_patient" id="" value="N">
<input type="checkbox" name="applicant_type_patient" id="applicant_type_patient" value="Y" {checked_applicant_type_patient} aria-labelledby="applicant_type_desc applicant_type_patient_desc" data-parsley-multiple="type" data-parsley-error-message="Please specify whether you are a patient, relative, employee or other.">
A patient
</label>
</div>
followed by more checkbox divs without error messages and ended with an end div for the for form-group wrapper.
If I load the form and click 'submit', all the text fields are validated properly. If I add 'required' to the checkbox above, when 'submit' is clicked nothing happens and the form is submitted with no validation at all.
The same thing happens when I try to validate a radio button set as required.
There is some custom jQuery and parsley code which creates a div to hold all the error messages and transforms the error messages into links to the field id so that a screen reader can follow them and focus on the field in error. But imho, this should have no effect on why the form validation doesn't kick in.
I'm absolutely baffled.
FYI - I tried this using an earlier version (2.0.3) of parsley and the validation actually worked, although all my custom error processing was ignored.
Any insight would be greatly appreciated.
As it turns out, parsley handles the errorswrapper element differently for text, textarea and selects then it does for checkboxes and radio buttons.
The starting wrapper element for text, textarea and select contains the parsley-data-id attribute whereas checkbox and radio button elements contain the parsley-data-multiple attribute whether that was generated by parsley or entered manually in the html.
My code was looking for parsley-data-id and, of course the jquery selector failed and generated an error. A colleague was able to spot this for me while we were looking at the page in chrome inspector. Once i saw the error, making a simple adjustment to the form:error event function allowed everything to work.
I would like to add a toolbar button to CKEditor that shows the current color of the selection. Is this possible?
So far I managed to add a new toolbar button by following this tutorial and the colorbutton plugin, but I can't find any example of a toolbar button with dynamic presentation.
You could use a transparent image for the button and set the background color of the button span within your plugins functionality.
It looks like it might be easiest to get that span by finding the anchor tag with the title that you assigned (the tooltip) and then set the background color of the child span with id=cke_icon.
This is what the HTML for one of my plugin buttons looks like, the name of the particular plugin that the button calls isn't used, it's functions are assigned variable function numbers, so the plugin name isn't available:
<a id="cke_33" class="cke_off"
onclick="CKEDITOR.tools.callFunction(71, this); return false;"
onfocus="return CKEDITOR.tools.callFunction(70, event);"
onkeydown="return CKEDITOR.tools.callFunction(69, event);"
onblur="this.style.cssText = this.style.cssText;" aria-haspopup="true"
aria-labelledby="cke_33_label" role="button" hidefocus="true" tabindex="-1"
title="Block Background Color">
<span class="cke_icon" style="background-image:url
(/ckeditor_3.6.1/plugins/cwmarcontentbackcolor/images/contentbackcolor16x16.png?t=B5GJ5GG);
background-position:0 0px;">
</span>
<span id="cke_33_label" class="cke_label">Block Background Color</span>
<span class="cke_buttonarrow"> </span>
</a>
It will be a fair amount of work if you want to determine the color each time the user selects a portion of the content area because they could select multiple elements with multiple colors. Even if they simply click in the content area, you may have to walk up the DOM tree to find the element that the cursor position is inheriting it's color from.
I helped with a plugin for another question that had a different goal, but it involved firing each time a selection was made, creating an object based on the selection, and walking up the DOM tree to look at the class assigned to the elements. You may be able to modify it to fit your goals:
How to block editing on certain part of content in CKEDITOR textarea?
we have a template that uses this for the record line
<input type="${inputType}" name="${variableName}.code" id="${variable}.${vnum}.${answer.code}" class="checkbox" value="${answer.code}"
[#nested/] [#if (answer.textLength > 0) && scripting]onchange="showOtherBox( this, '${variable}.[#if descriptionHack]${variableNumber}[#else]${vnum}[/#if].${answer.code}.description' )"[/#if]
[#if showValues && (existing == answer.code)]checked="checked"[/#if]/>
On IE8 it renders as this
<span class="field">
<INPUT id=responses.8.L class=checkbox value=L type=checkbox name="responses['8'].answers['L'].code">
<LABEL for=responses.8.L>Award(s) for special accomplishment or performance related to activity participation (please list)</LABEL>
<TEXTAREA id=responses.8.L.description class=" visible" rows=4 cols=60 name="responses['8'].answers['L'].description"></TEXTAREA>
</span>
and on every other browser we tried, it renders as this
<span class="field">
<input type="checkbox" name="responses['8'].answers['L'].code" id="responses.8.L" class="checkbox" value="L" onchange="showOtherBox( this, 'responses.8.L.description' )">
<label for="responses.8.L">Award(s) for special accomplishment or performance related to activity participation (please list)</label>
<textarea rows="4" cols="60" name="responses['8'].answers['L'].description" id="responses.8.L.description" class="visible" classname="visible"></textarea>
</span>
The difference being that in the FTL script, the if statement
[#if (answer.textLength > 0) && scripting]
is true for everything except IE. In IE8 its false for some reason and therefore it does not put the OnChange javascript event on the input tag. Has anyone seen anything like this before? we are using Freemarker 2.3.9
Update, it kinda works if i turn compatibility mode on for IE8. but not exactly. when i do that, the onchange event doesn't fire until the check box loses focus. which is very different than everything else. Is there a quick way to fix this without too much trouble? i suppose i could put something in that says if ie8, insert onclick instead of onchange. that may work, but i would need an authorization from the client to fix it like that.
Since FreeMarker runs on the server only, it's not influenced by the browser directly. You should put something like <!-- answer.textLength = ${answer.textLength}, scripting = ${scripting?string} -->) before that [#if], so that you can see why exactly the condition fails, then find out where the value of the problematic variable is coming from, because usually it's not FreeMarker that sets it. (Bare-bone FreeMarker can't even detect the browser type.)
I'm trying to make an image button. I'm using/learning html5 and jquery mobile. this is my sample code:
<img src="img/beer.png" alt="beer" />
<input type="image" src="img/beer.png" />
the image is displayed, but the input type doesn't show the image. what do i do wrong ?
<input type="image" src="img/beer.png" /> is meant to collect coordinates. If you want to use it as a submit-button, you'll have to add an onsubmit-event, e.g.
<input type="image" src="img/beer.png" onsubmit="submit();" />
But you should rather use the <button>-element, which is way more flexible. It can contain text, images or both:
<button type="submit" name="beer" value="beer_btn_was_clicked">
Here's some optional text,
<p>which you can even put in a paragraph!</p>
And you don't even need JavaScript!
<img src="img/beer.png" />
</button>
Edit (2016-02-12)
As of today*, the above example is not considered 100% valid because <p>-elements are not allowed within a <button>-element anymore.
According to the MDN HTML element reference the only permitted content category within a <button>-element is the so called Phrasing content:
Phrasing content defines the text and the mark-up it contains. Runs of phrasing content make up paragraphs.
Elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
A few other elements belong to this category, but only if a specific condition is fulfilled:
<a>, if it contains only phrasing content
<area>, if it is a descendant of a element
<del>, if it contains only phrasing content
<ins>, if it contains only phrasing content
<link>, if the itemprop attribute is present
<map>, if it contains only phrasing content
<meta>, if the itemprop attribute is present
*today was that I read about it, not when the change was introduced
http://jsfiddle.net/cyB7B/
This works for me...have you got any other code that could be interfering? CSS maybe?