"div loading" servlet

Question

"div loading" servlet

Navigation

#1 by (2 votes)

3

I have a screen that has the function of sending a file to the server via servlet but since this file can be large, I needed a panel or a div with a load gif. I'm using richfaces, already tried to use popupPanel , div and give sendRedirect to another page while running the 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

asked by anonymous 12.11.2014 / 19:17

1 answer

Date format problems Verify that the process is running without encountering a limit of 15 characters

score 2 · Answer 1

I made an adaptation of this response with your code.

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

After you receive the file, just redirect the request if the download does not automatically add afterwards. ;)

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>