Search code examples
javascriptjsfprimefacesjava-ee-6

Primefaces BlockUI doesn't work


I have a Problem with Primefaces BlockUI. After i click on the p:commandButton the form is updated and it shows the correct things, but the blockUI doesn't hide the form. I found out there are several Problems with blockUI and p:commandButtons which uses update.

<h:form id="form">
  <h:panelGroup id="askInput">
    <p:inputTextarea id="sparql" value="#{connect.query}" rows="10"
        cols="80" rendered="#{resultController.askStatus}"
        styleClass="width size" />
    <p:watermark for="sparql" value="Ask your Questions here..."
        rendered="#{resultController.askStatus}" />
    <h:panelGroup rendered="#{!resultController.askStatus}">
        <p:dataTable var="result" value="#{resultController.maps}"
            scrollRows="20" scrollable="true" scrollHeight="500"
            id="results">
            <p:columns value="#{resultController.header}" var="column">
            <f:facet name="header"> #{column}</f:facet>
            <h:outputText value="#{result[column]}" styleClass="size" />                                          
                        </p:columns>
                    </p:dataTable>
    </h:panelGroup>

    <p:commandButton value="Search More NOW" id="searcher"
            actionListener="#{resultController.setRs(connect.result())}"
            update="form" styleClass="btn btn-primary width" />

    <p:blockUI  widgetVar="dlg" block="form" trigger="searcher">
            LOADING<br />
        <p:graphicImage value="./images/ajax-loader.gif" />
    </p:blockUI>
</h:panelGroup>                     
</h:form>

Now i found something interesting in the deployed xhtml page:

 <script id="form:j_idt31_s" type="text/javascript">
      $(function()    
          {PrimeFaces.cw('BlockUI','dlg', 
             {id:'form:j_idt31',block:'form',triggers:'form:searcher'});});
 </script>

And

<button id="form:searcher" name="form:searcher" 
    class="ui-button ui-widget ui-state-default ui-corner-all 
    ui-button-text-only btn btn-primary width" 

    onclick="PrimeFaces.ab({source:'form:searcher',update:'form'});return false;" 

   type="submit">
   <span class="ui-button-text ui-c">Search More NOW</span>
</button>

If i copy the function of the script in the javascript console of my browser execute it. After that exectue the onclick function of the button in the console. everything works. So my guess is that the script isn't load and therefore it can't be invoked. So any idea how i can invoke it by myself?

If you need anything else i will put it here ;)

THANKS ALOT IN ADVANCE :)


Solution

  • FINALLY FOUND THE ANSWER :)

    I had a jquery.js file under my resources. Primefaces provides a jquery.js itself.

    After i deleted the jquery.js everything works :)