Unable to get <p:ajaxStatus to work

Crystal · 25 Jul 2010, 09:02

Hello!

Why am I coding at 3AM!

I can pull up the ajax-loader.gif on my browser directly using http://localhost:8080/UI/faces/resource ... loader.gif
I can't get it to work in my application. To simulate a server delay I put this in the bean:
Thread.currentThread().sleep(8 * 1000);

What do I need to do to get the ajax-loader working?

createBox.xhtml

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                template="/templates/BoxLayout.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="center">
        <h:form prependId="false">
            <p:ajaxStatus style="height:19px;width:220px;">
                <f:facet name="start">
                    <h:graphicImage value="/resources/images/ajax-loader.gif" />
                </f:facet>
                <f:facet name="complete">
                    <h:outputText value="complete" />
                </f:facet>
            </p:ajaxStatus>
            <p:messages id="msgs" showDetail="true" showSummary="false" rendered="#{create.renderMessage}"/>
            <p:focus/>
            <h:panelGrid id="grid" columns="3">
                <h:outputText value="Manufacturer" />
                <h:inputText id="manufacturer" value="#{create.manufacturer}" required="true"/>
                <p:message for="manufacturer"/>
                <h:outputText value="Serial Number"/>
                <h:inputText id="serialNumber" value="#{create.serialNumber}" required="true"/>
                <p:message for="serialNumber"/>
                <h:outputText value="Part Number" />
                <h:inputText id="partNumber" value="#{create.partNumber}" required="true"/>
                <p:message for="partNumber"/>
            </h:panelGrid>
            <h:commandButton value="Submit" action="#{create.createBox}"/>
        </h:form>
    </ui:define>
</ui:composition>

Thanks for the continued help!!
:sleeping smiley:

callahan · 25 Jul 2010, 09:33

Hi,

Try:

<h:graphicImage value="#{request.contextPath}/UI/resources/images/ajax-loader.gif" />

However, I still don't think you'll see it because there doesn't appear to any PrimeFaces components on your page that make ajax requests!

Have a good sleep!!!

Crystal · 25 Jul 2010, 19:29

That didn't work like you said.
Hmm..newbie trying to figure this stuff out. I'll look for an AJAX component to use. If you have a suggestion of one please let me know.
Thanks!

Crystal · 25 Jul 2010, 19:39

What is the AJAX component in the code for the Messages Showcase?
http://www.primefaces.org:8080/prime-sh ... ssages.jsf

Is some code missing? That is the example I have been working off of.

callahan · 25 Jul 2010, 19:48

Hi Again,

Sorry, I should have typed <h:graphicImage value="#{request.contextPath}/faces/resources/images/ajax-loader.gif" />
i.e., everything form the path, except that the first bit is replaced by #{request.contextPath}

The showcase example you're working off uses the p:commandButton. You could also use it to test your p:ajaxStatus. Currently you're using h:commandButton which is not quite the same.

Just in case you haven't seen it yet, the entire showcase can be downloaded from a link at the bottom of the following page http://www.primefaces.org/downloads.html

Crystal · 25 Jul 2010, 20:20

I fixed my code to use <p:commandButton like in the example. It's still not working. I'm not really sure what to try next. Thanks!

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                template="/templates/BoxLayout.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="center">
        <p:ajaxStatus style="height:19px;width:220px">
                <f:facet name="start">
                    <!--<h:graphicImage value="/resources/images/ajax-loader.gif" />-->
                    <h:graphicImage value="#{request.contextPath}/faces/resources/images/ajax-loader.gif" />
                </f:facet>
                <f:facet name="complete">
                    <h:outputText value="complete" />
                </f:facet>
            </p:ajaxStatus>
        <h:form prependId="false">
            <p:messages id="msgs" showDetail="true" showSummary="false" rendered="#{create.renderMessage}"/>
            <!--<p:focus/>-->
            <h:panelGrid id="grid" columns="3">
                <h:outputText value="Manufacturer" />
                <h:inputText id="manufacturer" value="#{create.manufacturer}" required="true"/>
                <p:message for="manufacturer"/>
                <h:outputText value="Serial Number"/>
                <h:inputText id="serialNumber" value="#{create.serialNumber}" required="true"/>
                <p:message for="serialNumber"/>
                <h:outputText value="Part Number" />
                <h:inputText id="partNumber" value="#{create.partNumber}" required="true"/>
                <p:message for="partNumber"/>
            </h:panelGrid>
            <p:commandButton value="Submit" action="#{create.createBox}" update="grid"/>
        </h:form>
    </ui:define>
</ui:composition>

Crystal · 25 Jul 2010, 20:32

It works now. I moved the AJAX outside the form and put it on top. I know I tried that before and it didn't work. I also broke my messages up into two forms... trying to resolve a different issue.. but now the AJAX progress bar works. Thanks!

working code

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                template="/templates/BoxLayout.xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core">
    <ui:define name="center">
        <p:ajaxStatus style="height:19px;width:220px">
            <f:facet name="start">
                <h:graphicImage value="/resources/images/ajax-loader.gif" />
                <!--<h:graphicImage value="#{request.contextPath}/faces/resources/images/ajax-loader.gif" />-->
            </f:facet>
            <f:facet name="complete">
                <h:outputText value="complete" />
            </f:facet>
        </p:ajaxStatus>
        <h:form prependId="false">
            <p:messages id="msgs" showDetail="true" showSummary="false"/>
        </h:form>
        <h:form prependId="false">
            <h:panelGrid id="grid" columns="3">
                <h:outputText value="Manufacturer" />
                <h:inputText id="manufacturer" value="#{create.manufacturer}" required="true"/>
                <p:message for="manufacturer"/>
                <h:outputText value="Serial Number"/>
                <h:inputText id="serialNumber" value="#{create.serialNumber}" required="true"/>
                <p:message for="serialNumber"/>
                <h:outputText value="Part Number" />
                <h:inputText id="partNumber" value="#{create.partNumber}" required="true"/>
                <p:message for="partNumber"/>
            </h:panelGrid>
            <p:commandButton value="Submit" action="#{create.createBox}" update="grid"/>
        </h:form>
    </ui:define>
</ui:composition>

callahan · 25 Jul 2010, 21:49

By the way, the stuff I suggested above with #{request.contextPath} isn't correct for the graphicImages value attribute, but you've spotted that already. It works the way I suggested on other tags such as the value attribute outputLink tag! Ah well.

Unable to get <p:ajaxStatus to work

Who is online