Refrescar la pantalla cada cierto tiempo automaticamente.

satjaen · #1 (**permalink**) 12/05/2013, 04:31

Hola, tengo una página para la localización de sitios con google maps y quiero que se vaya refrescando la pantalla cada cierto tiempo para que el indicador del mapa que esta en movimiento se vaya actualizando solo. Lo he puesto así pero no se si estara bien:

Código Javascript:

Ver original<script>
función de refrescar ()
{
    window.location.reload ();
}
</script>
 
<body onload="initialize();setTimeout('refrescar()', 5000);">

Gracias

alberto510a · #2 (**permalink**) 12/05/2013, 04:37

Hola.

Con html puedes hacer esto sin necesidad de javascript.

Código HTML:

Ver original<meta http-equiv="refresh" content="5; url=mipagina.html">

Como ves es una meta de tipo refresh, con el tiempo que quieras y la url.

Saludos

satjaen · #3 (**permalink**) 12/05/2013, 05:01

Cita:

Iniciado por alberto510a

Hola.

Con html puedes hacer esto sin necesidad de javascript.

Código HTML:

Ver original<meta http-equiv="refresh" content="5; url=mipagina.html">

Como ves es una meta de tipo refresh, con el tiempo que quieras y la url.

Saludos

Si, gracias pero el problema es que tengo un boton para calcular la ruta y claro tengo que volver a pulsar. Se puede hacer que tambien se llame a la funcion?

Lo he puesto así:

Código Javascript:

Ver original<meta http-equiv="refresh" content="5; url=ubicacionavisos.php?id_aviso=<?php echo $row_Recordset1['id_aviso']; ?>">

Y la funcion para calcular la ruta:

Código Javascript:

Ver originalfunction calcRoute() {
 
                                               
 
        var start = initialLocation;
 
var end = "<?php echo utf8_encode($row_Recordset1['localidad']); ?><?php echo utf8_encode($row_Recordset1['calle']); ?>";                
 
                                var request = {
 
                    origin:start, 
 
                    destination:end,
 
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
 
                };
 
                
 
                directionsService.route(request, function(response, status) {
 
                    if (status == google.maps.DirectionsStatus.OK) {
 
                        directionsDisplay.setDirections(response);
 
                        $('#itinerario').show();
 
                    }
 
                });      
 
            }

Gracias

alberto510a · #4 (**permalink**) 12/05/2013, 05:04

¿Cuando pulsas el botón para calcular la ruta en el link no se carga esos datos?

alberto510a · #5 (**permalink**) 12/05/2013, 05:06

¿En cualquier caso puedes podrías poner en el body un evento onload="" que llame a la función no?

satjaen · #6 (**permalink**) 12/05/2013, 05:07

Cita:

Iniciado por alberto510a

¿Cuando pulsas el botón para calcular la ruta en el link no se carga esos datos?

Si, pero cada vez que se refresca la pantalla tengo que pulsar el boton.

alberto510a · #7 (**permalink**) 12/05/2013, 05:08

Cita:

Si, pero cada vez que se refresca la pantalla tengo que pulsar el boton.

Prueba a llamar la función con onload en el body.

satjaen · #8 (**permalink**) 12/05/2013, 05:13

Cita:

Iniciado por alberto510a

Prueba a llamar la función con onload en el body.

Pero entonces tendría que llamar a dos funciones y como se haría?.
Porque así no es:

Código Javascript:

Ver original<body onload="initialize();calcRoute();">

alberto510a · #9 (**permalink**) 12/05/2013, 05:15

A ver necesito un poco más de información sino es difícil imaginarme porque pasa todo.

Por ejemplo: ¿Como calculas la ruta? ¿Mediante unos datos que se introducen en un formulario? Dame tu página

satjaen · #10 (**permalink**) 12/05/2013, 05:28

Te pongo el código, faltando el select que no me coge:

Código Javascript:

Ver original<?php require_once('Connections/conexion.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }
 
  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
 
  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}
$id_aviso=$_GET['id_aviso'];
mysql_select_db($database_conexion, $conexion);
$query_Recordset1 = "SELECT * FROM avisos WHERE id_aviso='$id_aviso'";
$Recordset1 = mysql_query($query_Recordset1, $conexion) or die(mysql_error());
$row_Recordset1 = mysql_fetch_assoc($Recordset1);
$totalRows_Recordset1 = mysql_num_rows($Recordset1);
?>
 
 
<!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">
 
<head>
 
    <meta http-equiv="refresh" content="20; url=ubicacionavisos.php?id_aviso=<?php echo $row_Recordset1['id_aviso']; ?>">
    
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
        
 
    <title>WedServer ubicación</title>
 
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" /> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
 
