When using Binding.scala, I can not write html that uses the tabindex attribute.
Is this a bug in Binding.scala / scala.js?
<div>
<input tabindex="1"></input>
<input tabindex="3"></input>
<br></br>
<input tabindex="2"></input>
<input tabindex="4"></input>
</div>
Results in compile error:
ScalaFiddle.scala:12: error: value tabindex is not a member of scalajs.this.dom.html.Input
ScalaFiddle.scala:13: error: value tabindex is not a member of scalajs.this.dom.html.Input
ScalaFiddle.scala:15: error: value tabindex is not a member of scalajs.this.dom.html.Input
ScalaFiddle.scala:16: error: value tabindex is not a member of scalajs.this.dom.html.Input
I tried to use the attribute (or property?) tabIndex, but it is not a string and the attribute argument needs to be a string.
For example see this: https://scalafiddle.io/sf/kDg2uAA/0
I am quite new to scala, sbt and scala.js, so I am not sure where/how to fix this and how to test a fix locally before creating a pullrequest.
You can use the tabIndex attribute with a value enclosed in {} (tip: you can use any scala code inside!).
<div>
<input tabIndex={1}></input>
<input tabIndex={3}></input>
<br></br>
<input tabIndex={2}></input>
<input tabIndex={4}></input>
</div>
Please, see a full code here: https://scalafiddle.io/sf/hGkAVib/1
You need to use the data:tabindex property. Please see https://scalafiddle.io/sf/TlcSdfF/1
Related
I am trying to insert text into CKEditor and looks like it's not working.
<textarea name="editor2" class="form-control" id="announcementEditBody" rows="3" placeholder="Enter ..."></textarea>
CKEDITOR.replace('editor2');
$('editor2').val(response['aBody']);
Neither does CKEDITOR.instances.editor2.setData(); work, neither .insertText neither ['editor2'], it gives me this error Unable to get property 'setData' of undefined or null reference.
In CKEditor documentation they wrote about use of ID, so try to set data this way -
CKEDITOR.instances.announcementEditBody.setData();
OR
CKEDITOR.instances['announcementEditBody'].setData();
I have a list of similar looking DIVs without any Div ID, except one has a check box checked and others doesn't. What i need is to find the value from a child tag only if a radio button is selected.
Below is a simpler version of my code.
<div class = "XYZ">
<input type="radio" checked>
<input type="hidden" value="This is a great thing 1">
</div>
<div class = "XYZ">
<input type="radio">
<input type="hidden" value="This is a great thing 2">
</div>
Result needed is
This is a great thing 1
Unfortunately the source code cannot be changed.
Your xpath should look for a div that contains the checked input and to get the value for the one that has value attribute.
First selector returns the input, the second returns the value.
//div[.//input[#checked]]/input[#value]
//div[.//input[#checked]]/input/#value
As an alternative you can use the following sibling:
//input[#checked]/following-sibling::input
If you want to also use the class of the parent div:
//div[#class='XYZ']/input[#checked]/following-sibling::input
<input type="text" ng-repeat="board in allBoards track by $index" ng-model="board">
✔
What I am trying to do is modifying board name with UpdateBoards(). But I click the button, values of the input are not passed to UpdateBoards, what should I change? Thanks
So for I understand your problem try following:
<div ng-repeat="board in allBoards track by $index">
<input type="text" ng-model="board">
✔
</div>
By wrapping ng-repeat in div and calling each input and a href tag inside div, hope it will help you.
Below is my html
<div class="right" data-bindattr-13="13">
<h3>Company Name</h3>
<div class="input-row">
<input id="ember4258" class="ember-view ember-text-field" type="text"/>
</div>
<h3>Full Company Legal Name</h3>
<div class="input-row">
<input id="ember4259" class="ember-view ember-text-field" type="text"/>
</div>
<h3>Company Phone</h3>
<div class="input-row">
<input id="ember4260" class="ember-view ember-text-field" type="text"/>
</div>
<h3>Federal Tax / Employer ID (EIN)</h3>
<div class="input-row">
<input id="ember4261" class="ember-view ember-text-field" type="text"/>
</div>
</div>
Since class value off all the text fields and respective parent div class attributes are same I need to fill these text fields without using nth-of-type.
I have done work around to create a CSS selector that should point the text box that is immediately after <h3>Full Company Legal Name</h3> .
h3:contains(^Company Name$)+div>input
But my Capybara script is not recognizing the above way and throwing the below error.
annotateInvalidSelectorError_': The given selector h3:contains(^Company Name$)+div>input is either invalid or does not result in a WebElement. The following error occurred: (Selenium::WebDriver::Error::InvalidSelectorError)
InvalidSelectorError: An invalid or illegal selector was specified
Can any one provide a CSS that matches my requirement?
Regards,
Avinash Duggirala
The contains pseudo class was deprecated, which is why the InvalidSelectorError occurs. There is currently no way to check text nodes using CSS-selectors.
Instead, you can use XPath to traverse the DOM to sibling elements.
text_field = page.find(:xpath, '//h3[text() = "Company Name"]/following-sibling::div[1]/input')
text_field.set('some value')
Is there a way to use a fragment parameter in an expression?
I'd like to create a fragment to show fields with their corresponding binding errors e.g. like:
<div th:fragment="alert (field, fieldLabel)">
<label><span th:text="${fieldLabel}">Label:</span><input type="text" th:errorclass="field_error" th:field="*{field}"/></label>
<div th:if="${#fields.hasErrors(field)}"><span th:errors="*{field}">Some error</span></div>
</div>
Getting the fragment with:
<div th:replace=":: alert (field='firstName', fieldLabel='Firstname')">Field</div>
How do I use the field parameter in the expressions for the th:field and th:errors attributes? *{field} does at least not work.
With Thymeleaf 2.1 I've been using the following:
Declare field:
<input type="password" th:field="*{password}" />
Show possible errors related to password:
<div th:replace="util/form :: field-errors('password')"></div>
And this prints all the errors related to given field:
<div class="error-container help-block"
th:fragment="field-errors(field)"
th:if="${#fields.hasErrors('__${field}__')}">
<ul>
<li th:each="error : ${#fields.errors('__${field}__')}"
th:text="${error}" />
</ul>
</div>
It seems that it is not possible at least
using th:field and th:errors, it keeps trying to look for a bean instead
of the parameter of the fragment.
Try setting a local variable for the DOM object
th:with="variableName=${field}"
An then try to use that variable in the expressions.