Integrate JavaScript in JSF composite component, the clean way

by

I’d say that what you’ve there is the best you can get, provided that you’re absolutely positive that the HTML element’s nature is so unique that you absolutely need to select it by an ID, every time again.

If the HTML representation is not that unique (I can imagine that a Facelets template or include file might contain application-wide unique HTML elements like header, menu, footer, etc, but a composite component which can be reused multiple times in a single view? I can’t for life imagine that), then you could also consider using an unique classname and hook initialization on it.

E.g. /resources/composites/yourComposite.xhtml

<cc:implementation>
    <h:outputScript library="composites" name="yourComposite.js" target="head" />
    <div id="#{cc.clientId}" class="your-composite">
        ...
    </div>
</cc:implementation>

with in the /resources/composites/yourComposite.js (assuming that you’re using jQuery)

var $yourComposites = $(".your-composite");
// ...

You can if necessary extract the autogenerated HTML element ID for each of them in a jQuery.each():

$yourComposites.each(function(index, yourComposite) {
    var id = yourComposite.id;
    // ...
});

More Related Contents:

  1. How to invoke animation when redirection in jsf?
  2. How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?
  3. How can I know the id of a JSF component so I can use in Javascript
  4. Pass parameter to p:remoteCommand from JavaScript
  5. Call Python function from JavaScript code
  6. Error parsing XHTML: The content of elements must consist of well-formed character data or markup
  7. Calling a JavaScript function from managed bean
  8. The entity name must immediately follow the ‘&’ in the entity reference
  9. How to pass JavaScript variables as parameters to JSF action method?
  10. Mixing JSF EL in a JavaScript file
  11. How do I pass JSF managed bean properties to a JavaScript function?
  12. How to use jQuery and jQuery plugins with PrimeFaces
  13. Escape JavaScript in Expression Language
  14. Getting backing bean value with Javascript
  15. How do I use Browserify with external dependencies?
  16. Execute JavaScript after every JSF ajax postback
  17. What is the alternative for the chart extender attribute in PrimeFaces 5.2 and newer
  18. Defer loading and parsing of PrimeFaces JavaScript files
  19. How to re-execute javascript function after form reRender?
  20. SecurityError: Blocked a frame with origin from accessing a cross-origin frame
  21. Executing elements inserted with .innerHTML
  22. How does one capture a Mac’s command key via JavaScript?
  23. Where to save a JWT in a browser-based application and how to use it
  24. how to add new to onclick with javascript
  25. Message “Async callback was not invoked within the 5000 ms timeout specified by jest.setTimeout”
  26. How to scroll to an element in jQuery?
  27. $getJSON and for loop issue
  28. AngularJS application file structure
  29. Solution: load independently compiled Webpack 2 bundles dynamically [closed]
  30. Truncate paragraph first 100 character and hide rest content of paragraph to show/hide rest contenct with more/less link

Leave a Comment