reRender via JS API - jsf

I was wondering if there is any JS function in jsf/richfaces which does the same functionality as that of reRendering a component.
Also will the reRender work on any component which has display:none style?

You could use a4j:jsFunction with 'render' set. Then from javascript call the jsFunction and the render will be done. I think that render does not check the display style setting.
<h:form>
<a4j:jsFunction name="render" render="componentToRenderId"/>
</h:form>
<script>
render();
</script>
MAG,
Milo van der Zee

I assume you are using RichFaces 3.x because you are using jsf-1.2.
If so, you can use the component as 'Milo vd Zee' showed but your attribute should be changed as "reRender" instead of "render".
For Richfaces 4.2 "render" attribute is ok.

Related

Using a4j , how would you rerender a dojo component?

I am using JSF 1.2 and Richfaces 3.3.3 , I've tried
<a4j:region>
<t:selectOneMenu id="comp1" value="#{bB.selectedTeam}" style="width: 200px">
<t:selectItems value="#{bB.teams}" var="team" itemLabel="#{team.desc}" itemValue="#{team.code}"/>
<a4j:support event="onchange" reRender="comp2"/>
</t:selectOneMenu>
but didn't work.
comp1 is a Dojo combobox component and it doesn't do anything when onchange event happens.
JSF doesn't keep track of plain HTML. If you want to be able to rerender something it has to be wrapped in a component, like <a4j:outputPanel> and then you have to rerender that component.
it turned out the html object rendered by <t:selectItems> was transformed to a dijit component when page loads, that conversion to dojo in javascript side does that the user won't interact with the object we indicated to do ajax call in the event onchange through
<a4j:support event="onchange" reRender="comp2"/>
so the solution was to use in order to attach the event to the dojo component in javascript browser side.

ui is undefined jsf primefaces

I have a problem with using primefaces autocomplete component. When triggered ia get the error $ui. is undefinded and the backing bean is not even called.
My code is:
<p:autoComplete completeMethod="#{auto.uliList}" value="#{naroc.ulValue}"></p:autoComplete>
Big thanks for any help!
This is recognizeable as a jQuery / jQuery UI conflict.
PrimeFaces ships with jQuery and jQuery UI libraries by itself already. If you have manually included jQuery and/or jQuery UI by a custom <script> or <h:outputScript>, then it would only conflict with PrimeFaces-provided ones and result in this kind of "foo is undefined" errors. You should remove your manually included jQuery scripts from the page (and your webapp) and rely on PrimeFaces-provided ones instead.
If you have pages which don't necessarily use PrimeFaces components (and thus its bundled jQuery scripts won't necessarily be auto-included on every page), then you need to explicitly specify PrimeFaces own jQuery instead:
<h:outputScript library="primefaces" name="jquery/jquery.js" />
I just managed to resolve my problem.
it was quite simple but effective. So if you come up with a prolem similar to mine just add this code to your page head:
<h:outputScript target="head">
jQuery.noConflict();
</h:outputScript>

How to not render whole block in JSF?

Is there a JSF 2.1 component which lets me conditionally render (or not render) all its content? Something like
<h:component rendered="#{user.loggedIn}">
...a bunch of jsf components and HTML code...
...even more HTML code...
</h:component>
I am using PrimeFaces 3M4 as this may influence your answer!
<h:panelGroup>
If you set attribute layout="block", you will have a <div> tag
Otherwise, you have a <span> tag.
In general most of jsf components support the render attribute (never bumped in some that does not),
container components like h:panelGrid or h:panelGroup supports the rendered attribute and if its set to false all its child will be hidden too
Same goes for the primefaces components ,and if not it probably a bug (i think there was an issue with tabview of primefaces)
Here's a link for primefaces user guide, you can find supported attributes of all primefaces components there User’s Guide for 3.0.M4

How to call a Javascript function on render in JSF 1.2/Richfaces 3.3?

We have an a4j:outputPanel that is ajaxRendered. Is there a way to call a javascript function each time it is (re)rendered? I know that we could put a call in every element that could possibly submit with oncomplete, but that really isn't practicably maintainable.
Details:
JSF 1.2
Richfaces 3.3
Example (oncomplete isn't actually available on the outputPanel tag):
<a4j:outputPanel ajaxRendered="true" oncomplete="myJSFunc()">
<h:outputText value="Test-aroo" />
</a4j:outputPanel>
<!-- other inputs, buttons and stuff -->
Update Might the jQuery library be able to help (it's built into RichFaces)? I'm looking at using .live() to maybe register with the oncomplete event. I'll keep experimenting and update with progress.
Update I didn't get a chance to implement the jQuery solution, but as my answer shows below myJSFunc() can just be put directly inside the rendered tags.
A solution is to put the javascript in a script tag inside the outputPanel:
<a4j:outputPanel ajaxRendered="true">
<h:outputText value="Test-aroo" />
<script type="text/javascript">myJSFunc();</script>
</a4j:outputPanel>
You would need to call oncomplete on the component that fires the Ajax request. a4j:outputPanel doesn't have oncomplete attribute.

What jsf component can render a div tag?

Eg: h:inputText will render a "input type='text'".
What jsf tag can render a "div" tag?
You can create a DIV component using the <h:panelGroup/>.
By default, the <h:panelGroup/> will generate a SPAN in the HTML code.
However, if you specify layout="block", then the component will be a DIV in the generated HTML code.
<h:panelGroup layout="block"/>
In JSF 2.2 it's possible to use passthrough elements:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:jsf="http://xmlns.jcp.org/jsf">
...
<div jsf:id="id1" />
...
</html>
The requirement is to have at least one attribute in the element using jsf namespace.
Apart from the <h:panelGroup> component (which comes as a bit of a surprise to me), you could use a <f:verbatim> tag with the escape parameter set to false to generate any mark-up you want. For example:
<f:verbatim escape="true">
<div id="blah"></div>
</f:verbatim>
Bear in mind it's a little less elegant than the panelGroup solution, as you have to generate this for both the start and end tags if you want to wrap any of your JSF code with the div tag.
Alternatively, all the major UI Frameworks have a div component tag, or you could write your own.
you can use myfaces tomahawk component
http://myfaces.apache.org/tomahawk-project/tomahawk12/tagdoc/t_div.html
I think we can you use verbatim tag, as in this tag we use any of the HTML tags

Resources