I'm trying to display a shopping cart in my application (Seam/RichFaces), and have included a "remove from cart" <a4j:commandLink />
next to each item to remove the item from the cart. When I click the link it is supposed to rerender the cart contents to show that the item has been removed. However, when I click the link, nothing happens. The cart is backed by an ArrayList in my action that contains the items. I can see the call in my action, so I know the item has been removed -- and, if I refresh the page I see it has been removed. Am I doing something wrong in my code below that is causing this section of the page not to rerender properly?
UPDATE: It seems as though it will rerender properly, but not in all circumstances. If I've got more than 1 item in my cart and remove any item but the most recently added item it rerenders properly. If I only have one item in the cart, or I try and remove the most recently added item, it fails to rerender anything. Any thoughts on what's going on here??
<s:div styleClass="cart_bag" rendered="#{identity.loggedIn}">
<h6 class="head"><h:outputText value="Your Shopping Cart" /><a:status
forceId="true" id="shoppingCartStatus">
<f:facet name="start">
<h:graphicImage value="/images/ajax-loader.gif" styleClass="right" />
</f:facet>
</a:status></h6>
<s:div id="shoppingCartItems">
<s:fragment
rendered="#{shoppingCart.shoppingCartContents.size() le 0}">
<p><s:span styleClass="bold">
<h:outputText style="color: #FFF;"
value="Your shopping cart is empty" />
<br />
<br />
<br />
</s:span></p>
</s:fragment>
<s:fragment
rendered="#{shoppingCart.shoppingCartContents.size() gt 0}">
<h:form>
<ul>
<ui:repeat value="#{shoppingCart.shoppingCartContents}"
var="cartItem">
<li><s:div styleClass="thumb">
<a href="detail.html"><img src="../images/cart_thumb.gif"
alt="" /></a>
</s:div> <s:div styleClass="desc">
<s:link view="/index.xhtml" styleClass="bold"
value="#{cartItem.name}">
<f:param name="ctxid" value="#{cartItem.uniqueIdentifier}" />
</s:link>
<p><span class="bold">Unit Price:</span> $629</p>
</s:div><a:commandLink id="removeItemFromCartBtn"
action="#{shoppingCart.removeFromShoppingCart()}"
styleClass="cros" reRender="shoppingCartItems"
status="shoppingCartStatus">
<f:param name="ctxid" value="#{cartItem.uniqueIdentifier}" />
<h:graphicImage value="/images/remove.png" />
</a:commandLink></li>
</ui:repeat>
</ul>
</h:form>
</s:fragment>
</s:div>
<s:div styleClass="clear"></s:div>
<s:fragment
rendered="#{shoppingCart.shoppingCartContents.size() gt 0}">
<p class="total left bold"><h:outputText
value="Total: #{shoppingCart.shoppingCartTotal}" /></p>
<a href="cart.html" class="crtbtn right"><span>Checkout</span></a>
</s:fragment>
</s:div>
Solved. I wrapped the offending JSF code in a <a4j:outputPanel ajaxRendered="true" />
and everything began working as expected.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With