Rectangle 27 1

You can add parentId to the existing update= attribute like so:

update="tree parentId"
parentId
testGroupController.selected.parentId

You can process any values from the UI to the been too, by using:

process="myInputId"
<h:form>
    <h:inputText id="input" 
                 value="#{bean.value}" />
    <h:outputText id="output" 
                  value="#{bean.value}" />
    <p:commandButton process="input"
                     update="output"
                     value="Submit" />

Upon clicking your button, the value of id="input" will be set in bean.value (as ordered by process="input"). Next your id="output" will be rendered (or updated) with bean.value (as ordered by update="output").

I understand, but first of all I have to set testGroupController.selected.parentId value. I do it by actionListener, is it correct ?

jsf - How to update component on clientside in primefaces? - Stack Ove...

jsf jsf-2 primefaces
Rectangle 27 25

If you're using at least PrimeFaces 3.3, then you can use PrimeFaces Selectors for this. This allows you using jQuery CSS selector syntax in process and update attributes of PrimeFaces ajax components.

<h:form>
    <h:inputText ... />
    <h:inputText ... />
    <h:inputText ... styleClass="noupdate" />
    <h:inputText ... />
    <h:inputText ... />
    <p:commandButton ... update="@(form :not(.noupdate))"/>
</h:form>

This example will update the entire form except for inputs having class="noupdate" in the client side.

If you want to update a all children of a certain component except one, replace 'form' by the id of the surrounding component (or a class or...)

<h:form id="form">
    <h:panel id="myPanel">
        <h:inputText ... />
        <h:inputText ... />
        <h:inputText ... styleClass="noupdate" />
    </h:panel>
    <h:inputText ... />
    <h:inputText ... />
    <p:commandButton ... update="@(form :not(.noupdate))"/>
</h:form>

<p:commandButton ... update="@(#form\:myPanel :not(.noupdate))"/>

Just make sure you use the full client-side id.

thank you for your answer ! I was not aware that jQuery selectors can be used in Primefaces update attribute.

update="@(form :not(.noupdate)),otherPanel"
update="otherPanel,@(form :not(.noupdate))"

How to do the same thing with only JSF <p:ajax>?

jsf - How to exclude child component in ajax update of a parent compon...

ajax jsf primefaces
Rectangle 27 25

If you're using at least PrimeFaces 3.3, then you can use PrimeFaces Selectors for this. This allows you using jQuery CSS selector syntax in process and update attributes of PrimeFaces ajax components.

<h:form>
    <h:inputText ... />
    <h:inputText ... />
    <h:inputText ... styleClass="noupdate" />
    <h:inputText ... />
    <h:inputText ... />
    <p:commandButton ... update="@(form :not(.noupdate))"/>
</h:form>

This example will update the entire form except for inputs having class="noupdate" in the client side.

If you want to update a all children of a certain component except one, replace 'form' by the id of the surrounding component (or a class or...)

<h:form id="form">
    <h:panel id="myPanel">
        <h:inputText ... />
        <h:inputText ... />
        <h:inputText ... styleClass="noupdate" />
    </h:panel>
    <h:inputText ... />
    <h:inputText ... />
    <p:commandButton ... update="@(form :not(.noupdate))"/>
</h:form>

<p:commandButton ... update="@(#form\:myPanel :not(.noupdate))"/>

Just make sure you use the full client-side id.

thank you for your answer ! I was not aware that jQuery selectors can be used in Primefaces update attribute.

update="@(form :not(.noupdate)),otherPanel"
update="otherPanel,@(form :not(.noupdate))"

How to do the same thing with only JSF <p:ajax>?

jsf - How to exclude child component in ajax update of a parent compon...

ajax jsf primefaces
Rectangle 27 1

You can not update component with renderedattribute. Here you have explanation and solution: update attribute does not update component Generally, wrap up rendered component in <h:panelGroup> and update it.

jsf 2 - How to refresh a custom component with primefaces update or js...

jsf jsf-2 primefaces
Rectangle 27 1

You can not update component with renderedattribute. Here you have explanation and solution: update attribute does not update component Generally, wrap up rendered component in <h:panelGroup> and update it.

jsf 2 - How to refresh a custom component with primefaces update or js...

jsf jsf-2 primefaces
Rectangle 27 4

To rerun a script, simply re-render the tag that calls it. Assuming the form is re-rendered whenever it is "updated", this will do:

<script>

