0

Estou com o seguinte código:

<script type="text/javascript">
            $.ajax({
                type      : 'post', 
                url       : 'menu.php', 
                // data      : 'nome='+ $('#hora').val(), 
                dataType  : 'html', 
                success : function(resultado){
                        $('#hora').html(resultado);
                    }
            });
        </script>

<div id="hora">
            <label>
            <?php setlocale( LC_ALL, 'pt_BR', 'pt_BR.iso-8859-1', 'pt_BR.utf-8', 'portuguese' ); 
                        date_default_timezone_set( 'America/Fortaleza' );
                        echo date('H:i:s'); ?>
                    </label>
                    </div>

O problema que tenho é de atualizar o relógio por si só sem atualizar a página. No momento consigo atualizar o relógio, mas ele abre a mesma página inteira no código, como mostra a imagem a seguir:inserir a descrição da imagem aqui

E muita das vezes chega até a travar,além do que quando não trava ao clicar em uma das opções a página não é direcionada a outra página, por suposição minha está atualizando também.

Código html completo:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8">
        <title>Menu</title>
        <link rel="icon" type="img/png" href="img/Brasão_do_Ceará.png">
        <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/estilo_menu.css">
        <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
        <script type="text/javascript" src="./jquery/jquery.min.js"></script>
        <script type="text/javascript" src="./jquery/bootstrap.min.js"></script>
        <script type="text/javascript">
            $.ajax({
                type      : 'post', 
                url       : 'menu.php', 
                // data      : 'nome='+ $('#hora').val(), 
                dataType  : 'html', 
                success : function(resultado){
                        $('#hora').html(resultado);
                    }
            });
        </script>
</head>
    <body>
        <div id="hora">
        <label>
        <?php setlocale( LC_ALL, 'pt_BR', 'pt_BR.iso-8859-1', 'pt_BR.utf-8', 'portuguese' ); 
                    date_default_timezone_set( 'America/Fortaleza' );
                    echo date('H:i:s'); ?>
                </label>
                </div>
        <h1>Coga</h1>
        <div class="caixa" id="ocorrencia" title="Adicionar Ocorrência." onclick="window.location = 'index.php';">
        <i class="glyphicon glyphicon-plus-sign"></i>
        <br>
        <h4>Adicionar Ocorrência</h4>
        </div>
        <div class="caixa" id="edita_ocorrencia" title="Editar Ocorrência." onclick="window.location = 'editar_ocorrencia.php';">
        <i class="fa fa-pencil-square-o fa-5x"></i>
        <br>
        <h4>Editar Ocorrência</h4>
        </div>
        <div class="caixa" id="usuario_edit" title="Alteração de Login ou Senha!" onclick="window.location = 'editar_usu.php';">
        <i class="fa fa-address-card fa-5x"></i>
        <br>
        <h4>Edição de Acesso</h4>
        </div>
        <div class="caixa" id="relatorio" title="Gerar Relatório." onclick="window.location = 'relatorio.php';">
        <i class="fa fa-bar-chart-o fa-5x"></i>
        <br>
        <h4>Gerar Relatório</h4>
        </div>
        <div class="caixa" id="usuarios" title="Gerenciamento de Usuários" onclick="window.location = 'gerencia_usuarios.php';">
        <i class="fa fa-user fa-5x"></i>
        <br>
        <h4>Gerenciamento de Usuários</h4>
        </div>
        <div class="caixa" id="sair" title="Sair." onclick="window.location = 'sair.php';">
        <i class="glyphicon glyphicon-log-out"></i>
        <br>
        <h4>Sair</h4>
        </div>
    </body>
</html>

Preciso de ajuda, Agradeço!

2
  • Quando a requisição ajax termina, o resultado será inserido dentro da div que possui o id hora, você pode ver isso na função definida no parâmetro success. Então o que retorna o menu.php? Pelo nome do arquivo e pela descrição do problema, provavelmente está a devolver todo o HTML do menu. 14/09/2017 às 11:19
  • A página menu.php é a mesma página o que simplesmente quero fazer é dar um refresh em parte da página., de forma automática. 17/09/2017 às 8:48

1 Resposta 1

0

Veja o que está chegando na sua callback, parece que ao invés de retorna a hora atualizada você está retornando todo o html do menu.php. Eu recomendaria também uma limpeza da div antes de atualizar, isso vai garantir que nada se duplique.

$('#hora').html("").append(resultado);
2
  • Tudo bem, agora de alguma forma teria como eu atualizar apenas a div e não a página inteira? Porque no caso no meu código atualizo a página inteira, tem alguma forma de atualizar apenas algumas partes da página? Se sim, como? 17/09/2017 às 11:44
  • Sim, da forma que falei anteriormente. O problema é que você está passando todo o menu pra ser atualizado. Você deve retornar apenas um json contento a hora. Pra ser mais especifico, em "url" você não deveria colocar como retorno "menu.php" é isso que está fazendo replicar a página. Deveria ser uma url propriamente dito.
    – Luan
    9/11/2017 às 15:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .