Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 hrefQual foi a dificuldade com essa tua última tentativa ?
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(); } }
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.
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...
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
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;
}
});
}
Tentei algo como :