function init () { 
  $("#myspan").doSomething;
}
</script>

<h:form rendered="some condition">
  <script type="text/javascript">init()</script>
  <span id="myspan" />

</h:form>

jsf - Automatically call javascript on update of some component in Pri...

javascript jsf jsf-2 primefaces
Rectangle 27 52

You probably already know that PrimeFaces is using jQuery under the covers. PrimeFaces Selectors are based on jQuery. Anything which you specify in @(...) will be used as jQuery selector on the current HTML DOM tree. For any found HTML element, which has an ID, exactly this ID will ultimately be used in the update.

Basically, for a update="@(.myclass)", PrimeFaces will under the covers roughly do this:

var $elements = $(".myclass");
var clientIds = [];

$.each($elements, function(index, element) {
    if (element.id) {
        clientIds.push(":" + element.id);
    }
});

var newUpdate = clientIds.join(" "); // This will be used as `update` instead.

So, in case of e.g.

<h:form id="formId">
    <h:outputText id="output1" styleClass="myclass" ... />
    <h:outputText styleClass="myclass" ... />
    <h:outputText id="output3" styleClass="myclass" ... />
</h:form>
<p:commandButton ... update="@(.myclass)" />

will end up with exactly the same effect as

<p:commandButton ... update=":formId:output1 :formId:output3" />

Note that this also works for autogenerated IDs. I.e. the <h:form id> is not mandatory.