<!-- Optional Mousewheel support: http://brandonaaron.net/code/mousewheel/docs -->
<script type="text/javascript" src="PATH/TO/YOUR/COPY/OF/jquery.mousewheel.min.js"></script>
 
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js">
</script>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.6.4.min.js" type="text/javascript"></script>
 
 
    <style>
 
    #map_canvas 
 
    {
 
        color:#333;
 
        font-size:12px;
 
        text-shadow:none;
 
        line-height:12px;
 
    }
 
    .marcador
 
    {
 
        background-image:url();
 
        background-repeat:no-repeat;
 
        padding-left:35px;
 
        line-height:7px;
 
    }
 
    /*globo de texto: nombre usuario*/
 
    h2 
 
    {
 
        color:#333;
 
        font-size:14px;    
 
        text-shadow:inherit;
 
        text-shadow:#CCC;
 
        font-family:Tahoma, Geneva, sans-serif;
 
    }
 
    /*globo de texto: direccion usuario*/
 
    h3 
 
    {
 
        color:#333;
 
        font-size:11px;    
 
        text-shadow:none;
 
        line-height:13px;
 
    }
 
    </style>
 
 
 
    <script src="../js/jquery-min.js"></script>
 
        
 
    <script language="JavaScript" src="funcionesjavascript.js"></script> 
 
        
 
    <script type="text/javascript">            
 
        $(document).bind("mobileinit", function () 
 
        {
 
            $.mobile.ajaxEnabled  = true;
 
        });
 
    </script>
 
 
 
    
    
    <script type="text/javascript" src="jquery-ui-map-3.0-rc/ui/jquery.ui.map.js"></script>
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=es&region=ES"></script>
    
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>    
 
    <script src="http://code.google.com/apis/gears/gears_init.js"></script>
    
    
 
    
 
 
 
 
 
    <script type="text/javascript">
 
        var directionDisplay;
 
        var directionsService = new google.maps.DirectionsService();
 
        var initialLocation;
 
        var geocoder;
 
        var Arriate = new google.maps.LatLng(37.778551, -3.804231);
 
        var browserSupportFlag =  new Boolean();
 
        var map;
 
        var infowindow = new google.maps.InfoWindow();
 
      
 
        function initialize() {
 
            directionsDisplay = new google.maps.DirectionsRenderer();
 
      
 
            var myOptions = 
 
                          {      
 
                            zoom: 11,
 
                            disableDefaultUI: true,
 
                            mapTypeId: google.maps.MapTypeId.ROADMAP
 
                            
 
                          };
 
      
 
                          geocoder = new google.maps.Geocoder();
 
                          var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
      
 
                          if(navigator.geolocation) 
 
                          {
 
                            browserSupportFlag = true;
 
                            navigator.geolocation.getCurrentPosition(function(position) 
 
                            {
 
        initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
 
                                
 
                                map.setCenter(initialLocation);
 
                              
 
                                infowindow.open(map);
 
                                
 
                                var ContenidoMarcador = 'Posición del Técnico';
 
                                      
 
                                var infoventana = new google.maps.InfoWindow(
 
                                {
 
                                    content: ContenidoMarcador                                    
 
                                });
 
                                
 
 
 
      
 
                                var image = '../imagenes/tecnico.png';
 
                                var marcadorTecnico = new google.maps.Marker(
 
                                {
 
                                    position: initialLocation, 
 
                                    map: map,
 
                                    icon: image,
 
                                    title:"Aviso"
 
                                });
 
      
 
                                google.maps.event.addListener(marcadorTecnico, 'click', function() 
 
                                {
 
                                    infoventana.open(map,marcadorTecnico);
 
                                });
 
                            
 
                            }, function() {
 
                              handleNoGeolocation(browserSupportFlag);
 
                            });
 
                          } else if (google.gears) {
 
                            
                            browserSupportFlag = true;
 
                            var geo = google.gears.factory.create('beta.geolocation');
 
                            geo.getCurrentPosition(function(position) {
 
                              initialLocation = new google.maps.LatLng(position.latitude,position.longitude);                              
 
                              map.setCenter(initialLocation);
 
                              infowindow.open(map);
 
                                                   
 
                                var ContenidoMarcador = 'Posición del Técnico';
 
      
 
                                var infoventana = new google.maps.InfoWindow({
 
                                    content: ContenidoMarcador
 
                                });
 
      
 
                                var image = '../imagenes/tecnico.png';
 
                                var marcadorTecnico = new google.maps.Marker({
 
                                    position: initialLocation, 
 
                                    map: map,
 
                                    icon: image,
 
                                    title:"Aviso"
 
                                });
 
                                
 
                                google.maps.event.addListener(marcadorTecnico, 'click', function() {
 
                                    infoventana.open(map,marcadorTecnico);
 
                                });
 
                            }, function() {
 
                              handleNoGeolocation(browserSupportFlag);
 
                            });
 
                          } else {
 
                            // Browser doesn't support Geolocation
 
                            browserSupportFlag = false;
 
                            handleNoGeolocation(browserSupportFlag);
 
                          }

satjaen · #11 (**permalink**) 12/05/2013, 05:30

Continuación:

Código Javascript:

Ver originalfunction handleNoGeolocation(errorFlag) {
 
                            if (errorFlag == true) {
 
                              alert("Geolocation service failed.");
 
                              initialLocation = Jaen;
 
                            } else {
 
                              alert("Posición no encontrada.");
 
                              initialLocation = Jaen;
 
                            }
 
                              map.setCenter(initialLocation);
 
                              infowindow.setContent(contentString);
 
                              infowindow.setPosition(initialLocation);
 
                              infowindow.open(map);
 
                          }
 
                               
 
                                
 
var address0 = '<?php echo utf8_encode($row_Recordset1['localidad']); ?><?php echo utf8_encode($row_Recordset1['calle']); ?>';
 
 
 
                geocoder.geocode( { 'address': address0}, function(results, status) {
 
                    if (status == google.maps.GeocoderStatus.OK)
 
                
                    {
                        
                        
var ContenidoMarcadorAviso0 = '<div class="marcador"><h2><?php echo $row_Recordset1['name'];?></h2><h3><?php echo utf8_encode($row_Recordset1['calle']);?></h3></div><h3><b></b><hr><b>Marca: </b><?php echo $row_Recordset1['marcas']; ?><br /> <b>Modelo: </b><?php echo $row_Recordset1['modelo']; ?><br /> <b>Aparato: </b><?php echo $row_Recordset1['aparatos']; ?></h3>';
 
                        var infoventanaaviso0 = new google.maps.InfoWindow({
 
                            content: ContenidoMarcadorAviso0
 
                        });
 
 
 
                        marcadorAviso0 = new google.maps.Marker({
 
                            position: results[0].geometry.location, 
 
                            map: map,
 
                            title:'Aviso'
 
                        });
 
                        google.maps.event.addListener(marcadorAviso0, 'click', function() {
 
                            infoventanaaviso0.open(map,marcadorAviso0);
 
                        });
 
                    } 
 
                    else 
 
                    {
 
                        alert('Geocode was not successful for the following reason: ' + status);
 
                    }
 
                });                                  
 
                
 
        
 
            directionsDisplay.setMap(map);
 
            directionsDisplay.setPanel(document.getElementById("directionsPanel"));
 
            }
 
      function calcRoute() {
 
                                               
 
        var start = initialLocation;
 
var end = "<?php echo utf8_encode($row_Recordset1['localidad']); ?><?php echo utf8_encode($row_Recordset1['calle']); ?>";                
 
                                var request = {
 
                    origin:start, 
 
                    destination:end,
 
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
 
                };
 
                
 
                directionsService.route(request, function(response, status) {
 
                    if (status == google.maps.DirectionsStatus.OK) {
 
                        directionsDisplay.setDirections(response);
 
                        $('#itinerario').show();
 
                    }
 
                });      
 
            }
 
    </script>
