CODEWITHSUNDEEP
jqueryjsf-2richfaces
Ellie Fabrero
Ellie Fabrero

Reputation: 811

How to maintain state of the DOM manipulated by jQuery/javasscript when reRendering richfaces/jsf components?

I've have problem when it comes to rendering some of my components in my jsf application. The problem is when i use jQuery on my page for example hiding the button. When the page reRenders the button come back to its original form which is supposed to be hidden.

Has someone has expertise on this matter that will be able to help me find a suitable solution or there is some principles here or techniques which was i blindly misunderstood?

Thanks. :)

Upvotes: 1

Views: 1491

Answers (2)

BalusC
BalusC

Reputation: 1109625

The problem is when I use jQuery on my page for example hiding the button. When the page reRenders the button come back to its original form which is supposed to be hidden.

Don't use jQuery to manipulate the DOM, but use JSF Ajax instead to manipulate the DOM.

E.g.

<h:form>
    <h:selectBooleanCheckbox value="#{bean.checked}">
        <f:ajax render="buttons" />
    </h:selectBooleanCheckbox>

    <h:panelGroup id="buttons">
        <h:commandButton value="Submit" rendered="#{bean.checked}" />
    </h:panelGroup>
</h:form>

See also:

Upvotes: 2

Tim Br&#252;ckner
Tim Br&#252;ckner

Reputation: 2099

We were facing the same issue under IceFaces 1.8.2. The problem is that the server side application does not know about your client side changes to the DOM. We solved it for us by applying marker classes to the elements we wanted to manipulate with jQuery. We used the generic client side callback for DOM-Updates (onAsynchronousReceive under IceFaces 1.8.x) to reapply our script.

Unfortunately not RichFaces specific:

<h:outputText value="my text" styleClass="doSomethingWithThisAfterDOMUpdate" />

And somewhere in your page markup (we are using jQuery bound to j instead of $):

<script type="text/javascript">

    // do somehting the first time
    j(".doSomethingWithThisAfterDOMUpdate").css('display', 'none'); 

    Ice.onAsynchronousReceive("document:body", function() {

        // do it again after each asynchronous receive
        j(".doSomethingWithThisAfterDOMUpdate").css('display', 'none');
    });
</script>

BUT: Be careful applying listeners to elements in the callback. If the element does not get replaced, you assign the same listeners a second, third, fourth time...

Under JSF2 AJAX became part of the spec. You might have a look at the client side method addOnEvent which could be the generic counter part of Ice.onAsynchronousReceive.

However, not all component frameworks seem to use the client side implementation of the spec to perform their DOM updates (i.e. PrimeFaces).

But I guess the principle becomes clear. You need to rerun the script after the DOM Element got replaced :)

Upvotes: 1

Related Questions