Skip to main content

[JSF 2] Problem with CommandLinks in ajax-updated list

5 replies [Last post]
jf7
Offline
Joined: 2010-03-16
Points: 0

Hi,

I have some serious problems getting AJAX to work properly in my JSF2 application. In that application, I have a list of comments for a photo. That list should be managed by either adding new entries via a form or removing existing entries by clicking a link next to that entry.
Adding new entries works perfectly now, the list gets updated and everything's fine. What also works is removing one single entry.

However, as soon as there has been an update to the list, be it either an add or a remove, the command links inside the list stop working properly. The ajax request still goes off, but the list returned is completely empty (JS debug revealed the returned result: <ul></ul>). Also, the action listener defined for the remove link is not fired on the server.
If I add another entry, the list is refreshed correctly again (with the newly added entry), but, of course, as the action listener was not fired, the entry to be deleted before is still there. Completely refreshing the page shows up the page correctly and lets me delete one entry again before things start over.
Here is the according code snippet:

<h:panelGroup id="comments">
<ul>
<ui:repeat var="comment" value="#{ScopedPhoto.entry.comments}">
<li>
<h:form>
<h3>#{comment.title}</h3>
<p>#{comment.comment}</p>
<p>(created @#{comment.created})
<h:commandLink actionListener="#{comment.commitDelete}" value="X">
<f:ajax render=":comments" execute="@form"/>
</h:commandLink>
</p>
</h:form>
</li>
</ui:repeat>
</ul>
</h:panelGroup>

<h:form>

<h2>Add a comment</h2>
<dl>
<dt>Title:</dt>
<dd>
<h:inputText value="#{ScopedPhoto.entry.newComment.title}">

</h:inputText>
</dd>
<dt>Comment:</dt>
<dd>
<h:inputText value="#{ScopedPhoto.entry.newComment.comment}" required="true">

</h:inputText>
</dd>
</dl>
<h:commandButton value="Add Comment" actionListener="#{ScopedPhoto.entry.newComment.commitInsert}" >
<f:ajax render=":comments" execute="@form"/>
</h:commandButton>
</h:form>

So I hope anyone has an idea how to fix this =)

Message was edited by: jf7

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Lincoln Baxter, III

Are you using custom JS code on your page? This can occur if there is a
script error, and JS stops executing. I ran into this bug once and it turned
out to be my bad JS code ;)

On Tue, Mar 16, 2010 at 11:48 AM, wrote:

> Hi,
>
> I have some serious problems getting AJAX to work properly in my JSF2
> application. In that application, I have a list of comments for a photo.
> That list should be managed by either adding new entries via a form or
> removing existing entries by clicking a link next to that entry.
> Adding new entries works perfectly now, the list gets updated and
> everything's fine. What also works is removing one single entry.
>
> However, as soon as there has been an update to the list, be it either an
> add or a remove, the command links inside the list stop working properly.
> The ajax request still goes off, but the list returned is completely empty
> (JS debug revealed the returned result:

    ). Also, the action
    > listener defined for the remove link is not fired on the server.
    > If I add another entry, the list is refreshed correctly again (with the
    > newly added entry), but, of course, as the action listener was not fired,
    > the entry to be deleted before is still there. Completely refreshing the
    > page shows up the page correctly and lets me delete one entry again before
    > things start over.
    > Here is the according code snippet:
    >
    >
    >

      > > value="#{ScopedPhoto.entry.comments}">
      >
    • >
      >
      >

      #{comment.title}

      >
      >

      #{comment.comment}

      >

      (created
      > @#{comment.created})
      >
      >
      >
      >
      >
      >

      >

      >
      >

    • >
      >

    >
    >
    >
    >
    >

    Add a comment

    >

    >
    Title:

    >

    > > value="#{ScopedPhoto.entry.newComment.title}">
    >
    >
    >

    >

    Comment:

    >

    > > value="#{ScopedPhoto.entry.newComment.comment}" required="true">
    >
    >
    >

    >

    > > actionListener="#{ScopedPhoto.entry.newComment.commitInsert}" >
    >
    >

    >
    >
    >
    > So I hope anyone has an idea how to fix this =)
    > [Message sent by forum member 'jf7' (javafrog@javafrog.de)]
    >
    > http://forums.java.net/jive/thread.jspa?messageID=392185
    >
    > ---------------------------------------------------------------------
    > To unsubscribe, e-mail: webtier-unsubscribe@glassfish.dev.java.net
    > For additional commands, e-mail: webtier-help@glassfish.dev.java.net
    >
    >

    --
    Lincoln Baxter, III
    http://ocpsoft.com
    http://scrumshark.com
    "Keep it Simple"
    [att1.html]

    jf7
    Offline
    Joined: 2010-03-16
    Points: 0

    Thanks for the answer, but no, I do not yet have any JS code on my page.
    The behavior seems very odd to me, because if I look at the DOM tree after an update (which, as I said, will shatter my delete links) and after a page refresh (which restores them), the links with their component IDs and all the strange stuff inside ;) is exactly the same, like this:

    <a xmlns="http://www.w3.org/1999/xhtml" id="j_idt13:2:j_idt15:j_idt17" href="#" onclick="mojarra.ab(this,event,'action','@form','comments');return false">X</a>

    jf7
    Offline
    Joined: 2010-03-16
    Points: 0

    Some more info on this:

    After some extensive JS debugging, I found out that the ViewState is not submitted with subsequent "delete" requests. The reason for this is that, with the update, the [i]hidden form field "javax.faces.ViewState" is not embedded[/i], for a reason I cannot understand.
    It is probably that missing form field that destroys my subsequent requests, still the question is [b]why is it missing[/b]?

    tij651
    Offline
    Joined: 2010-03-26
    Points: 0

    Got the same problem here with CommandButtons. No ViewState is submitted after the first response. At the subsequent request it's there.

    The problem here is that I used 2 different forms - putting the components into a single form will show the expected (correct) behaviour.

    [b]index.xhtml[/b] (fails):
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">

















    [b]index.xhtml[/b] (ok):
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">















    [b]Bean.java:[/b]
    import java.io.Serializable;
    import javax.enterprise.context.SessionScoped;
    import javax.inject.Named;

    @Named
    @SessionScoped
    public class Bean implements Serializable {

    private boolean value;

    public boolean isValue() {
    return value;
    }

    public void setValue(boolean value) {
    this.value = value;
    }

    public void setTrue() {
    value = true;
    }

    public void setFalse() {
    value = false;
    }
    }

    jf7
    Offline
    Joined: 2010-03-16
    Points: 0

    Thanks for your input, had already forgotten this thread =)
    I have sorted it out by myself in a similar fashion. The problem was that I generated forms inside of ui:repeat. Obviously, there is some crazy bug that occurs in this situation. Once I put the form around the ui:repeat, everything would work.