Publicado em 24 de set.

Msg carregando com Jquery e Servlet

Pessoal

Crie uma função com jquery para quando eu apertar um botão eu abro uma mensagem e aparece a imagem carregando... blz....

Só que... quando tenho o retorno do servlet, não sei como retirar essa imagem e mensagem de carregando.

 <span id="MsgAguarde" style="display:none; font-size:11px;">
 <img src="./img/loading.gif" alt="Aguarde.." /><br />
 Aguarde...
 </span>

<div id="btnBaixar"><a href="javascript: if (confirm('Deseja Realmente Gerar a Planilha?')) {alert('Ao clicar em OK, Aguarde Gerar o Relatório'); window.location.href='ServletMedGraf?dadosMedGrafRetorno=${dadosMedGrafRetorno}&v=${v}'} else { void('') };"><input type="button" onclick="disabled = true" id="btnBaixarArq" value="Baixar Arquivo"></a></div>

$().ready(function () {
 $('#btnBaixarArq').show();
 $('[id$=btnBaixarArq]').click(function () {
 $('#MsgAguarde').show();
 });
 });

tentei usar o jstl para setar no get (dentro do servlet) para verificar se está diferente de nulo ai eu enviaria outro comando via jquery para esconder a mensagem... mas não estou conseguindo:

Testes:

// SETO NO SERVLET ASSIM: request.setAttribute("carregando", "CARREGADO");

 <c:when test="${ carregando eq null }">
 <span id="MsgAguarde" style="display:none; font-size:11px;">
 <img src="./img/loading.gif" alt="Aguarde.." /><br />
 Aguarde...
 </span>
 </c:when>
 <c:when test="${ carregando eq 'CARREGADO' }">
 <script type="text/javascript">
 $().ready(function () {
 $('#MsgAguarde').hide();

 });
 alert("HERE");
 </script>
 </c:when>
</c:choose>

Na verdade eu queria tentar fazer uma ação no botão com jquery para enviar os dados (que eu não sei como pegar os parâmetros por exemplo dadosMedGrafRetorno=${dadosMedGrafRetorno}) para o servlet e tratar essa da imagem com isso. e não a gambiarra que estou fazendo com a href

Discussão (8)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

rdpacato· 24 de set.

Tentei algo como :

	var dataString ={"dadosMedGrafRetorno":dadosMedGrafRetorno,"v":v,"dataIni":dataIni,"dataFin":dataFin,"horaIni":horaIni,"horaFin":horaFin};
	$().ready(function () {
 $('[id$=btnBaixarArq]').click(function () {
 $('#MsgAguarde').show();
 $.ajax({
 type: "GET",
 url: "ServletMedGraf",
 data: dataString,
 contentType: "application/json",
 async: false,
 success: function (data) {
 $("#response").html(data.d);
 $('#MsgAguarde').hide();
 }

 });
 });
 });

William Bruno· 24 de set.

Qual foi a dificuldade com essa tua última tentativa ?

rdpacato· 2 de out.

Usei o "inspecionar elemento do chrome, e ele acusa que as variáveis não estão preenchidas, então não funciona a variável dataString

Consegui assim:

	var dataString ={"dadosMedGrafRetorno":'${dadosMedGrafRetorno}',"v":'${v}',"dataIni":'${dataIni}',"dataFin":'${dataFin}',"horaIni":'${horaIni}',"horaFin":'${horaFin}'};	$().ready(function () { $('[id$=btnBaixarArq]').click(function () { $('#MsgAguarde').show(); $.ajax({ type: "GET", url: "ServletMedGraf", data: dataString, contentType: "application/json", async: false, success: function (data) { $("#response").html(data.d); $('#MsgAguarde').hide(); } }); }); });

Só que não está apresentando a imagem, chamando o #MsgAguarde e também, não está retornando o arquivo para salvar...

Se eu tiro esse item (async: false,) aparece a imagem... mas quando da o tempo de retorno do arquivo, ele não retorna o arquivo, mas some a imagem corretamente.

Assim que retorno o arquivo do servlet:

response.setHeader("Content-Disposition", "filename=" + arq.getName()); response.setContentType("application/vnd.ms-excel"); ServletOutputStream out; out = response.getOutputStream(); FileInputStream fin = new FileInputStream(arq); BufferedInputStream bin = new BufferedInputStream(fin); BufferedOutputStream bout = new BufferedOutputStream(out); int ch =0; while((ch=bin.read())!=-1) { bout.write(ch); } bin.close(); fin.close(); bout.close(); out.close(); arq.delete(); } }

rdpacato· 6 de out.

Oi William, vc saberia o que pode ser de errado?

Falta essa parte de retorno para

reebr· 7 de out.

Seria melhor pedir a um moderador que mova o seu tópico para a área de Javascript visto que o problema no momento é com JQuery e ajax.

rdpacato· 9 de out.

vc poderia fazer isso rnxn? por favor?

Situação atual:

