spinner combined with f:ajax fails

tonico · 16 Sep 2010, 16:08

Primefaces 2.2M1, Glassfish 3.1, JSF2

When combining the spinner component with f:ajax, the up/down spinning actions gives a javascript error dialog with the message:

malformedXML: source.getAttribute is not a function

It is noticeable that the numbers do respond to the spinning action for a fraction of a second, then the error pops out and the field content becomes NaN. It appears though that the spinner still remembers/tracks the number value, as spinning still shows the values quickly changing before throwing again the message able.

My spinner is based on this composite implementation:

Code: Select all

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:p="http://primefaces.prime.com.tr/ui"
     xmlns:composite="http://java.sun.com/jsf/composite"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:c="http://java.sun.com/jsp/jstl/core">

    <!-- INTERFACE -->
    <composite:interface>
        <composite:attribute name="id"/>
        <composite:attribute name="label"/>
        <composite:attribute name="size"/>
        <composite:attribute name="value"/>
        <composite:attribute name="valueOriginal"/>
        <composite:attribute name="maxLength"/>
        <composite:attribute name="render" default="true"/>
        <composite:attribute name="converter" default=""/>
        <composite:attribute name="required"  default="false"/>
        <composite:attribute name="immediate"  default="false"/>
        <composite:attribute name="partialSubmit"  default="true"/>
        <composite:attribute name="readonly"  default="true"/>
    </composite:interface>

    <!-- IMPLEMENTATION -->
    <composite:implementation>
        <p:spinner
            showOn="hover"
            id="#{cc.attrs.id}"
            rendered="#{cc.attrs.render}"
            size="#{cc.attrs.size}"
            maxlength="#{cc.attrs.maxLength}"
            immediate="#{cc.attrs.immediate}"
            required="#{cc.attrs.required}"
            value="#{cc.attrs.value}"
            readonly="#{cc.attrs.readonly}"
            disabled="#{cc.attrs.readonly}"
            autocomplete="off"
            >
            <f:ajax event="change" listener="#{mybean.valueChangeListener}" render="@this" />
            </p:spinner>
    </composite:implementation>

</div>

17 Sep 2010, 15:30

Spinner example in showcase has p:ajax and it seems to be working.

http://www.primefaces.org/showcase/ui/spinner.jsf

Can you compare with that.

tonico · 18 Sep 2010, 17:36

I believe it is a different scenario. I cannot use the example/showcase one as it is based on p:ajax and not f:ajax. My need is for f:ajax which contains aspects that I need.

Overall my objective is to invoke a change listener and update the spinner component again, as I have some logic and eventually I can change the style of the spinner based on what happens during the change event. I can achieve this through some other tricks (the spinner has a value change listener, for instance) , but my perspective is that considering that I use the same approach on many other of my composite components, I thought the spinner should also comply and work the same way as others and not throw an exception. The code I pasted above seems valid and if an error occurs I think it is due to some server side or js rendering engine defect.

I have two subsequent related questions:

1) Are there constraints or guidelines about combining primefaces components with native JSF ones such as f:ajax ?
2) p:ajax : is it supported in 2.2M1 ? It appears to me that there is only an id attribute now and nothing else.

18 Sep 2010, 19:03

Following is same;

Code: Select all

<p:spinner id="ajaxspinner" value="#{spinnerController.number6}">
   <p:ajax update="ajaxspinnervalue" process="@this" />
</p:spinner>
<h:outputText id="ajaxspinnervalue" value="#{spinnerController.number6}" style="padding-left:10px"/>

as;

Code: Select all

<p:spinner id="ajaxspinner" value="#{spinnerController.number6}">
   <f:ajax render="ajaxspinnervalue" execute="@this" />
</p:spinner>
<h:outputText id="ajaxspinnervalue" value="#{spinnerController.number6}" style="padding-left:10px"/>

Difference is p:ajax is more powerful/efficient on client side dom manipulation and supports more callbacks in addition to support for ajaxStatus. Still since it is a clientbehavior, PrimeFaces components doesn't know explicitly about p:ajax and f:ajax, they just render their behaviors.

Your IDE is complaining about p:ajax because of;

http://code.google.com/p/primefaces/iss ... il?id=1226

It should work fine.

spinner combined with f:ajax fails

Who is online