0

I have in my .xhtml form an element into which I am appending html elements through javascript.

When I trigger an ajax commandButton, these appended elements are lost.

I have tried to exclude this element from my ajax update and make my submit partial (following this practice How to exclude child component in ajax update of a parent component?) , but in vain, the newly added elements are lost after the update takes place.

Is there any way to avoid this? Thanks in advance :)

Code sample:

 <h:form id="formID">
    <p:commandButton
          value="ajax_button" partialSubmit="true"
          update="@(#divOfElement :not(.notupdate))"
          ajax="true">
          <f:actionListener binding="#{myBean.myAction()}"/>
        </p:commandButton>

 </h:form>



<p:outputPanel id="divOfElement">
   <!-- other things i want to be updated-->
   <p:outputPanel id="panel_not_to_update"styleClass="notupdate">
      <!-- this div is filled with other elements from javascript code which will be destroyed when the ajax update takes place -->
   </p:outputPanel>

</p:outputPanel>

Here, I want divOfElement to be updated through the command button in the ajax call, but exclude the div with id panel_not_to_update so it's child elements added through javascript code will not be lost.

I am using JSF 2.2 and Primefaces 7.0.

NickAth
  • 1,089
  • 1
  • 14
  • 35
  • 1
    Possible duplicate of [How to exclude child component in ajax update of a parent component?](https://stackoverflow.com/questions/12614882/how-to-exclude-child-component-in-ajax-update-of-a-parent-component) – Kukeltje Oct 10 '19 at 11:39
  • I have followed this practice to exclude my component from being updated by the command button but the elements created from javascript are still lost as you can see in my code sample – NickAth Oct 10 '19 at 11:41
  • It IS a duplicate ;-) Your selector is wrong... Compare carefully compare with the post you reference (note whitespace!) And next time please post what you tried/used upfront like requested in [ask]... Cheers – Kukeltje Oct 10 '19 at 11:50
  • Well It seems that the `not` selector is not working since I have tried with many different ids and it works for each one but the components with class`notupdate` are never excluded from the update, maybe is it an issue of Primefaces? – NickAth Oct 10 '19 at 14:02
  • Look at the ajax response... I am 100% sure ONLY the `#divOfElement` is updated... Your selector is wrong... it should contain a space.. As is shown in the duplicate – Kukeltje Oct 10 '19 at 14:28
  • it does contain a space, I made a typo when a I posted the question. In the response i see thay the whole div is updated including the div I don't want to be updated (I have tried to exclude it by using the class in the not selector and the id but none of these works) `update="@(#divOfElement :not(.notupdate))"` and `update="@(#divOfElement :not(#panel_not_to_update))"` :/ – NickAth Oct 10 '19 at 15:38
  • I'd really love to help, but I hope you are very much aware that by 1: not posting what you did and 2: making a fundamental error in creating the code in the question, you sort of wasted 20 minutes of my time... What if you type `$("#divOfElement :not(.notupdate)")` on the browser console (cause that is what they are, plain jquery selectors)? Does it find anything correctly? Did you check what the **actual client side id** is of the jsf component with jsf id `divOfElement`? – Kukeltje Oct 11 '19 at 07:00
  • @Kukeltje thanks for your time, sorry for the typo but I edited the code sample the same moment you told me my selector is wrong :). I solved my problem by setting the `noupdate` class to all ancestor elements of the element I did not want to update. I had the thought that if I add the .noupdate class to an element then none if its children elements will be updated from the ajax request.. – NickAth Oct 11 '19 at 14:02

0 Answers0