Because when I run ajax, it takes a few seconds to perform the animations?

Question

Because when I run ajax, it takes a few seconds to perform the animations?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have an ajax request, where I just sent some data and before that I have an animation, the problem is that before doing the ajax I want a load effect but it seems that as it is an asynchronous request it is executed first and finally it leaves the animation so that for a short period of time it would seem like nothing was running.

I've already tried with the beforeSend and it does not work

Thank you very much, this is the code

function queryEmails (callback) {

$("#loading").modal('show');

var formSerialize = $("form").serialize();
var rows = $('#QueryEmailsTable  tr').length;

jQuery.ajax({
    url: '/SupervisorManager/FindEmails',
    dataType: 'json',
    data: formSerialize,
    async: false,
    type: 'POST',
    beforeSend: function ()
    {
        document.getElementById("QueryEmailsTable").innerHTML = "";
    },
    success: function (result)
    {
        callback(result, rows);
    },

    complete: function ()
    {
        setTimeout(function ()
        {
            $('#loading').modal('hide');
            document.getElementById("dataInfo").style.display = "block";
        }, 1000);

        onComplete();
    },
    error: function ()
    {
        addFailureMessage("Error, don't load emails campaign info");
    }
});

}

ajax

asked by Sebastian Caro Caicedo 09.10.2017 в 22:47

source

2 answers

Google charts returns graphics before display div show shows error datatime ruby on rails

score 0 · Answer 1

I explain what I understood, you try to show an animation in a modal window, then before it is sent you have to show the modal window, and the only way I can think of is a beforesend

function queryEmails(callback) {

var formSerialize = $("form").serialize();
var rows = $('#QueryEmailsTable  tr').length;

jQuery.ajax({
    url: '/SupervisorManager/FindEmails',
    dataType: 'json',
    data: formSerialize,
    async: false,
    type: 'POST',
    beforeSend: function ()
    {
        $("#loading").modal('show');
        document.getElementById("QueryEmailsTable").innerHTML = "";
    },
    success: function (result)
    {
        callback(result, rows);
    },

    complete: function ()
    {
        setTimeout(function ()
        {
            $('#loading').modal('hide');
            document.getElementById("dataInfo").style.display = "block";
        }, 1000);

        onComplete();
    },
    error: function ()
    {
        addFailureMessage("Error, don't load emails campaign info");
    }
});
}

Another way is to show the image loading inside the form for example, but that does not know if it adapts to your needs. The most optimal thing would be to put the HTML code to get an idea of what you have.

Another way is this (Which is the way I would do it.)

HTML

<div class="loader">
   <center>
       <img class="loading-image" src="loading.jpg" alt="loading..">
   </center>
</div>

CSS

.loading-image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
}
.loader
{
    display: none;
    width:200px;
    height: 200px;
    position: fixed;
    top: 50%;
    left: 50%;
    text-align:center;
    margin-left: -50px;
    margin-top: -100px;
    z-index:2;
    overflow: auto;
}

JS

Always using the beforesend,

$.ajax({
  // your ajax code
  beforeSend: function(){
       $('.loader').show()
   },
  complete: function(){
       $('.loader').hide();
  }
});

score 0 · Answer 2

Done, I gave the solution to the problem, as are asynchronous requests, then to Ajax when you enter the function that is calling Ajax, so to speak all the code is executed after that is already resolved, or there is already a callback of the request, the only thing I did was that the attribute "async" that was false change it true, and voila, I leave the code.

function queryEmails (callback) {
var formSerialize = $ ("form"). serialize (); var rows = $ ('# QueryEmailsTable tr'). length;

jQuery.ajax({
    url: '/SupervisorManager/FindEmails',
    dataType: 'json',
    data: formSerialize,
    async: true,
    type: 'POST',
    beforeSend: function ()
    {
        setDimentionsModal();
        $("#loading").modal('show');
        document.getElementById("QueryEmailsTable").innerHTML = "";
    },
    success: function (result)
    {
        callback(result, rows);
    },

    complete: function ()
    {
        setTimeout(function ()
        {
            $('#loading').modal('hide');
            document.getElementById("dataInfo").style.display = "block";
        }, 1000);

        onComplete();
    },
    error: function ()
    {
        addFailureMessage("Error, don't load emails campaign info");
    }
});

}