Implement "loading..." message display in Javascript

Asked

Viewed 53 times

2

I have the following code on JavaScript to post the form data on MySql. However, I need you to display a "loading..." message before sending, because I use it to post photos and it takes a while.

<script type="text/javascript">

$(function(){

    $('#feed_msg').submit(function(event){
        event.preventDefault();
        var formDados = new FormData($(this)[0]);

        $.ajax({
            url:'post-msg-grupo.php',
            type:'POST',
            data:formDados,
            cache:false,
            contentType:false,
            processData:false,
            success:function (data)
     {document.getElementById('msginf').innerHTML = 'Parabéns! Sua mensagem foi enviada com sucesso!';
              $('#feed_msg').each (function(){
            this.reset();
           });
      },
            dataType:'html'
        });
        return false;
    });
});

</script>
javascript
  • 1

    before executing ajax just display the message... can be by displaying a div, or a simple document.write("carregando...");

  • @Ricardopunctual I’m a layman, where I put this code in the script I posted?

  • @Ricardopunctual I tried but it didn’t work.

  • can be within the Sumit function anywhere before the $.ajax, before the line event.preventDefault(); for all intents and purposes

  • @Ricardopunctual Gave error, it opens a new tab in the browser and appears "loading..". The Heart appears inside 'msginf'

  • this was just an example, the best would be to create a div with the message inside and display the div, which will be positioned somewhere that is very visible, is that I understood that your doubt was how to display the message only

Show 1 more comment

2 answers

2


Post the message before AJAX ($.ajax({...})) with the same innerHTML, but you can use jQuery for that:

$(function(){

    $('#feed_msg').submit(function(event){
        event.preventDefault();
        var formDados = new FormData($(this)[0]);

         $('#msginf').html('Carregando...');

        $.ajax({
            url:'post-msg-grupo.php',
            type:'POST',
            data:formDados,
            cache:false,
            contentType:false,
            processData:false,
            success:function (data){
               $('#msginf').html('Parabéns! Sua mensagem foi enviada com sucesso!');
              $('#feed_msg').each (function(){
            this.reset();
           });
      },
            dataType:'html'
        });
        return false;
    });
});

When AJAX enters the success, will replace the content of the widget #msginf by the message of "success".

2

Better identify your code to understand everyone when you ask questions, make it easier to understand those who want to help you. Now answering your question, within the $.ajax method, you can pass a property within this object you created called beforeSend, in this property you create an inline function or call some function of your preference, this function will be executed before the request is sent, so you could do this :

 $.ajax({ 
      ... //suas outras propriedades
     beforeSend: function() {
         $(".divprincipal").append("<div class='loader'></div>");
     }
     sucess: function(dados) {
        $(".loader").remove();
        //colocar os dados na tela
     }
    });

The above code puts a div with the "Loader" class inside another div, and when the request is successfully processed (sucess:) you remove it. I hope I’ve helped :)

Documentation of the $.ajax method here

Browser other questions tagged javascript

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