0

me gustaria que mi pagina web se auto-refrescara cada X segundos y mostrar los nuevos mensajes. Voy a poner un ejemplo de lo que seria la estrucutra que tengo en mente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Refrescar Pagina</title>
</head>
<body>
    <!-- MENU -->
    <div id="menu">

    </div>

    <!-- CUERPO DE LA PAGINA -->
    <div id="cuerpo">
        <!-- ULTIMOS MENSAJES -->
        <?php 
        //CONSULTA A LA BD DE LOS MENSAJES (LISTARLOS) 
         ?>
    </div>


    <!-- FOOTER -->
    <div id="footer">

    </div>
</body>
</html>

Como se pude observar, la estructura de la pagina tiene varias partes:

El MENU y el FOOTER no me interesa que se refresque, solo el cuerpo que es donde esta mi logica PHP que busca los mensajes. Entonces quiero que cada X segundos haga la consulta y muestre los mensajes nuevos .

Tampoco sabria si es mejor usar PHP... jQuery.. etc..

2
  • 1
    La mejor forma seria con ajax el 29 abr. 2019 a las 19:28
  • Como podria hacerlo? alguna idea seria muy agradecida. Gracias
    – josanangel
    el 29 abr. 2019 a las 19:29

1 respuesta 1

1

Yo encontré la solución y la mejor manera es tener un div contenedor o el div que quieras mantener actualizado cada cierto tiempo con un id para identificar la seccion.

ejemplo este es el index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="http://201.116.226.217:50/coti/cotizador/img/w1.png" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Alertas</title>
</head>
<body>
<nav class="navbar navbar-expand-lg fixed-top navbar-dark" style="background-color: #0005B0;">
  <a class="navbar-brand" href="/Alertamiento">Inicio</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Secciones
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="/Alertamiento">Eventos</a>
          <a class="dropdown-item" href="/Alertamiento/Reporte.php">Reportes</a>
          <a class="dropdown-item" href="/Alertamiento/registro.php">Registro</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<div id="principal">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  
    <script type="text/javascript">
      //este es el metodo que lo mantendra actualizado 
        $(document).ready(function() {
          var refreshId =  setInterval( function(){  
         $('#principal').load('refresh.php');//actualizas el div
      }, 4000 );
    });
	</script>
</body>
</html>

y en otro fichero metes el div solamente que se va a estar actualizando, el cual se llama refresh.php

solo tendrás el div que quieres actializar ya no es necesario escribir todo el html

en refresh solo tendras

<div id="principal">
</div>

Obviamente si quieres utlizar php debes copiar y pegar el codigo tal cual en el fichero refresh.php

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.