Msg carregando com Jquery e Servlet

[rdpacato 2]

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

 

[rdpacato 2]

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

Qual foi a dificuldade com essa tua última tentativa ?

[rdpacato 2]

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

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

Falta essa parte de retorno para

[reebr 94]

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

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:

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

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

 

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

[rdpacato 2]

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

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

        });
 
}