Is it possible to update non-JSF components (plain HTML) with JSF ajax?

by

Is it possible to update parts of my page that are not JSF components?

No. The to-be-updated component has to be available by UIViewRoot#findComponent(), so that JSF can find them, invoke encodeAll() on it, capture the generated HTML output and pass back it in the ajax response so that JavaScript can update the HTML DOM tree with it. Plain HTML elements are not represented as real UIComponent instances in the JSF component tree, so JSF already cannot locate them in first place.

For example, can I update a plain HTML <div> or do I need to wrap that in a JSF component?

You need to wrap it in a JSF component like <h:panelGroup>. You can however just use <h:panelGroup layout="block"> to represent a real <div> in JSF. This way you don’t need to wrap the <div> in another JSF component.

<h:panelGroup layout="block" id="foo">
    ...
</h:panelGroup>

Since JSF 2.2 you can use new passthrough elements feature with jsf:id attribute to declare HTML(5) elements as JSF components.

<... xmlns:jsf="http://xmlns.jcp.org/jsf">

<div jsf:id="foo">
    ...
</div>

<main jsf:id="bar">
    ...
</main>

<section jsf:id="baz">
    ...
</section>

They will render their output as-is, but under the covers be a concrete UIPanel instance.

There’s however one corner case in case of composite components. You can use the following approach to have a HTML element which is updateable by ajax.

<cc:implementation>
    <span id="#{cc.clientId}">
        ...
    </span>
</cc:implementation>

The explanation that this approach works is because even though the composite component does not render itself to the HTML output, it is by itself available by UIViewRoot#findComponent().

See also:

More Related Contents:

  1. Is it possible to use JSF+Facelets with HTML 4/5?
  2. Component to inject and interpret String with HTML code into JSF page
  3. Adding custom attribute (HTML5) support to JSF 2.0 UIInput component
  4. How to find out client ID of component for ajax update/render? Cannot find component with expression “foo” referenced from “bar”
  5. When to use valueChangeListener or f:ajax listener?
  6. Custom HTML tag attributes are not rendered by JSF
  7. JavaServer Faces 2.2 and HTML5 support, why is XHTML still being used
  8. What values can I pass to the event attribute of the f:ajax tag?
  9. JQuery: ‘Uncaught TypeError: Illegal invocation’ at ajax request – several elements
  10. How to conditionally render plain HTML elements like s?
  11. Rendering other form by ajax causes its view state to be lost, how do I add this back?
  12. Cross domain ajax request
  13. Form submit in conditionally rendered component is not processed
  14. Process onclick function after ajax call
  15. jQuery click function doesn’t work after ajax call? [duplicate]
  16. Conditional rendering of non-JSF components (plain vanilla HTML and template text)
  17. Can you update an h:outputLabel from a p:ajax listener?
  18. How to pass parameter to f:ajax in h:inputText? f:param does not work
  19. List of events
  20. How do I add HTML code to JSF FacesMessage
  21. Execute JavaScript after every JSF ajax postback
  22. ICEfaces libary in classpath prevents Save As dialog from popping up on file download
  23. Render multiple components with f:ajax
  24. JSF vs HTML(JSP) for enterprise portals UI layer. Which one to Choose? and WHY? [closed]
  25. Ajax update and submission using h:commandButton
  26. Can't remove text decoration
  27. How to create a checkbox with a clickable label?
  28. Why is vertical-align: middle not working on my span or div?
  29. how to remove the dotted line around the clicked a element in html
  30. Primefaces valueChangeListener or

Leave a Comment