So I dynamically generate a input form from backing bean. One of the dynamically generated element is an image with title value (tooltip). But I couldn't figure out how to add line-break into the title.
I tried "\r\n", "<br/>", "
", all end up showing the same value on the tooltip.
I know if it is an outputText, I could call escape="false" to make it work...but how to do it with the title field?
<img src="img/info.png" title="#{bean.info}"/>
wherea bean.info has value of
"A : apple
B : ball"
but the tooltip end up showing "A : apple
B : ball" instead of on two lines.
Or does anyone have idea how to put an outputText result into the title of an img tag?
Related
On form POST, only the first column of form data get submitted. The second column (category and priority) are undefined. If I move the submit button to the second column the exact opposite happens. Then if I rearrange the form to have only one column, all of the form values get submitted(temp work around). How can I implement this form with two columns and have the entire form submitted?
Console log output:
from CREATE ISSUE CONTROLLER
req.body.title: New bug report
req.body.description: New bug report
req.body.priority: undefined
req.body.category: undefined
The form code (.pug):
#newissue.tab-pane.fade(role="tabpanel" aria-labelledby="newissue-tab")
.row
.col-md-6.offset-md-2.new-issue-form
form(method="POST" action="/newissue")
.form-group
label(for="newIssueTitle") Title
input#newIssueTitle.form-control(type="text" placeholder="Issue title ..." name='title' required='true')
.form-group
label(for="newIssueDescription") Description
textarea#newIssueDescription.form-control(rows="10" placeholder="description" name='description' required='true')
div
input#filepond(type="file" name="filepond" data-max-files="10" multiple="")
button.btn.btn-success(type="submit") Create New Issue
.col-md-2.new-issue-form.input-group.mb-3
.form-group.mb-3
label(for="category") Category
select#category.form-control(type='select', placeholder='Category ...' name='category' required='true')
for category in categories
option(value=category._id) #{category.name}
.form-group.mb-3
label(for="priority") Priority
select#priority.form-control(type='select', placeholder='Priority ...' name='priority' required='true')
option(selected="") Priority...
each pri in priorities_list
option(value=pri._id) #{pri.name}
else
li No priorites
The way the Pug is written, none of your second column is inside the form element. All elements of a form have to be inside of the form element in order to be submitted.
Try moving the form element to contain the entire .row:
#newissue.tab-pane.fade(role="tabpanel" aria-labelledby="newissue-tab")
form(method="POST" action="/newissue")
.row
.col-md-6.offset-md-2.new-issue-form
.form-group
label(for="newIssueTitle") Title
input#newIssueTitle.form-control(type="text" placeholder="Issue title ..." name='title' required='true')
.form-group
label(for="newIssueDescription") Description
textarea#newIssueDescription.form-control(rows="10" placeholder="description" name='description' required='true')
div
input#filepond(type="file" name="filepond" data-max-files="10" multiple="")
button.btn.btn-success(type="submit") Create New Issue
.col-md-2.new-issue-form.input-group.mb-3
.form-group.mb-3
label(for="category") Category
select#category.form-control(type='select', placeholder='Category ...' name='category' required='true')
for category in categories
option(value=category._id) #{category.name}
.form-group.mb-3
label(for="priority") Priority
select#priority.form-control(type='select', placeholder='Priority ...' name='priority' required='true')
option(selected="") Priority...
each pri in priorities_list
option(value=pri._id) #{pri.name}
else
li No priorites
I'm trying to pull out the text of a parent element without its child elements texts
<div>
Text A
<button>Text B</button>
<button>Text C</button>
</div>
I need only the "Text A" but all I manage to get is:
" Text A
Text B
Text C "
Any suggestions?
I'm implementing a dialog for registering an address. In the street name field, I'm using PrimeFaces' <p:autoComplete> tag to help the user find the name of their street. The completeMethod works as expected, but to avoid confusion between similar street names I would like the drop-down list to also include the municipality the given street is in, for instance on the format "<street name>, <municipality name>".
I don't want the municipality name to be included in the actual field, so I've concluded that I need a method that performs some sort of string manipulation (substring using the position of the first comma, for instance), but I can't figure out where such a method would be called from. I've had a look through the PrimeFaces documentation, but I haven't been able to find anything that would allow me to do this. Is this at all possible in <p:autoComplete>? Alternatively, is there another autocomplete implementation which supports this, or would I have to implement my own javascript component?
EDIT: This is what the xhtml code I'm using looks like:
<div class="form-group row required">
<h:outputLabel value="#{msgs['#common.mailingAddress']}" for="address" styleClass="col-xs-12"/>
<p:autoComplete
id="address"
name="address"
size="50"
maxlength="50"
styleClass="col-xs-12 street-name"
label="#{msgs['#common.search']}"
disabled="#{not configurationController.cardCtrl.editable}"
value="#{configurationController.cardCtrl.selected.address}"
required="true"
completeMethod="#{configurationController.cardCtrl.autoCompleteTest}">
<f:validator binding="#{onlyLettersOrDigitsValidator}"/>
</p:autoComplete>
<h:message id="addressMessage" for="address" styleClass="inline-error inline-error-small"/>
</div>
The autoCompleteTest method in the controller is as follows:
public List autoCompleteTest(String input) {
AddressSearch addressSearch = AddressSearch.builder()
.streetName(input)
.municipality(municipality.getName())
.maxResultsPerPage(10)
.build();
return addressesToStreetNames(mapService.addressSearch(addressSearch).getAddresses());
}
With a helper method addressesToStreetNames which takes a list of Address objects and returns an ArrayList<String> containing those addresses' street names.
EDIT2: Based on suggestions in the comments, I tried setting itemValue and itemLabel to different values, to see if that had any effect. The new xhtml looks like the above, with the addition of the following three lines:
var="address"
itemValue="#{address.streetName}"
itemLabel="#{configurationController.cardCtrl.formatAddress(address.streetName, address.postTown)}"
The autoCompleteTest method now also returns the Address object directly rather than a String representation of the street name, so that these fields are available. The formatAddress method is simply return streetName + ', ' + postTown;
This causes the dropdown list to look how I want it to look, but when I click an item it still inserts the whole string with both street name and post town/municipality into the text field (and in fact, before I've written anything, the text field already contains ", ").
I have a xpage with Extension Library DataView control. I have defined several extra columns there.
<xe:dataView id="dataView1"
<xe:this.data>
<xp:dominoView var="vMyView" />
</xe:this.data>
<xe:this.summaryColumn>
<xe:viewSummaryColumn columnName="$DateFrom"
columnTitle="Date From">
</xe:viewSummaryColumn>
</xe:this.summaryColumn>
<xe:this.extraColumns>
<xe:viewExtraColumn columnName="$DateTo"
styleClass="hidden-xs" headerStyleClass="hidden-xs" columnTitle="Date To"
style="hidden-xs">
</xe:viewExtraColumn>
<xe:viewExtraColumn columnName="$Information"
columnTitle="Information">
</xe:viewExtraColumn>
</xe:this.extraColumns>
</xe:dataView>
My view data source contains same cells where information is empty. Those cells are rendered with style="display:none;".
How can I avoid this attribute and display those empty cells? I'd like not to change my view to fill empty cells with i.e. "-" char
An empty column value gets rendered with style="display:none;":
You can avoid this if you add a custom converter to your column definition and replace an empty value by a space:
<xe:viewExtraColumn columnName="$Information"
columnTitle="Information">
<xe:this.converter>
<xp:customConverter>
<xp:this.getAsString><![CDATA[#{javascript:value == "" ? " " : value}]]></xp:this.getAsString>
<xp:this.getAsObject><![CDATA[#{javascript:value}]]></xp:this.getAsObject>
</xp:customConverter>
</xe:this.converter>
</xe:viewExtraColumn>
It gets rendered to a "normal" grid cell without display:none then:
The code for getAsObject doesn't matter as long as the cell is not editable. So it's OK to just leave the value as it is.
Instead of using a converter to "fake" some content, you could also adjust the css. Just implement
.lotusTable TD {
display: inline !important;
}
in a style sheet resource used in your custom control(s).
So you also won't have to apply a converter to every potentially empty column.
I have a selectOneRadio tag and all radio button options are displayed on one row. How can I make it one option per row/line?
To learn about tag's behavior and all of its available attributes, a good starting point is the tag documentation. Here's an extract relevance from the <h:selectOneRadio> tag documentation:
[...]
Encode Behavior
Render a "table" element. If the "styleClass" is specified, render the value of the "styleClass" attribute as the value of the "class" attribute on the "table" element. If the "style", "border" attributes are specified, pass them thru and render their values as the "style" and "border" attributes on the "table", respectively. If the "layout" attribute is specified, and its value is "pageDirection", render the children elements vertically, otherwise horizontally, in the table. If any of the children are an instance of SelectItemGroup, render them as a nested table. Each of the children are ultimately rendered as follows. Render an "input" element of "type" "radio" for each child component. Render the "name" attribute on the "input" element with the value of the clientId of the component. Render an "id" attribute on the "input" element. Each "id" value must be unique. If the current SelectItem.isDisabled() returns true, render "disabled" as the value of the "disabled" attribute.
[...]
Note the emphasis. There's your answer.
<h:selectOneRadio ... layout="pageDirection">