I have the following element:
<div class="input-group bootstrap-timepicker">
<input type="text"
class="form-control timepicker"
name="start-time"
ng-model="timeSegment[0]"/>
<span data-toggle="timepicker" class="input-group-addon add-on btn btn-default">
<i class="icon icon-time"></i>
</span>
</div>
It is contained in an ng-repeat that repeats this element multiple times. The above code snippet works perfectly, and correctly displays the correct model values when it is loaded, but uses a text box to enter time instead of timepickers. My model value 'timeSegment[0]' is a string in the format 'hh:mm a', for example '04:00 AM'.
However, as soon as I added the bs-timepicker attribute to the above elements (to allow time to be entered using timepickers instead of textbox):
<div class="input-group bootstrap-timepicker">
<input type="text"
class="form-control timepicker"
name="start-time"
ng-model="timeSegment[0]"
bs-timepicker/>
<span data-toggle="timepicker" class="input-group-addon add-on btn btn-default">
<i class="icon icon-time"></i>
</span>
</div>
they showed a default time instead of the values from my model. It was picking up my model correctly, since it correctly iterated the right number of elements and showed the timepicker for them, just not the right value in the timepicker.
Whats also strange is that although the timepickers show a default time, as soon as I change one of them, the value is correctly updated in my model.
I thought it may be because time is my model is a string, and not a date, but even adding attributes described here http://mgcrea.github.io/angular-strap/#/timepickers, such as the following, made no difference. I also tried making my model a Date object, but again, no difference.
data-modelTimeFormat="hh:mm A"
data-timeType="string"
I ended up using a different timepicker, which works as expected:
https://angular-ui.github.io/bootstrap/
Even if you're only using the timepicker to allow time to be selected, its value needs to be a full date. Make the value of your ng-model an arbitrary date and set it to the time you need e.g.
var myDateTime = new Date("01-Jan-1970 00:00:00");
ng-model = myDateTime;
Related
I just recently started using Thymeleaf through one of my projects. I have seen few examples where th:text=${example} is being used in some places th:value=${example}.
I have gone through the Thymeleaf documentation but couldn't find anything explicitly citing the difference, nor did any question on SO.
Any help would be really appreciated! Thanks.
th:value is modification of html attribute value.
For button, input and option elements, the value attribute specifies the initial value of the element
th:text is used for tag body modification.
div{background-color: lightblue; padding: 2px} // to highlight empty div
<!--th code: <div th:value="${value}"/></div> -->
<br/>Result th:value div: <div value="sometext"/></div>
<!--th code: <form><input th:value="${value}"/></form>-->
<br/>Result th:value form: <form><input value="sometext"></form>
<!--th code: <div th:text="${value}"></div>
Same as: <div>[[${value}]]</div> -->
<br/>Result th:text div: <div>sometext</div>
Here is docs of different Thymeleaf attributes features
Lets see an example:
<input type="radio" name="gender" value="male"> Male<br>
if we want to use thymeleaf in value portion of this input tag, then we will use,
<input type="radio" name="gender" th:value="${someValue}"> Male<br>
if we want to see the text (here Male) sent from the controller dynamically, then we use,
<input type="radio" name="gender" th:text="${someText}""> <br>
th:name => This would be the name of the value that you will be passing to another page (Exemplar scenario).
th:value => This would be the actual value that you would be passing. It could be obtained from a model or straight from the database explicitly.
<form th:action="#{confirm-pass-details.html}">
<button type="submit" th:name="event-id" th:value="${event.get().getEventid()}">Buy Passes</button>
</form>
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 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.
The above pic shows the select list but it's not actually select list, it consist of 'Input' tag, So I tried to set the value using b.text_field.set("argentina") but it only focuses(color changes to yellow) but it's not setting the value, how could I do that?
The code for that select list is given below
<div class="v-filterselect v-widget v-has-width v-filterselect-prompt" role="combobox" style="width: 100%;">
<input tabindex="0" class="v-filterselect-input" id="gwt-uid-17" aria-labelledby="gwt-uid-16" style="width: 100%;" type="text" autocomplete="nope">
<div class="v-filterselect-button" role="button" aria-hidden="true">
</div>
</div>
The problem is that Watir-Classic calls the blur event after setting the value. As a value is not selected from the dropdown, Vaadin considers this as an invalid input and resets it back to "No country selected". You can see the same behaviour when you interact with the combobox manually:
Click the text field
Type "argentina"
Click somewhere else in the page (ie runs the blur event)
To populate the field, you need to select an item from the dropdown. Even though the input field is being cleared, the dropdown does remain (at least when Watir-Classic does it). As a result, we are able to select an item without extra work.
Here is an example using the Vaadin demo page:
require 'watir-classic'
browser = Watir::Browser.new
browser.goto('http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/combo-box')
country = 'ARGENTINA'
browser.text_field(aria_labelledby: 'gwt-uid-16').when_present.set(country)
browser.div(id: 'VAADIN_COMBOBOX_OPTIONLIST').span(text: country).when_present.click
Note that this will not replicate the exact events generated when a user interacts with the field. However, if you are just using the control, rather than testing the field (ie a Vaadin developer), this is likely sufficient.
I have the following input on my form:
<md-input-container class="md-block" flex>
<label>Install Date</label>
<input type="text" date="yyyy-MM-dd" ng-model="selectedCompanyDetail.InstallDate" disabled>
</md-input-container>
As you can probably tell, I want the date displayed with this format yyyy-MM-dd. However, what I am getting is this: 1993-01-01T00:00:00.
It looks correct if I do this:
<md-input-container class="md-block" flex>
<label>Install Date</label>
<input type="text" ng-model="selectedCompanyDetail.InstallDate | date:'yyyy-MM-dd':'UTC'" disabled>
</md-input-container>
But, I get this error in the developer tools:
angular.js:13307 Error: [ngModel:nonassign] http://errors.angularjs.org/1.5.0-rc.2/ngModel/nonassign?p0=selectedCompanyDetail.InstallDate%20%7CNaNate%3A'yyyy-MM-dd'%3A'UTC'&p1=%3Cinput%20type%3D%22text%22%20date%3D%22yyyy-MM-dd%22%20ng-model%3D%selectedCompanyDetail.InstallDate%20%7C%date%3A'yyyy-MM-dd'%3A'UTC'%22%20disabled%3D%22%22%class%3D%22ng-pristine%20ng-untouched%20ng-valid%22%3E
at Error (native)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.2/angular.min.js:6:421
I can still use the view, but every date field has this same error.
I have many date fields and don't want to add a filter to each one as suggested here: AngularJS get formatted date in ng-model
There has to be a native way to format a date input like a date without the time.
Suggestions or ideas?
You can use this package to handle any kind of date and time manipulation. https://github.com/urish/angular-moment
I use it like this.
selectedCompanyDetail.InstallDateNewFormat = moment(selectedCompanyDetail.InstallDate).format('YYYY-MM-DD');
You must another model to store this new date since md-datepicker only allows data javascript object. while this format returns plain text(string).