CSS effect before server request

Asked

Viewed 59 times

0

I wanted to put a CSS animation while the site is being requested on the server. So I found this code with Angular.

app.config(['$httpProvider', function ($httpProvider) {
// Criando um interceptador de chamadas http.
// O '$q' é um serviço que permite monitoração de chamadas assincronas  através de 'promisses' que provem callbacks de funcoes.
// $rootScope é o escopo de maior hierarquia em toda aplicação, e pode ser acessado de qualquer nivel
var myHttpInterceptor = ['$q', '$rootScope', '$window', '$templateCache',  'srvMsgBus', function ($q, $rootScope, $window, $templateCache, srvMsgBus) {
return {
// O 'request' ocorre sempre que uma chamada http for iniciada
        'request': function (request) {

            // $emit envia um evento para todos os controlers 'filhos' do controle que o está executando.
            // Este evento pode ser interceptado por outros controllers e serve como meio de comunicação entre eles.
            // Como o $rootScope é o 'pai' de todo e qualquer outro controller, quando ele emite um $emit todos podem interceptar este sinal.
            $rootScope.emit('loading-started');

In the head

<script src="staff/app.js"></script>

In the body:

<div dir-carregando></div>

But when I see the result this error appears on the console:

Failed to load with source "https://ourladyagd.com/components.js”.

Referenceerror: app is not defined[Learn More] app.js:1:1

Typeerror: i is Undefined[Learn More] bootstrap.min.js:6:2745

javascript angularjs

  • That code only fires an event, it doesn’t do anything related to displaying something visual. If you just want to display a Please Wait, the most imple way is to put it in your html template and hide it while the loading is not happening, for example with a *ngIf="loading"

  • If you really want to use this example code you need to put the dir-loading component code here

  • The dir-loading by what I understood when I researched I put in the first line of the body

  • Even though he has a request to the app.js file in the head I have to put in the html structure itself?

  • @Sérgios.Filho You have some other way of doing this than by angle?

  • can only tell if you show the code

  • if vc is using angular, the ideal is not to mix the way to do with jquery nor the way to do with pure javascript but to follow the angular pattern

  • I know more of jquery than angula but on the net I did not find with jquery so I did this test.

  • With jquery, before you make your ajax request, you adjust the visibility of Please Wait to appear on the screen. Then, when the ajax callback returns, you adjust the visibility or display to hide the Please Wait

  • @Son Face I’m still new in js. Can you show how? What I know I can’t imagine what you said.

  • To use this feature, your solution must contain an angular application. Please see how the framework works, without this there is no way to make it work in your solution. https://angularjs.org/

  • 1

    @Moisesmoraes, I edited to make the functional example. This script makes an ajax request to any server I found on google and displays a Wait Please while the answer does not arrive...

Show 7 more comments

1 answer

1


simple example with jquery

<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
</head>

<body>

  <div style="text-align:center;">
    <img id="pleaseWait" src="https://3.bp.blogspot.com/-MCCUr1CekTE/VPz4EEqAA1I/AAAAAAAANeA/anbL5xVJ2q4/s1600/11-03%2B~%2BGIF%2B~%2BPlease%2BWait.gif">
    <div id="divResultado" style="padding:50px;"></div>
  </div>

  <script>

    $.get('https://zueii.free.beeceptor.com/my/api/path', suaFuncaoDeCallback);

    function suaFuncaoDeCallback(resultado) {

      console.log('resultado retornado do servidor: ', resultado);
      $('#divResultado').html('<div style="font-weight:bold;">Resultado retornado do servidor:</div>' + resultado);
$('#pleaseWait').hide();
    }


  </script>

</body>

</html>

Documentation jquery ajax https://www.w3schools.com/jquery/jquery_ref_ajax.asp

  • funfou muito obg. But I wonder if I can delay the request for gif to spend more time?

  • @You can. You use the setTimeout method to run some code only after a while. https://www.w3schools.com/jsref/met_win_settimeout.asp

Browser other questions tagged javascript angularjs

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