</head> 
<body onload="initialize();">
 
<div data-role="page" data-theme="b" id="gmap-3">             
 
        <div data-role="content" > 
 
            <div class="ui-bar-b ui-corner-all ui-shadow" style="padding:1em;">
 
            <div id="map_canvas" style="height:300px;"></div>
 
            
 
            <div>
 
            <a href="#" onclick="calcRoute();" data-role="button">Calcular Ruta</a>
 
                            
 
            </div><br />
 
        
 
            <div id="itinerario" style="display:none">            
 
                <center>
 
                    ITINERARIO                    <div id="directionsPanel"></div>
 
                </center>
 
            </div>
 
            
 
            <div id="results" style="padding:1.4em">
 
            </div>
 
        </div>
 
    </div>
 
    <div data-role="footer" data-position="fixed" data-fullscreen="false">
 
        <div data-role="navbar">
 
            <ul>
 
                <li><a href="#" onclick="window.close();"  data-icon="delete" data-theme="f" data-ajax="false">Cerrar ventana</a></li>                    
 
            </ul>
 
        </div>
 
    </div>        
 
        
 
</div>    
 
 
 
</body>
 
</html>
<?php
mysql_free_result($Recordset1);
?>

alberto510a · #12 (**permalink**) 12/05/2013, 05:34

¿Exactamente que calculas? No veo ningun sitio donde se inserten datos y a partir de ahí calcule

satjaen · #13 (**permalink**) 12/05/2013, 05:39

Aquí es donde recoge las variables de localidad y calle:

Código Javascript:

Ver originalvar address0 = '<?php echo utf8_encode($row_Recordset1['localidad']); ?><?php echo utf8_encode($row_Recordset1['calle']); ?>';

Y luego pulsas el boton de calcular ruta:

Código Javascript:

Ver original<a href="#" onclick="calcRoute();" data-role="button">Calcular Ruta</a>

alberto510a · #14 (**permalink**) 12/05/2013, 05:51

Lo que se me ocurre es que tras que se refresque la página hagas esto con jQuery:

Código Javascript:

Ver original$(document).ready(function(){
$('#aqui_tendrias_que_poner_la_id_del_enlace_de_calcular_ruta').trigger('click');
});

satjaen · #15 (**permalink**) 12/05/2013, 05:58

Cita:

Iniciado por alberto510a

Lo que se me ocurre es que tras que se refresque la página hagas esto con jQuery:

Código Javascript:

Ver original$(document).ready(function(){
$('#aqui_tendrias_que_poner_la_id_del_enlace_de_calcular_ruta').trigger('click');
});

Quieres decir esto:

Código Javascript:

Ver original$(document).ready(function(){
$('#calcuruta').trigger('click');
});
 
 
 <a href="#" onclick="calcRoute();" id="calcuruta" data-role="button">Calcular Ruta</a>

Pero donde coloco el ready???

alberto510a · #16 (**permalink**) 12/05/2013, 06:02

Mira tendrías que hacer esto:

Código Javascript:

Ver original/*Adjuntamos librería de jQuery*/
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
/*Hacemos el script*/
<script>
$(document).ready(function(){
$('#calcuruta').trigger('click');
});
</script>

Esto lo colocas tal cual donde quieras, por ejemplo tras la etiqueta body.
Y sí, interpretaste bien lo que te dije de la id debes poner la id calcuruta en el enlace tal como me mostraste.

Saludos.

PD:

Cita:

Pero donde coloco el ready???

Para jQuery no tienes que definir los eventos en los elementos.

satjaen · #17 (**permalink**) 12/05/2013, 09:17

Cita:

Iniciado por alberto510a

Mira tendrías que hacer esto:

Código Javascript:

Ver original/*Adjuntamos librería de jQuery*/
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
/*Hacemos el script*/
<script>
$(document).ready(function(){
$('#calcuruta').trigger('click');
});
</script>

Esto lo colocas tal cual donde quieras, por ejemplo tras la etiqueta body.
Y sí, interpretaste bien lo que te dije de la id debes poner la id calcuruta en el enlace tal como me mostraste.

Saludos.

PD: Para jQuery no tienes que definir los eventos en los elementos.

No funciona, al abrir la pagina no se abre el mapa es decir no se inicializa la function initialize(), cuando pasa el tiempo que le puse para que refrescara es cuando abre. Quizas metiendo la function initialize() en el ready y quitandola del body onload funcionaria????

alberto510a · #18 (**permalink**) 12/05/2013, 09:27

Como yo te lo puse es para que no pusieras onload en el body.
Lo que hice con jQuery es básicamente que cuando el documento haya cargado simular un click sobre el botón que te calcula la ruta así cuando refresques la página automaticamente se simule solo el click.

satjaen · #19 (**permalink**) 12/05/2013, 09:35

Cita:

Iniciado por alberto510a

Como yo te lo puse es para que no pusieras onload en el body.
Lo que hice con jQuery es básicamente que cuando el documento haya cargado simular un click sobre el botón que te calcula la ruta así cuando refresques la página automaticamente se simule solo el click.

Si pero le he quitado el onload y sigue igual.

alberto510a · #20 (**permalink**) 12/05/2013, 09:36

Si me subes todo a una web y me das el link creo que acabamos antes...así es difícil que me entere del todo de lo que pasa, por favor ponlo.

geofran80 · #21 (**permalink**) 12/05/2013, 12:34

No sé si estaré en lo cierto o no, pero ¿no sería mejor recurrir a Ajax en lugar de refrescar toda la página?

Además existe la función setInterval("reloadMap()", 5000); que permite ejecutar la función cada cierto tiempo, donde en la función podrías hacer uso de Google Maps y Ajax.

Aquí te dejo algunos enlaces que quizás te sirvan:
http://stackoverflow.com/questions/1...-on-google-map

http://community.xajax-project.org/t...-page-refresh/

Saludos cordiales.
Francisco J.

satjaen · #22 (**permalink**) 12/05/2013, 15:25

OK, estudiaré el tema y comento.Gracias a los dos.