I'm using a Dojo Time Text Box on my XPage. When I save a time in this field, the displayed time has a "T" prefix. Is there any way of removing this "T"? Here is my code:
<xp:inputText id="EventEndTime" value="#{document1.EventEndTime}" style="width:160px;"
role="button" title="used to pick a meeting time" required="true"
dojoType="dijit.form.TimeTextBox"
disableClientSideValidation="true">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="required" value="false">
</xp:dojoAttribute>
</xp:this.dojoAttributes>
</xp:inputText>
You can add a custom converter to your inputText control which deletes the "T" before saving and adds "T" during rendering page:
<xp:this.converter>
<xp:customConverter>
<xp:this.getAsObject><![CDATA[#{javascript:value.substring(1)}]]></xp:this.getAsObject>
<xp:this.getAsString><![CDATA[#{javascript:"T" + value}]]></xp:this.getAsString>
</xp:customConverter>
</xp:this.converter>
This way time gets saved as string like "hh:mm:ss" instead of "Thh:mm:ss".
You could use a custom converter to save value as a Notes time value also.
Domino doesn't actually store "Time only", so you would want to use a viewScope variable to bind to your TimeTextBox first and use the load and save events to write to / read from that. I would use the SimpleDateFormat class for conversion which is way more comfortable that manual string operations. Actually a small Java helper class works wonders here.
Alternatively you could use a filter to clean this up.
Related
The page contains a multi-select dropdown (similar to the one below)
The html code looks like the below:
<div class="button-and-dropdown-div>
<button class="Multi-Select-Button">multi-select button</button>
<div class="dropdown-containing-options>
<label class="dropdown-item">
<input class="checkbox">
"
Name
"
</label>
<label class="dropdown-item">
<input class="checkbox">
"
Address
"
</label>
</div>
After testing in firefox developer tools, I was finally able to figure out the xPath needed in order to get the text for a certain label ...
The below XPath statement will return the the text "Phone"
$x("(//label[#class='dropdown-item'])[4]/text()[2]")
The label contains multiple text items (although it looks like there is just one text object when looking at the UI) in the label element. There are actually two text elements within each label element. The first is always empty, the second contains the actual text (as shown in the below image when observing the element through the Firefox developer tool's console window):
Question:
How do I modify the XPath shown above in order to use in Selenium's FindElement?
Driver.FindElement(By.XPath("?"));
I know how to use the contains tool, but apparently not with more complex XPath statements. I was pretty sure one of the below would work but they did not (develop tool complain of a syntax error):
$x("(//label[#class='dropdown-item' and text()[2][contains(., 'Name')]]")
$x("(//label[#class='dropdown-item' and contains(text()[2], 'Name')]")
I am using the 'contains' in order to avoid white-space conflicts.
Additional for learning purposes (good for XPath debugging):
just in case anyone comes across this who is new to XPath, I wanted to show what the data structure of these label objects looked like. You can explore the data structure of objects within your webpage by using the Firefox Console window within the developer tools (F12). As you can see, the label element contains three sub-items; text which is empty, then the inpput checkbox, then some more text which has the actual text in it (not ideal). In the picture below, you can see the part of the webpage that corresponds to the label data structure.
If you are looking to find the element that contains "Name" given the HTML above, you can use
//label[#class='dropdown-item'][contains(.,'Name')]
So finally got it to work. The Firefox developer environment was correct when it stated there was a syntax problem with the XPath strings.
The following XPath string finally returned the desired result:
$x("//label[#class='dropdown-item' and contains(text()[2], 'Name')]")
I have an input element where I need to set one extra attribute and its value.
<input autocomplete="off" id="to_input" name="to" class="form-control arrival ui-autocomplete-input" placeholder="To" data-input-component="searchCondition" data-input-support="suggest" type="text">
I need to add the below attribute:
How can I do this in Geb?
To say a little more details, when I enter TPE in the input text box, some dropdown items appears and when I select one of them like
"Taipei, XXX.. (TPE)"
Than the new attributes are set automatically same as the picture above.
The only way to do it, is using JavaScript executor:
browser.driver.executeScript("your script")
And script using jquery will look like:
$('jquery-selector').attr('attribute-name', 'attribute-value');
Of course make sure to fill in your data in quotes!
[see fiddle for illustration]
I set up a value bind to an input of type number, and want the bound observable to immediately reflect changes to the value of the field. to do that I set the afterkeydown valueUpdate binding. This works well for changing the number input using the arrow up and arrow down keys. However, if I change the number using the browser-generated (tested in chrome) increment/decrement control the change is only reflected upon changing focus to a different element. I assume this reflects the default update upon change event.
My question is whether there is any way to set the update to occur for both changes using the up down keyboard errors and browser-generated up/down error controls?
The valueUpdate additional binding can take an array of events. It looks like the oninput event is fired when clicking on the up/down arrows.
So, you can bind it like:
<input type="number" data-bind="value: y, valueUpdate: ['afterkeydown', 'input']"/>
http://jsfiddle.net/rniemeyer/hY5T2/9/
I have some slightly funky UI for inputting tags for a blog post: as tags are entered into an input field they are wrapped into spans that make them look nice by surrounding them in a stylized box, the end result comes out to be something like this:
http://forr.st/posts/OLs/original
Now, this input field (call it field 1)is not part of the form that gets submitted to the controller (I'm using RoR btw) for two reasons: it contains extraneous html tags, besides the actual tags; also if it was part of the form pressing enter would submit the form instead of triggering the js that wraps the entered tag into a span.
So what I'm doing is when each tag is entered, I copy its value (via js) to a hidden input field that IS part of the tag entry form, and when submitted would contain only the tag values and nothing else. The question is: What should I use as delimiter to separate the tags in the hidden input field. Currently I'm using ';' but if a tag itself contains ; that'd cause problems.
I'm also open to suggestions about the general method of how to keep track of the tags entered into 'field 1'
Thanks a lot,
I would recommend just adding a hidden input for each tag.
<input type="hidden" name="post[tags][]" value="tag_name" />
<input type="hidden" name="post[tags][]" value="tag_name" />
<input type="hidden" name="post[tags][]" value="tag_name" />
then in rails
post.rb
def tags=(value)
tag_array = [*value]
# then just filter these out.
end
I use a similar method with the tokenInput jQuery plugin. But in my case I've placed it inside the form. I solved the problems that you mentioned by capturing the keypress event and preventing it for that input and I ignore the search input value.
The one thing that I really like about keeping it inside the form is how it is managed afterward. I place the hidden tag, name, and a remove 'x' in a span (like you mentioned) and then just remove this tag when the 'x' is clicked. I like this because the name and the hidden_tag are removed at the same time.
Just one other tip. If you can, pass the tag_id in the hidden field. This way you don't have to add the tags attribute add all: <input type="hidden" name="post[tag_ids][]" value="tag_name" />.
I have the following code:
<input type="text" dojoType="dijit.form.NumberTextBox" size=8
constraints="{min:0,max:100000,places:0}"
id="orgNumberOfStudents" name="orgNumberOfStudents"
required="true" invalidMessage="Integer between 0 and 100,000"
value="">
Questions:
1) How do I set the width of the box? Do I have to do it in a style tag or a CSS? Is the traditional "input size" tag ignored?
2) The above sample shows the error when I type in a non-numeric value. But if I tab over the field and don't fill in anything, it's still blank. Is there a quick way to enforce the validation when I click the submit button? Do I need a Dijit submitt button? Do I need to write more JavaScript to make this happen? How does the required="true" actually occur?
(One get-around is to set the value to 0, but I'd rather force the user enter a value rather than just defaulting it).
Thanks,
Neal Walters
You should be able to use both CSS and traditional INPUT attributes like "maxLength" on your NumberTextBox by passing them in to the Widget's constructor. maxLength is available on all dijit.form.TextBox subclasses, but is probably less useful here since you have control over things like min/max and the actual number format.
Yes, you can always write your own JS to test "isValid()" on your widget instance before submission, e.g. in an HTML FORM onSubmit handler, or you could use dijit.form.Form which will check validity for you. The widget itself is only responsible for visual representation of its own validity, according to the options chosen.
HTH