It can happen that you selected "too much" (e.g. @(form) doesn't select current form, but all forms, exactly like $("form") in jQuery!), or that you actually selected nothing (when the desired HTML DOM element has actually no ID). Investigating element IDs in the HTML DOM tree and the request payload in the HTTP traffic monitor the should give clues.

The desired elements in the HTML DOM tree must have an (autogenerated) ID. The javax.faces.partial.render request parameter in the HTTP traffic monitor must contain the right client IDs. The element's rendered attribute in the JSF component tree must evaluate true during update. Etcetera.

In your particular example, the <h:outputText> won't end up in the generated HTML output with any ID. Assigning it an id should solve your problem with updating it.

<h:form>
    <h:outputText value="#{bean.text1}" styleClass="myClass" />
    <p:commandButton value="Update" update="@(.myClass)" /> 
</h:form>

but this example will work (note that assigning the form an ID is not necessary):

<h:form>
    <h:outputText id="myText" value="#{bean.text1}" styleClass="myClass" />
    <p:commandButton value="Update" update="@(.myClass)" /> 
</h:form>

Thank you! Nice explanation. Now I know what my problem was. I have not always used id attribute on non-NamingContainer components.

So to be more clear, components that are currently not in the DOM because of rendered="false" can not be affected by directly selecting them in an update. However, they can be updated by selecting the parent. For example update="@(#container :button) will not work, but update="@(#container) will. Please correct me @BalusC if needed! :)

@Daniel: this is not specific to PFS. You'd face exactly the same problem when using standard JSF client IDs. See also among others stackoverflow.com/questions/9010734/

I'm trying to update some elements by their class from an ajax exception handler (Primefaces), but it would seem any attempt to select more than a single component by their id is met with a Client side expression (PFS and @widgetVar) are not supported... expression "@(.my-class)" message. Does anyone know whether this is possible at all?

Can we update 'myclass' programatically? I have tried the omnifcaes Ajax.update("@(.myclass)") and other variations with other methods, like the primefaces one, but didn't work. Is there a easy way to update a class programatically?

jsf - How do PrimeFaces Selectors as in update="@(.myClass)" work? - S...

jsf jsf-2 primefaces jquery-selectors
Rectangle 27 61

It's not possible to re-render (update) a component by ajax if the component itself is not rendered in first place. The component must be always rendered before ajax can re-render it. Ajax is using JavaScript document.getElementById() to find the component which needs to be updated. But if JSF hasn't rendered the component in first place, then JavaScript can't find anything to update.

The solution is to simply reference a parent component which is always rendered.

<h:form>
    ...
    <h:commandButton ...>
        <f:ajax ... render=":text" />
    </h:commandButton>
</h:form>
<h:panelGroup id="text">
    <h:outputText ... rendered="#{not empty user}" />
</h:panelGroup>

I have just tried it - but for no result

But the container does not print any Exception trace. Ususally when the id is not found - it prints that such an id was not found in the scope.

Well, then the login is simply invalid :)

@TREMOR: The colon is the correct solution for the code in its current form. You've apparently a different construct whereby everything is placed inside the same naming container component. Check last "See also" link for explanation how to determine the correct client ID.

jsf - Ajax update/render does not work on a component which has render...

jsf jsf-2 rendered-attribute conditional-rendering ajax-update
Rectangle 27 4

It's because the tab is a naming container aswell... your update should be update="Search:insTable:display" What you can do aswell is just place your dialog outside the form and still inside the tab then it would be: update="Search:display"

jsf - How to find out client ID of component for ajax update/render? C...

ajax jsf jsf-2 primefaces clientid
Rectangle 27 34

The PrimeFaces process and standard JSF execute attributes should point to spaceseparated component identifiers of components which JSF should process during the entire JSF lifecycle upon an ajax request (get request parameters, validate them, update model, execute action). The process defaults to @form, the current form, and the execute defaults to @this, the current component. In command links/buttons this is mandatory to execute the actions associated with the link/button itself.

However, in your datatable you have process="@this infoAnggaranForm:Anggaran", thus two components to process. If you omit @this but keep the other component, then it will only process/execute the other component and not the link/button component. If you omit the process attribute it will default to @form. If you have more other input components in the same form, then they will also be processed.

Depending on the concrete functional requirement, you could just keep it process="@this infoAnggaranForm:Anggaran", or omit it. JSF will then process/execute at least both the button and the other component, exactly as you want.

In command links/buttons this is mandatory to execute the actions associated with the link/button itself. <-- ahhhhh, this is new to me, and enlightening. Thank you ! About the process attribute of primefaces tags, i think it defaults to @all based on my tests. And as you said already, execute defaults to @this. Thanks again BalusC !

jsf - What is the function of @this exactly? - Stack Overflow

jsf jsf-2 primefaces
Rectangle 27 14

No, you can't. A relative client ID like update="dis123" basically searches in the same NamingContainer parent component which is in your case the <h:form> of the first page. However, no such component exist. It's actually in a different NamingContainer parent. You need to provide an absolute client ID instead: update=":form1:dis123".

For starters, an easy way to figure the right absolute client ID is by just looking in the JSF-generated HTML output (rightclick, View Source in browser) for the generated HTML element ID of the desired component and then prefix it with :.

Please note that this all has nothing to do with includes. You'd have had exactly the same problem when having all the code in a single page.

ajax - How to update Primefaces component in one page from command but...

ajax jsf primefaces
Rectangle 27 1

I would like to post this as a comment but it is too long. Here is what I would try :

<h:form id="form">

  <p:panel id="toggleable" header="Toggleable" toggleable="true" collapsed="true" widgetVar="panel">
    <p:ajax 
      event="toggle" 
      update="form:list" 
      oncomplete="$(document.getElementById('form:list')).find('.ui-datatable-scrollable-body').height(PF('panel').cfg.collapsed ? 100 : 300);" />
  </p:panel>

  <p:dataTable id="list" scrollable="true" scrollHeight="100">

  </p:dataTable>
</h:form>

As you can see the JS in the oncomplete attribute is doing all the work. PF('panel').cfg.collapsed checks if the panel is collapsed or not and we set the .ui-datatable-scrollable-body height accordingly.

I tested it with PF 4.0 and it seems to work well for me. If you don't need to update the content of the dataTable you can get rid of update="form:list" and use onstart instead of oncomplete.

Im using PF 5.3 and still works.

jsf - How to update an attribute of a component when a Primefaces pane...

jsf jsf-2 primefaces
Rectangle 27 9

That's not possible this way. The components are searched and updated in exactly the same order as they appear in the JSF component tree.

One way would be to rearrange/swap the both components in the tree hierarchy and reposition them visually with help of CSS. This is however rather clumsy.

Another way would be to update the 2nd component on complete of the update of the 1st component (and thus effectively end up with 2 ajax requests instead of 1). You can achieve that with help of <p:remoteCommand> which is invoked on complete of the <p:ajax>.

<p:ajax ... update="pieChartDiv" oncomplete="updateTableDiv()" />
...
<p:remoteCommand name="updateTableDiv" update="tableDiv" />

This solution work fine! Thanks! But p:ajax and f:ajax could implement this feature on the same component, isn't it?

You're welcome. I'm not sure if I understand your last question. What exactly do you mean? Which feature? Which component? "Could"?

I tried to say that the tag p: ajax, for example, could include a Boolean attribute called 'updateInOrder' to allow a simplified way to do what you proposed to solve this issue. In case, if the attribute were true, the order of the update could be followed as stated. But that was just a thought of simplifying the solution, the matter is already settled. Thank you!

jsf - How to use p:ajax to update several components in order - Stack ...

ajax jsf jsf-2 primefaces
Rectangle 27 3

You have to wrap your myPanel inside another container and update it instead. Your problem is basically that when your panel remains hidden, it can't be updated by your p:selectBooleanCheckbox because the component is not rendered in your DOM tree. Your problem is exactly the same as this case. This should do the job:

<h:panelGroup id="parentPanel">
    <p:panel widgetVar="myPanel" rendered="#{devolucionesCCMB.mostrar}">
        <td align="right">
            <h:outputLabel id="claveEtiqueta" value="Clave de la Etiqueta: " styleClass="textoEtiqueta"/>
        </td>
        <td align="left">
            <p:inputText id="claveEtiquetaP" value="#{devolucionesCCMB.claveEtiqueta}" disabled="false" size="15" styleClass="textoEtiqueta"/>
        </td>  
     </p:panel>  
</h:outputPanel> 

<p:selectBooleanCheckbox id="invalidarEtiquetaP" value="#{devolucionesCCMB.invalidarEtiqueta}">
    <p:ajax update="parentPanel" listener="#{devolucionesCCMB.mostrarOcultar}"/> 
</p:selectBooleanCheckbox>

jsf - how to hide an unhide a panel in primefaces? - Stack Overflow

jsf jsf-2 primefaces
Rectangle 27 1

I guess you problem is that your panel wont appear on the screen. The cause of this is that you can't update a component which is not rendered. You have to put your p:panel into another p:panel (or any container component) and update the outer component. e.g.:

<p:commandButton icon="ui-icon-plus" actionListener="#{qualCntrl.enableGroupPanel}"  update="qualaddpanelgrid12,updateMe" />
<p:panel id="updateMe">
    <p:panel id="groupPanel" header="Add New Group"  closable="true"   widgetVar="groupPanel" style="width:170px;" rendered="#{qualCntrl.groupPanelEnable}"></p:panel>
</p:panel>

primefaces - How to update panel by doing action from panel grid in js...

jsf primefaces
Rectangle 27 1

PrimeFaces has a component for clientside resets

<p:commandButton value="Reset Tag" update="@form" process="@form" style="margin-right:20px;" >
     <p:resetInput target="***idFromYourTag***" />
 </p:commandButton>

If you need reset the backing bean values, you need to write a method. See also ResetInput

You are welcome

jsf - How can I reset PrimeFaces tabs - Stack Overflow

jsf primefaces
Rectangle 27 5

<p:remoteCommand autoRun='true'>
<script>

function init () { 
  $("#myspan").doSomething;
}
</script>

<h:form rendered="some condition">

  <span id="myspan" />
  <p:remoteCommand autoRun="true" oncomplete="init();" />
</h:form>

In the solution of Ali the <script> tag is called earlier as the solution with <p:remoteComand>. The remoteCommand is called if output is already shown to user.

This is actually a very good solution! The advantage is that the remote command will be executed later than the script tag solution . In my case the width of elements i had to work with was still zero. The browser called the javascript before the elements were ready. If you use the remote command, elements will be shown to the user and therefore ready to get and manipulate dimension values.

This can also be undesirable - in my case I wanted it executed as soon as possible to avoid glitch visual effects. Depends on the application.

jsf - Automatically call javascript on update of some component in Pri...

javascript jsf jsf-2 primefaces
Rectangle 27 2

Update using following code :

<p:ajax event="close" listener="#{aMB.selectedReset}" update="@([id$=table_a])" />

jsf - How to update datatable in tab of accordion (primefaces) - Stack...

jsf jsf-2 primefaces
Rectangle 27 8

You can use many elements in the update attribute separated by a space

also you can update the whole form by using update="@form"

<p:commandButton update="element1 element2"/>

it worked now..Thank you.May be I was doing it in a wrong way before!! anyway Thanks.. :)

jsf - Can 'update' attribute update two components simultanously? - St...

jsf primefaces
Rectangle 27 4

It's because the tab is a naming container aswell... your update should be update="Search:insTable:display" What you can do aswell is just place your dialog outside the form and still inside the tab then it would be: update="Search:display"

jsf - How to find out client ID of component for ajax update/render? C...

ajax jsf jsf-2 primefaces clientid