Esta mostrando a mensagem e quando tem o retorno ela fecha... ok, assim que quero.. só está faltando trazer a opção de salvar o relatório...

JSP:

 <div id="btnBaixar"><input type="button" onclick="disabled = true" id="btnBaixarArq" value="Baixar Arquivo"></div>	</td>	<br>	<span id="MsgAguarde" style="display:none; font-size:11px;"> <img src="./img/loading.gif" alt="Aguarde..." /><br /> Aguarde...	</span>var dataString ={"dadosMedGrafRetorno":'${dadosMedGrafRetorno}',"veiculo":'${veiculo}',"dataIni":'${dataIni}',"dataFin":'${dataFin}',"horaIni":'${horaIni}',"horaFin":'${horaFin}'};	$().ready(function () { $('[id$=btnBaixarArq]').click(function () { $('#MsgAguarde').show(); $.ajax({ type: "GET", url: "ServletMedGraf", data: dataString, contentType: "application/json", success: function (data) { $().html(data.d); $('#MsgAguarde').hide(); } }); }); });

No servlet gero o arquivo assim:

Alguém?? não sei como retornar o sucesso...

Alguma indicação de material, sei la...

rdpacato· 14 de out.

Fiz uma gambiarra, chamo o servlet com o jquery e com o botão... só que no IE não funciona... só funciona como mostrei antes, assim:

<div id="btnBaixar"><a href="javascript: if (confirm('Deseja Realmente Gerar a Planilha?')) {alert('Ao clicar em OK, Aguarde Gerar o Relatório'); window.location.href='ServletMedGraf?dadosMedGrafRetorno=${dadosMedGrafRetorno}&grama=${grama}&dataIni=${dataIni}&dataFin=${dataFin}&horaIni=${horaIni}&horaFin=${horaFin}';">input type="button" onclick="disabled = true" id="btnBaixarArq" value="Baixar Arquivo"></a></div>

Onde passo os dados para o servlet...

Já no Chrome, consegui chamar os dois dessa maneira:

<div id="btnBaixar"><a href="javascript: window.location.href='ServletMedGraf?dadosMedGrafRetorno=${dadosMedGrafRetorno}&grama=${grama}&dataIni=${dataIni}&dataFin=${dataFin}&horaIni=${horaIni}&horaFin=${horaFin}';"><input type="button" id="btnBaixarArq" value="Baixar Arquivo"></a></div>

<span id="MsgAguarde" style="display:none; font-size:11px;">
 <img src="./img/loading.gif" alt="Aguarde..." /><br />
 Aguarde...
 </span>

E a função jquery:

var dataString ={"dadosMedGrafRetorno":'${dadosMedGrafRetorno}',"veiculo":'${veiculo}',"dataIni":'${dataIni}',"dataFin":'${dataFin}',"horaIni":'${horaIni}',"horaFin":'${horaFin}'};
	$().ready(function () {
 $('[id$=btnBaixarArq]').click(function () {
 $('#MsgAguarde').show();
 document.getElementById('btnBaixarArq').disabled = true;
 $.ajax({
 type: "GET",
 url: "ServletMedGraf",
 data: dataString,
 contentType: "application/json",
 success: function (data) {
 $('#MsgAguarde').hide();
 document.getElementById('btnBaixarArq').disabled = false;
 return data;
 }

 });
 });
 });

Não deve ser a melhor forma, mas foi a que atendeu (parcialmente) preciso saber pq não funciona no IE, pois nem a imagem de carregando ele mostra e não envia os dados para o servlet

rdpacato· 20 de out.

Resolvi assim:

Para funcionar no IE tbm deixei chamando os dois ao mesmo tempo, jquery, e enviando pelo botão

	<div id="btnBaixar"><input type="button" id="btnBaixarArq" value="Baixar Arquivo" onClick="javascript:if (confirm('Deseja Realmente Gerar a Planilha?')) {window.location.href='ServletMedGraf?dadosMedGrafRetorno=${dadosMedGrafRetorno}&v=${v}&dataIni=${dataIni}&dataFin=${dataFin}&horaIni=${horaIni}&horaFin=${horaFin}'; carregando();} else { void('') };"></div>

	<span id="MsgAguarde" style="display:none; font-size:11px;">
 <img src="./img/loading.gif" alt="Aguarde..." /><br />
 Aguarde...
	</span>

var dataString ={"dadosMedGrafRetorno":'${dadosMedGrafRetorno}',"v":'${v}',"dataIni":'${dataIni}',"dataFin":'${dataFin}',"horaIni":'${horaIni}',"horaFin":'${horaFin}'};
function carregando() {

 $('#MsgAguarde').show();
 document.getElementById('btnBaixarArq').disabled = true;
 $.ajax({
 type: "GET",
 url: "ServletMedGraf",
 data: dataString,
 contentType: "application/json",
 success: function (data) {
 $('#MsgAguarde').hide();
 document.getElementById('btnBaixarArq').disabled = false;
 return data;
 }

 });

}