in JSF, I were using: rich:popupPanel to display some information that calculated by Javascript. Normally I often use h:outputText to diplay value but I don't know how to diplay javascript value on HTML. Can I display it with h:outputText ? Thanks
Ignore JSF and just use the normal JavaScript/HTML DOM means. JSF is for them merely a HTML code generator. JS has no knowledge about the JSF source code, all it has access to is its generated HTML source code (exactly the one as you see by rightclick and View Source in the webbrowser).
Imagine that JSF has generated the following HTML, e.g. by <h:outputText id="foo"> or just hardcoding it as-is (you can just write plain HTML in a JSF page, do you know?):
<span id="foo"></span>
Then you can use JS as follows to fill its node value with a JS variable:
var foo = "some value";
document.getElementById("foo").innerHTML = foo;
This will ultimately appear dynamically as follows in the HTML DOM which get also visually reflected in UI:
<span id="foo">some value</span>
Related
I'm new on ModX. I've created a template variable to input custom HTML into my page. I choose Rich Text as input type for this template variable.
On the other hand, my HTML contains some meta tag like <meta itemprop="name" content="myname"> tag with schema ( some custom attributes like <div class="review" itemprop="review" itemscope="" itemtype="http://schema.org/Review"> )
So when I submit this data into page through template variable, I don't see that meta tag and custom attributes like itemprop, itemscope or script tag. They are removed or ignored by the editor.
Can someone tell me that how can I get rid from these issue? I will be great full for the help. Thanks.
There are two possible ways at least:
1) use textarea TV type instead rich text
2) it depends on your WYSIWYG editor, they allow you to exclude (not cut) the specified tags from processing
I can't figure out the proper method to render angular expressions inside of uib-tooltip-html. The example used in the documentation: inline string
doesn't work for me in IE, Chrome or Firefox. Can anyone point me in the right direction? Thanks.
Here's an excerpt from the docs
uib-popover-html - Takes an expression that evaluates to an HTML string. Note that this HTML is not compiled. If compilation is required, please use the uib-popover-template attribute option instead. The user is responsible for ensuring the content is safe to put into the DOM!
The interesting part is
The user is responsible for ensuring the content is safe to put into the DOM!
Which basically means you should use the $sce service to sanitize you HTML and pass it as an expression at your controller
$scope.dynamicTooltipText = "MY SUPER DYNAMIC TEXT"
$scope.htmlPopover = $sce.trustAsHtml('static. ' + $scope.dynamicTooltipText + ' . <b>bold.</b>');
and then pass $htmlPopover to your uib-popover-html directive
<button uib-popover-html="htmlPopover" popover-placement="bottom" class="btn btn-default">
HTML Popover
</button>
Demo plunker
With a grails app and from a local database, I'm returning some text in a xml format.
I can return it well formed in a <textarea></textarea> tag with the correct indenting (tabulation, line return,...etc.)
I want to go a bit further. In the text I'm returning, there are some <img/> tags and I'd like to replace those tag by the real images themselves.
I searched around and found no solution as of now. I understood that you can't add an image to a textarea (other then in a background), and if I choose a div tag, I won't have the indenting anymore (and therefore, harder to read)
I was wondering if using a <g:textField/> or an other tag from the grails library will do the trick. And if so, How can I append them to a page using jquery.
For example, how to append a <g:textField/> in jquery. It doesn't interpret it and I get this error
SyntaxError: missing ) after argument list [Break On This Error]...+doc).append("<input type="text" id="FTMAP_"+nb_sec+"" ...
And in my javascript file, I have
$("#FTM_"+doc).append("<g:textField id='FTMAP_"+nb_sec+"' ... />
Any possible solutions ?
EDIT
I did forget to mention that my final intentions are to be able to modify the text (tags included) and to have a nice and neat indentation so that it is the easiest possible for the end user.
You are asking a few different questions:
1. Can I use a single HTML tag to include images inside pre-formatted text.
No. You will have to parse the text and translate it into styled text yourself.
2. Is there a tag in the grails standard tags to accomplish this for me?
No.
3. How can I add grails tags from my javascript code.
Grails tags are processed on the server-side, and javascript is processed on the client. This means you cannot directly add grails tags via javascript.
There are a couple methods that can accomplish the same result, however:
You can set a javascript variable to the rendered content of a grails tag. This solution is good for data that is known at the time of the initial request.
var tagOutput = "${g.textField(/* etc */)}";
You can make an ajax request for the content to be added. Then your server-side grails code can render the tags you need. This is better for realtime data, or data that will be updated more than once on a single rendered page.
I posted this to the PrimeFaces user forum but I think they are too busy to look into it, so I thought I would try here.
I have server-side string that has markup in it, so when I want it rendered I do this:
<p:panel>
<f:verbatim>
#{daBean.markedUpString}
</f:verbatim>
</p:panel>
This works fine, but not if the same tag is used inside a p:dataTable -- either with or without the p:panel enclosure. What gets rendered is a div class="ui-dt-c" element with nothing in it. To test, if I take out the f:verbatim tag the marked-up text gets escaped and rendered.
I don't know if this should be considered a bug or not, but does anyone know of a work-around for this? This is with PrimeFaces 3.0.M3.
The <f:verbatim> tag is intented to hold plain text/HTML, not JSF components nor EL expressions. The tag is a leftover from JSF 1.0/1.1 ages when it was not possible to inline plain text/HTML between JSF components. The tag is deprecated in JSF2. You do not need it anymore.
Your concrete functional requirement is thus displaying some HTML string from a managed bean unescaped. For that you should use <h:outputText> with escape="false".
<h:outputText value="#{daBean.markedUpString}" escape="false" />
See also:
Getters inside f:verbatim called before form submission
JSF/Facelets: why is it not a good idea to mix JSF/Facelets with HTML tags?
What are the main disadvantages of Java Server Faces 2.0?
I have a complex ICEFaces XHTML page that renders certain components conditionally, based on flags set as the user enters data on the page. What I'd like to do is direct focus to a certain field as soon as it appears, which may not be during the initial render of the page.
The ICEFaces documentation suggests that I can do this using the focus attribute of the outputBody component. Specifically:
If you setting the initial focus, the focused component must be rendered on first render call, if not then set the focus attribute only when the component gets rendered.
This seems to suggest that I can manipulate the value of the focus attribute at the time that my conditional component gets rendered. However, I don't see any attributes of the inputText component that allow me to change a value at the time the component is rendered.
Am I misreading the documentation? When and where can I alter the value of the focus attribute of outputBody so that my conditionally-rendered field gets the input focus when it appears? Or am I using the wrong tool to solve this problem?
Maybe you can use this
JavascriptContext.applicationFocus(FacesContext.getCurrentInstance(), "form:fieldM");
You can use some Javascript to set focus on an element.
Here's the Java snippet required to do this:
JavascriptContext.addJavascriptCall(FacesContext.getCurrentInstance(),
"document.getElementById('myForm:myTxtBox').focus();");
myTxtBox is the ID of your form element, and myForm is the ID of your form.
You can use this wherever you are changing certain variables' values to render/hide fields.
Due to the fact that I'm using both Seam and ICEFaces, I was not able to invoke Javascript reliably from my server-side Java code. I was, however, able to add the necessary Javascript in-line in my XHTML, within the ui:component that was being conditionally rendered, close to the input field I needed the focus to go to. The relevant section of my XHTML looks like this:
<ice:panelGroup id="textPanelInput" >
<ice:form id="textInputForm" partialSubmit="true" style="vertical-align:middle;">
<ice:inputText id="textInput" valueChangeListener="#{appField.valueChangeListener}"
size="#{appField.fieldDefLengthAsInt}"
value="#{appField.value}"
styleClass="fieldStyle" rendered="#{appField!=null}"
>
</ice:inputText>
<ice:message id="jo" for="textInput" />
</ice:form>
</ice:panelGroup>
<script type="text/javascript">document.getElementById('panelsFields:0:textInputForm:textInput').focus();</script>
The Javascript line at the bottom is the line I added to solve my problem. All of the code above is in a ui:component block that may or may not be rendered, based on other conditions. When this ui:component block is rendered, my Javascript goes with it, and sets the input focus to my desired input field.
ICEfaces supports javascript api which has setting focus function. Thus you may use it like in the next excerpt:
<script type="text/javascript">
jQuery(document).ready(function () {
ice.applyFocus(elementId);
});
</script>
elementId is jsf component clientId.
ICEFaces javascript Api