"div loading" Servlet

Asked

Viewed 99 times

3

I have a screen that has the function of sending a file to the server via servlet but since this file might be big, I needed to put a panel or a div with a gif of load. I’m wearing richfaces, I’ve tried using popupPanel, div and give sendRedirect to another page while running Servlet but nothing worked. Could someone help me?

HTML

<body>
<div id="templete">
    <ui:include src="templete.xhtml" />
</div>
<form method="post" enctype="multipart/form-data" action="/produto-web/FileUploadServlet"> 

    <div id="divUpload">
        Selecione um arquivo : <input type="file" style="width: 435px;" id="file" name="file" size="45" />
        <input type="submit" class="Button" value="Enviar Arquivo" />               

        <p style="color: red;" >${messageError}</p>
        <p style="color: Green;" >${messageSucess}</p>
    </div>

</form>

java-ee servlet rich-faces

  • Tip: Use the rich:Fileupload and a bean Managed to receive the files. This componenete already displays a status bar on upload.

  • @Anthonyaccioly .

  • I understand, I don’t want to pollute your question if your decision is already made. That being said, 99% of the time the problem with this component is a lack of libraries or some filter that is interfering with the application (Glassfish is especially problematic -https://issues.jboss.org/browse/RF-11988). You can also use the fileUpload of the Primefaces (the Richfaces and the Primefaces are not mutually exclusive)

  • @Anthonyaccioly also thought about it, only that on this issue is already my boss who does not want the use of Primefaces

1 answer

2

I made an adaptation of that reply with your code.

I added an Event onclick on your button that will display the loading and the div loading is just below the input.

After you receive the file just redirect the request if loading does not disappear automatically after. ;)

function showLoading() {
	    document.getElementById('loading-div-background').style.display = '';
}
#loading-div-background{
	position: fixed;
	top: 0;
	left: 0;
	background: #fff;
	width: 100%;
	height: 100%;
}

#loading-div{
	width: 300px;
	height: 150px;
	background-color: #fff;
	border: 5px solid #1468b3;
	text-align: center;
	color: #202020;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -100px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	behavior: url("/css/pie/PIE.htc"); /* HANDLES IE */
}
<form method="post" enctype="multipart/form-data" action="/produto-web/FileUploadServlet"> 

    <div id="divUpload">
        Selecione um arquivo : <input type="file" style="width: 435px;" id="file" name="file" size="45" />
        <input type="submit" onclick="showLoading();" class="Button" value="Enviar Arquivo" />               

        <p style="color: red;" >${messageError}</p>
        <p style="color: Green;" >${messageSucess}</p>
    </div>
    
    <div id="loading-div-background" style="display: none">
        <div id="loading-div" class="ui-corner-all">
            <br/>
            Carregando...
        </div>
    </div>
    
</form>

Browser other questions tagged java-ee servlet rich-faces

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