Javascript upload image (GIF)?

Asked

Viewed 610 times

0

I am trying to show a loading image on my pages using these functions:

$(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();

}

But, the image does not appear, IE, the pages are loading correctly without displaying the image, someone knows what would be wrong, or if there are other ways to perform this ?

No error appears in the console, I put it in my main JS loading, a single JS where I centralize all my functions.

There are other ways of doing this in an efficient way ?

I add the following "libraries" as well:

<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>

I add this there is a template page, "header", that all pages of my application use:

<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"

That is, I wanted to do it in a generalized way, in a way that all the pages of my application would inherit this "Wait" function, thus displaying this image.

I want to do this, but not in php, in JSF2:

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

javascript java jquery jsf

  • Which error message appears in the browser log? Run the page and click F12 and post the error message here

  • Post the full code so we can test everything.

  • This is the complete code, the only thing there is more to this function is to add the following "libraries" 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>

  • I refer to the complete HTML code, that’s just the function, if you post everything there, da to run here and maybe we get the solution.

1 answer

1


I finished using some components of Richfaces, I created a new 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>

I put this in my "template.xhtml", all my application pages import this 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>

So I imported it into all my pages:

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

And I used it that way:

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

This worked well for me, the use of Javascript was causing some crashes in my pages.

Browser other questions tagged javascript java jquery jsf

You are not signed in. Login or sign up in order to post.