Ir para conteúdo
Fórum Script Brasil
  • 0

Tela de aguarde

alexandremanowar

Perguntado por alexandremanowar,

 Share

Pergunta

alexandremanowar

alexandremanowar

Postado
Postado

E a e pessoal beleza

Eu fiz o seguinte código em ajax:

function BTNAlterarFinal(codigo)
{

    var descricao = document.getElementById("texto"+codigo).value;
        var Substituir = document.getElementById("botao_"+codigo);

    
    var CampoHTML = "";
    
    ajax.open("POST","alterar_centralizadora2.php",true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.onreadystatechange = function() 
    {
                               if(ajax.readyState < 4 ) 
        {
           //aqui entra a tela de aguarde
                                 }
                
        if(ajax.readyState == 4 ) 
        {
            CampoHTML = '<input type="submit" value="Alterar"  class="formbutton"   onclick="BTNAlterar('+codigo+')">';

            document.getElementById(codigo).innerHTML = descricao;
            document.getElementById(codigo).setAttribute("inputdados",descricao);
            Substituir.innerHTML = CampoHTML ;
                

            
            
        }
    }
    
        
        var params = "centralizadora="+descricao+"&codigo="+codigo;
        ajax.send(params);

    
}
Eles esta funcionando perfeitamente, integrando com meu código php e exibindo na minha página html, a única coisa que não consegui fazer é aparecer aquela tela de aguarde ao clicar no botão! Aquela tela que mostra uma gif animada na frente da minha página enquanto carrega, sei que ela tem que entrar na seguinte parte do código: 
if(ajax.readyState < 4 ) 
        {
           //aqui entra a tela de aguarde
                                 }
                
        if(ajax.readyState == 4 ) 
        {
            CampoHTML = '<input type="submit" value="Alterar"  class="formbutton"   onclick="BTNAlterar('+codigo+')">';

            document.getElementById(codigo).innerHTML = descricao;
            document.getElementById(codigo).setAttribute("inputdados",descricao);
            Substituir.innerHTML = CampoHTML ;
                

            
            
        }

Sei que o ajax.readyState == 4 é para quando tudo já estiver ok então no if que fica com ajax.readyState < 4 será o que deve exibir o gif com a mensagem aguarde mas não sei como fazer alguém pode me explicar?

Valeu

Link para o comentário
Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

  • 0
KaKarotto

KaKarotto

Postado
Postado

Insira a imagem ou texto onde deseja.

if(ajax.readyState < 4 )
    div.innerHTML="<img src='loading.gif' alt='Carregando...' />"

Link para o comentário
Compartilhar em outros sites
  • 0
alexandremanowar

alexandremanowar

Postado
  • Autor
Postado

E ae carinha beleza

Cara funcionou legal posicionei onde eu quero que apareça e exibiu bacana, porém e se eu quiser que a imagem e o aguarde apareça acima da minha página no centro da tela, bloqueando qualquer clique na página ? Como isso pode ser feito?

Valeu pela força

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado

Assim como o lightbox?

Você pode criar um filtro transparente para a página toda menos pra imagem, e usar document.onclick=function(){return false} para bloquear qualquer click. Quando o readyState estiver completo ele desfaz essas alterações.

Link para o comentário
Compartilhar em outros sites
  • 0
KaKarotto

KaKarotto

Postado
Postado 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">

        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                <title>..::::FrameWork By Eduardo Ottaviani::::..</title>
                <link rel="stylesheet" type="text/css" href="" media="screen" />
                    <style type="text/css">
                        div#loading{
                            width:300px; height:300px;
                            position:relative; margin:100px auto;
                            border:1px solid blue;
                            background:white;
                            z-index:2
                        }
                    </style>
                    <script type="text/javascript">

                        function loadingRequest( obj ){
                         var div = document.createElement("div")
                            for(var prp in obj)
                            div.style[prp] = obj[prp]
                         document.body.appendChild( div )
                        }

                        window.onload=function(){
                            loadingRequest(
                                {
                                  "height": document.documentElement.scrollHeight + "px",
                                  "width": "100%",
                                  "zIndex": 1,
                                  "background":"black",
                                  "position":"absolute",
                                  "left":"0px",
                                  "top":"0px",
                                  "opacity":0.9,
                                  "filter":"alpha(opacity = 90)"
                                }
                            )
                        }
                    </script>
            </head>

        <body>
                <div id="loading">
                    <p><strong>Carregando ...</strong></p>
                </div>
        </body>
</html>
[/codebox]

Eu fiz essse exemplo só pra mostrar como você pode fazer.

Você simplesmente cria um div pra tomar o tamanho todo da tela em posição absoluta para bloquear os elementos do html. Coloca com index:1 para ficar na frente dos elementos e o div de loading com z-index 2 pra ficar na frente do div maior.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...