Return a button to its original state after 'download popup'

Asked

Viewed 39 times

0

In my Java Web project there is a button to export a list to a CSV file which, when clicked, displays the message of 'Please stand by' for a few seconds to then return to its original state and allow new exports.

It turns out that in some circumstances the processing of this CSV file may take longer than the timeout set in javascript, leading the user to think that their request has not been processed and causing them to often click again on the export button, generating new processing in an infernal cycle.

I would like to know if there is any way to condition the return of the original status of the button to the download popup of the CSV file, so that the user can not make new request until the current one is effectively processed.

Below is the html of the button: 

<td id="export" class="textoMaior"><img class="botao" src="${seta}" />&nbsp; 
    <a class="link" onclick="exportar();">
        <fmt:message key="relatorio.exportar" />
    </a>
</td>

And the javascript code:

function exportar() {
    var msg = document.getElementById("export").innerHTML;
    document.getElementById("export").innerHTML="<fmt:message key='relatorio.exportar.aguarde'/>";

    var token = new Date().getTime();
    var t = document.forms.relatorioForm.target;
    document.forms.relatorioForm.elements['total'].value='${listTO.total}';
    document.forms.relatorioForm.elements['downloadToken'].value=token;
    document.forms.relatorioForm.action="<c:url value='/relatorio/transacao/exportar.se'/>";
    document.forms.relatorioForm.submit();
    if (!window.navigator.cookieEnabled) {
        $("#lista").hide(); 
        document.getElementById("export").innerHTML = msg;
    }
    document.forms.relatorioForm.action="<c:url value='/relatorio/transacao/listar.se'/>";
    document.forms.relatorioForm.target=t;
    setTimeout(function retornaBotaoExportar() {
        document.getElementById("export").innerHTML="<td id='export' class='textoMaior'><img class='botao'src='${seta}' />&nbsp; <a class='link' onclick='exportar();'><fmt:message key='relatorio.transacao.exportar' /></a></td>";
    }, 8000);
}
javascript java html jsp

  • Just one detail: in the innerHTML of the setTimeout you are putting another td inside the original td, thus getting a td inside the other with the same id.

  • Another thing: what’s in the form target?

  • I’m not sure if you’re addressing the problem in the right way, it doesn’t make much sense to run a timeout to do something like this, I suggest you open csv on another page. window.open('url of csv')

1 answer

0

Have you turn into an ajax and change the status of the button in callback

function retornaBotaoExportar() {
    //Seu codigo
}
$.ajax({type:'GET', 
        cache: false,
        url: rquestURL, 
        data:params, 
        success: function(response) {
            retornaBotaoExportar();
        });

Browser other questions tagged javascript java html jsp

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