JSF h:inputFiIe and f:ajax

Question

I am a little confused. I try to make simple example, where we can upload file from xhtml page and while uploading file the something.jpg will be displayed. And I do this:

<h:outputScript library="javascript" name="showProgres.js" />
<h:outputScript library="javascript" name="prototype-1.6.0.2.js"/>

<h:form id="form" prependId="false" enctype="multipart/form-data">
<h:panelGrid  columns="2">
<h:inputFile id="upload1" value="#{demoBean.file1}">
<f:ajax onevent="com.corejsf.showProgres" render="@form" />
</h:inputFile>

<h:graphicImage id="pole" library="images" name="orange-barber-pole.gif"
style="display: none"/>


<h:commandButton action="#{demoBean.upload()}" value="upload"></h:commandButton>
</h:panelGrid> 
</h:form>

And in resources directorium I have showprogres.js file. With showProgres function like this:

if(!com) var com = {};

if(!com.corejsf) {
    com.corejsf = {
        showProgres:    function(data){
        var inputId = data.source.id;
        var progresBarid = inputId.substring(0,
                   inputId.length - "upload2".length) + "pole";
        if(data.status == begin)
                Element.show(progresBarid);
        else if (data.status == success)
            Element.hide(progresBarid);
        }
    }
};

When I start sample on glassfish result is for me unexpected. Something like this (on whole xhtml page without error):

This XML file does not appear to have any style information associated with it. The document tree is shown below.

<partial-response id="j_id1">
<changes>
<update id="j_id1:javax.faces.ViewState:0">
<![CDATA[ -3528225672520671936:9111168294196781686 ]]>
</update>
</changes>
</partial-response>

Have anyone idea what happen? I have not any error. Without ajax every is fine(upload works).

Answer 1

So if you don't want to to dynamically update the "progress bar", you could just show your image with an onclick handler like so:

<h:form id="uploadForm" enctype="multipart/form-data">
    <h:inputFile id="upload1" value="#{demoBean.file1}" />

    <h:graphicImage id="pole" library="images" name="orange-barber-pole.gif"
         style="display: none"/>

    <h:commandButton action="#{demoBean.upload()}" value="upload"
         onclick="Element.show('uploadForm:pole');" />
</h:form>

No ajax functionality required. I haven't tried, but my guess is that the behavior you're seeing comes from rendering the form while it's being submitted, ie if you have <f:ajax render="pole" /> that should let you continue the submit.