Create online clock - Auto generate

Asked

Viewed 909 times

0

I have the following code:

<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>

The problem I have is updating my watch on its own without updating the page. At the moment I can update the clock, but it opens the same full page in the code, as shown in the following image:inserir a descrição da imagem aqui

And a lot of times comes up to crash, beyond what when it does not lock when clicking on one of the options the page is not directed to another page, by assumption my is also updating.

Full html code:

<!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>

I need help, I appreciate it!

php javascript jquery html

  • When the ajax request ends, the result will be inserted into the div that has the id hora, you can see this in the function defined in the parameter success. So what returns the menu.php? By file name and problem description, you are probably returning all the HTML from the menu.

  • The.php menu page is the same page which I simply want to do is refresh part of the page. automatically.

1 answer

0


See what’s coming your way callback, it seems that instead of returning the updated time you are returning all the html from menu.php. I would also recommend a div cleanse before upgrading, this will ensure that nothing duplicates.

$('#hora').html("").append(resultado);

  • All right, now somehow could I update just the div and not the whole page? Because in the case in my code I update the whole page, is there any way to update just a few parts of the page? If so, how?

  • Yes, as I said before. The problem is that you are passing the entire menu to be updated. You must return only a json contentedly the hour. To be more specific, in "url" you should not put as return "menu.php" is what is doing replicate the page. It should be a url itself.

Browser other questions tagged php javascript jquery html

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