Question

I’ve got a List of Posts loaded in a dataTable and I’ve got a form to add a new Post to the “wall”.

I’d like to do something like Facebook’s wall so, when I insert a new Post, I’d like to have a fading effect when it appears.

I’ve tried using PrimeFaces’ effects, but it will apply the effect to the whole DataTable, so I thought of using a simple JQuery script, but I don’t know how to do it.

Here’s a simple code of my last try (that doesn’t work !):

<script type="text/javascript">  
        function animateNewPost(id) {                 
            jQuery('#post_' +id).effect("slide", { direction: "right" }, 2000);                
        }  
    </script>
[cut]
<p:commandLink ajax="true" action="#{postBean.insertPost(loginBean.user)}" value="Insert Post" update=":postMessage, :postList, :postForm" oncomplete="animateNewPost(#{lazyPostBean.posts.get(0).getIdPost()})"/>
[cut]
 <p:dataTable id="postTable" var="post" value="#{lazyPostBean.posts}">
                    <p:column style="border: 0px; background: rgba(0,0,0,0);">                            
                        <div class="feature">                                
                            <div class="post_#{post.idPost}">                                
                                [POST CONTENT]           
                            </div>
                        </div>
                    </p:column>                                              
                </p:dataTable>

What should I have to do?

EDIT: id is correctly passed to the javascript function, and the HTML output for the Post’s div is

<div class="post_24">

So I guess that it’s right.

Answer 1

for start you should fix your jquery selector from # which is aimed to ID of element into . (single dot) that refer to class like this jQuery('.post_

class selector