0

Estou tentando mostrar uma imagem de carregamento em minha páginas usando estas funções:

$(document).ready(function(){
    $(".loading").hide();
    $.unblockUI();

    $(".menuLink").focus(function() {
        $(this).addClass('link-menu-selected');
    });

    $(".menuLink").blur(function() {
        $(this).removeClass('link-menu-selected');
    });

});

$(window).bind('beforeunload',function(){
    $(".loading").show();
    $.blockUI({message: null});
});

function exportFile(){
    $('.loading').hide();
    $.unblockUI();

}

Mas, a imagem não aparece, ou seja, as páginas estão carregando corretamente sem exibir a imagem, alguém sabe o que estaria ocorrendo de errado, ou, se há outras maneiras de executar isso ?

Não aparece nenhum erro no console, coloquei ela em meu JS principal de carregamento, um JS único onde centralizo todas as minhas funções.

Existem outras formas de se fazer essa execução de uma maneira eficiente ?

Eu adiciono as seguintes "bibliotecas" também:

<script type="text/javascript" src="/sign/resources/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/sign/resources/js/jquery.blockUI.js"></script>
    <script type="text/javascript" src="/sign/resources/js/renderAjax.js"></script>

Adiciono isso há uma página de template, "header", que todas as páginas da minha aplicação utilizam:

<ui:composition template="/layout/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"

Ou seja, queria fazer isso de uma maneira generalizada, de uma forma que todas as páginas da minha aplicação herdassem essa função "wait", exibindo assim essa imagem.

Quero fazer isso, mas não em php, em JSF2:

https://stackoverflow.com/questions/3535020/show-image-while-page-is-loading

4
  • Qual mensagem de erro aparece no log do navegador? Execute a pagina e clique em F12 e poste a mensagem de erro aqui Commented 2/10/2015 às 15:53
  • Poste o código completo de forma que possamos testar tudo. Commented 2/10/2015 às 15:54
  • Esse é o código completo, a única coisa há mais nessa função é que adiciono as seguintes "bibliotecas" js <script type="text/javascript" src="/sign/resources/js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="/sign/resources/js/jquery.blockUI.js"></script> <script type="text/javascript" src="/sign/resources/js/renderAjax.js"></script> Commented 2/10/2015 às 15:57
  • Eu me refiro ao código HTML completo, isso ai é só a função, se você postar tudo ai, da para executar aqui e talvez chegarmos a solução. Commented 2/10/2015 às 15:58

1 Resposta 1

1

Eu finalizei usando alguns componentes do RichFaces, eu criei um novo xthml "commandButton.xhtml":

<?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">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:a4j="http://richfaces.org/a4j" 
    xmlns:cc="http://java.sun.com/jsf/composite">

    <cc:interface>
        <cc:attribute name="action" targets="cmdBtn" />
        <cc:attribute name="readOnly" />
        <cc:attribute name="disable" />
        <cc:attribute name="immediate" />
        <cc:attribute name="styleClass" default="btn btn-primary span2" />
        <cc:attribute name="style" />
        <cc:attribute name="value" />
        <cc:attribute name="render" default=""/>
    </cc:interface>


    <cc:implementation>

        <h:commandButton id="cmdBtn" immediate="#{cc.attrs['immediate']}"
            disabled="#{cc.attrs['disable']}" type="submit"
            readonly="#{cc.attrs['readonly']}" style="#{cc.attrs['style']}"
            styleClass="#{cc.attrs['styleClass']}" value="#{cc.attrs['value']}">
            <a4j:ajax render="#{cc.attrs['render']}" execute="@form" status="waitStatus"/>
        </h:commandButton>

    </cc:implementation>
</ui:composition>

Coloquei isso no meu "template.xhtml", todas as páginas da minha aplicação importam esse template:

<a4j:status name="waitStatus"
        onstart="#{rich:component('wait')}.show();"
        onstop="#{rich:component('wait')}.hide();" />
    <rich:popupPanel id="wait" autosized="true" modal="true"
        moveable="false" resizeable="false" zindex="2005">
        <h:graphicImage id="imgWait" library="images" name="wait.gif"
            styleClass="hidelink" />
    </rich:popupPanel>

Assim eu importei isso em todas as minhas páginas:

xmlns:comp="http://java.sun.com/jsf/composite/components"

E usei dessa forma:

<comp:commandButton styleClass="btn btn-primary span2 offset8" value="Calculate" action="#{myBean.calculate}" />

Isso funcionou bem para mim, o uso de JavaScript estava causando alguns travamentos nas minha páginas.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .