How to place a upload image within a Javascript function?

Question

I have this function below:

function consultarOcorrencia(number, sequence){
    form = document.forms[1];

    form.number.value = number;
    form.sequencial.value = sequence;

    form.submit();

}

After the submit, a Java Action is called.

@Override
    public ActionForward perform(ActionMapping mapping, ActionForm form, HttpServletRequest request,
                    HttpServletResponse response) throws ApplicationException, SystemException {

        MyForm myForm=  (MyForm ) form;

        MyDelegate.getInstance().cancel(myForm);

        return mapping.findForward("cancel");
    }

It is possible that while the function is running, put a gif to load?

Like this:

This task can take up to 7 seconds.

Answer 1

I use the following implementation:

var block = document.querySelector(".block");
var fazerRequisicao = document.getElementById("fazerRequisicao");

fazerRequisicao.addEventListener("click", function () {
  //bloquear tela antes de iniciar a requisição.
  block.classList.remove("hidden");

  var htmlRequest = new XMLHttpRequest();
  htmlRequest.open("GET", "http://apps.testinsane.com/rte/status/200/5", true);
  htmlRequest.addEventListener("readystatechange", function (event) {  
    if (htmlRequest.readyState == 4) {
      if (htmlRequest.status == 200) {
        alert("Requisição realizada com sucesso");
      } else {
        alert("Ocorreu um erro durante o processamento");
      }
      //desbloquer a tela ao termino da requisição.
      block.classList.add("hidden");
    }
  });
  htmlRequest.send();
});

.hidden {
  display: none; 
}
.block {
  background-color: rgba(1, 1, 1, 0.3);
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  box-shadow: inset 0px 0px 15px white;
  z-index: 1234567;
}

.block img {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
  width: 128px;
  height: 128px;
  
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

@-ms-keyframes rotating {
  from { -ms-transform: rotate(0deg); }
  to { -ms-transform: rotate(360deg); }
}

@-moz-keyframes rotating {
  from { -moz-transform: rotate(0deg); }
  to { -moz-transform: rotate(360deg); }
}

@-webkit-keyframes rotating {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

@-o-keyframes rotating {
  from { -o-transform: rotate(0deg); }
  to { -o-transform: rotate(360deg); }
}

@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

<input id="fazerRequisicao" type="button" value="Fazer Requisição" />
<div class="block hidden">
  <img src="http://cdn.flaticon.com/svg/81/81948.svg"/>
</div>

in the above example, I am performing an asynchronous request (AJAX) that takes 5 seconds, at the end of it the screen is unlocked.

In your case, you are performing a synchronous request, so there is no need to unlock the page (unless of course you cancel the request).

Answer 2

You can do it like this:

var loader = document.getElementById('loader');

loader.style.display = "block"; // Mostra o loader, utilize quando a função começar

setInterval(function() {
  loader.style.display = "none"; // Esconde o loader, utilize quando a função terminar de executar.
}, 9000);

#loader {
  display: none;
}

<img id="loader" src="http://blog.teamtreehouse.com/wp-content/uploads/2015/05/loading.gif">

Answer 3

You can do via ajax instead of Submit, call your loading before processing ajax and then vc hide it.

I advise you to use the lib Blockui, very good and facilitates a lot. Blockui

In case you need to use Ubmit, you can make a good one, call the loading before Ubmit(), so the printing that is processing and that loading goes away when Ubmit completes and renders the new page. would look something like this

function consultarOcorrencia(number, sequence){
    //Aqui chama seu loading
    $.blockUI({ message: '<h1><img src="loading.gif" /> Aguarde...</h1>' });

    form = document.forms[1];

    form.number.value = number;
    form.sequencialAvaliacao.value = sequence;

    form.submit();

}