• Ir al contenido
  • Ir a la navegación
  • Ir al buscador
 
Portada Boludo
ING English
Directorio WAP para móvil, Tablet, iPhone o Smartphone

Centro de Noticias de la Universidad de Oriente

Categorías

 

Inicio  |  Contacto  |  Posts  |  TIENDA PUBLISHOP  |  Sobre nosotros  |  Registro y Planes  |  Pagos  |  Donaciones

Ver Código QR de esta página

Campaña #AyudemosaYuli  |  Campaña #AyudemosaStephany.  |  ¿Interesado(a) en cursos y resolución de ejercicios de materias prácticas? Para más información, contáctenos por: Teléfono: +58 (412) - 8226575. WhatsApp y Telegram: +58 (426) - 6836955 o escriba al correo: [email protected]. Únete al grupo: SISTEMAS (UDOMO).

[»] **Musica para tu celular

WEB TRANSLATOR

LINK for English Language

Use this link for translate into English


+ Buscar en BolUDO

 

Mostrar un tooltip con datos recuperados del servidor en forma asincrónica

Tweet
 

domingo julio 10, 2016

16 - Mostrar un tooltip con datos recuperados del servidor en forma asincrónica


Para aplicar varios de los conceptos vistos hasta ahora veamos una implementación de un Tooltip con DHTML y recuperando la información a mostrar del servidor en forma asincrónica. Recordemos que un Tooltip es un mensaje que aparece sobre un objeto cuando disponemos la flecha del mouse sobre el mismo, este recuadro nos informa el objetivo de dicho control.

El archivo HTML muestra un conjunto de div (cuadrados), cuando pasamos la flecha del mouse sobre el cuadrado aparecerá un mensaje, este mensaje lo buscaremos en el servidor.

El archivo HTML es pagina1.html:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></script>
  <link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body id="cuerpo">
  <p>Entre con el mouse al recuadro.</p>
  <div class="cuadradito" id="c1"></div>
  <div class="cuadradito" id="c2"></div>
  <div class="cuadradito" id="c3"></div>
  <div class="cuadradito" id="c4"></div>
</body>
</html>

Luego tenemos el archivo estilos.css:

.cuadradito{
  background-color: #f00;
  height: 50px; 
  width: 50px;
  margin:3px;
  z-index: -1;

}

#divmensaje {
  background-color: yellow;
   position: absolute; 
   visibility: hidden; 
   padding: 5px;
   width:250px;
   z-index: 100;
}

El archivo funciones.js:

addEventListener('load',inicializarEventos,false);

function inicializarEventos()
{
  var vec=document.getElementsByTagName('div');
  for(f=0;f<vec.length;f++)
  {
    vec[f].addEventListener('mouseover',mostrarToolTip,false);
    vec[f].addEventListener('mouseout',ocultarToolTip,false);
    vec[f].addEventListener('mousemove',actualizarToolTip,false);
  }
  var ele=document.createElement('div');
  ele.setAttribute('id','divmensaje');
  vec=document.getElementsByTagName('body');
  vec[0].appendChild(ele);

}

function mostrarToolTip(e) 
{

  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  d.style.left = (e.clientX + document.body.scrollLeft + 15)+'px';
  d.style.top = (e.clientY + document.body.scrollTop + 15)+'px';
  var ref;
  ref=e.target;
  recuperarServidorTooltip(ref.getAttribute('id'));
}

function actualizarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.left = (e.clientX + document.body.scrollLeft + 15)+'px';
  d.style.top = (e.clientY + document.body.scrollTop + 15)+'px';
}


function ocultarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "hidden";
}

var conexion1;
function recuperarServidorTooltip(codigo) 
{
  conexion1=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php?cod='+codigo, true);
  conexion1.send();
}

function procesarEventos()
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  if(conexion1.readyState == 4)
  {
    d.innerHTML=conexion1.responseText;
  } 
  else 
  {
    d.innerHTML = '<img src="../cargando.gif">';
  }
}
Primero obtenemos la referencia a todos los div de la página:
  var vec=document.getElementsByTagName('div');
Definimos las funciones que se disparan para los eventos mouseover, mouseout y mousemove:
  for(f=0;f<vec.length;f++)
  {
    vec[f].addEventListener('mouseover',mostrarToolTip,false);
    vec[f].addEventListener('mouseout',ocultarToolTip,false);
    vec[f].addEventListener('mousemove',actualizarToolTip,false);
  }

Podemos ver que enlazamos la misma función para los eventos mouseover y mousemove, esto debido a que en dicha función mostramos el Tooltip en la coordenada actual del mouse.
Por otro lado la función inicializarEventos crea un div y lo añade al árbol de objetos, este nos servirá para mostrar el mensaje:

  var ele=document.createElement('div');
  ele.setAttribute('id','divmensaje');
  vec=document.getElementsByTagName('body');
  vec[0].appendChild(ele);

La función mostrarTooltip obtiene la referencia del div que muestra el mensaje (hasta este momento está oculto) y cambia la propiedad visibility a "visible", luego llama a la función recuperarServidorTooltip(ref.getAttribute('id')).

function mostrarToolTip(e) 
{

  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  d.style.left = (e.clientX + document.body.scrollLeft + 15)+'px';
  d.style.top = (e.clientY + document.body.scrollTop + 15)+'px';
  var ref;
  ref=e.target;
  recuperarServidorTooltip(ref.getAttribute('id'));
}

La función ocultarTooTip solo oculta el div del mensaje.

function ocultarToolTip(e) 
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "hidden";
}

La función recuperarServidorTooltip recibe el valor del atributo id del div donde se encuentra la flecha del mouse. Se crea un objeto de la clase XMLHttpRequest y se envía el código del div respectivo.

var conexion1;
function recuperarServidorTooltip(codigo) 
{
  conexion1=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php?cod='+codigo, true);
  conexion1.send();
}

Luego la función procesarEventos carga el div y procede hacerlo visible:

function procesarEventos()
{
  var d = document.getElementById("divmensaje");
  d.style.visibility = "visible";
  if(conexion1.readyState == 4)
  {
    d.innerHTML=conexion1.responseText;
  } 
  else 
  {
    d.innerHTML = '<img src="../cargando.gif">';
  }
}

Por último el programa del servidor genera un trozo de HTML dependiendo del código de div enviado (pagina1.php):

<?php
  header('Content-Type: text/html; charset=utf-8');
  if ($_REQUEST['cod']=='c1')
  {
    echo "<p>Primer tooltip.</p>";
    echo "<p>aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa";
    echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaa";
    echo "aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa aaaaaaa";
    echo "aaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa";
    echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaaaa</p>";
  }
  if ($_REQUEST['cod']=='c2')
  {    
    echo "<p>Segundo tooltip.</p>";
    echo "<p>bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbb bb";
    echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbb</p>";
  }
  if ($_REQUEST['cod']=='c3')
    echo "<p>Tercer tooltip.</p>";
  if ($_REQUEST['cod']=='c4')
    echo "<p>Cuarto tooltip.</p>";
?>

En la realidad estos datos generalmente se rescatan de una base de datos, pero para concentrarnos en lo esencial hemos dejado esto de lado.



Problema resuelto.


Implementar un Tooltip con DHTML y recuperando la información a mostrar del servidor en forma asincrónica.


pagina1.html



Ejecutar ejemplo



estilos.css




funciones.js




pagina1.php


Problema propuesto.

Agregar una imagen al tooltip. En el servidor ya hay cuatro imagenes llamadas imagen1.jpg, imagen2.jpg etc. y se encuentran en el directorio inmediatamente superior a donde se almacenan las páginas que codificará ( <img src="../imagen1.jpg"> )
Ver solución




pagina1.html

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Problema</title> <script src="funciones.js"></script> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p>Entre con el mouse al recuadro.</p> <div class="cuadradito" id="c1"></div> <div class="cuadradito" id="c2"></div> <div class="cuadradito" id="c3"></div> <div class="cuadradito" id="c4"></div> </body> </html>

estilos.css

.cuadradito{ background-color: #f00; height: 50px; width: 50px; margin:3px; z-index: -1; } #divmensaje { background-color: yellow; position: absolute; visibility: hidden; padding: 5px; width:250px; z-index: 100; }

funciones.js

addEventListener('load',inicializarEventos,false); function inicializarEventos() { var vec=document.getElementsByTagName('div'); for(var f=0;f&lt;vec.length;f++) { vecp[f].addEventListener('mouseover',mostrarToolTip,false); vecp[f].addEventListener('mouseout',ocultarToolTip,false); vecp[f].addEventListener('mousemove',actualizarToolTip,false); } var ele=document.createElement('div'); ele.setAttribute('id','divmensaje'); vec=document.getElementsByTagName('body'); vec[0].appendChild(ele); } function mostrarToolTip(e) { var d = document.getElementById("divmensaje"); d.style.visibility = "visible"; d.style.left = (e.clientX + document.body.scrollLeft + 15)+'px'; d.style.top = ()e.clientY + document.body.scrollTop + 15)+'px'; var ref; ref=e.target; recuperarServidorTooltip(ref.getAttribute('id')); } function actualizarToolTip(e) { var d = document.getElementById("divmensaje"); d.style.left = (e.clientX + document.body.scrollLeft + 15)+'px'; d.style.top = (e.clientY + document.body.scrollTop + 15)+'px'; } function ocultarToolTip(e) { var d = document.getElementById("divmensaje"); d.style.visibility = "hidden"; } var conexion1; function recuperarServidorTooltip(codigo) { conexion1=new XMLHttpRequest(); conexion1.onreadystatechange = procesarEventos; conexion1.open('GET','pagina1.php?cod='+codigo, true); conexion1.send(null); } function procesarEventos() { var d = document.getElementById("divmensaje"); d.style.visibility = "visible"; if(conexion1.readyState == 4) { d.innerHTML=conexion1.responseText; } else { d.innerHTML = '&lt;img src="../cargando.gif"&gt;'; } }

pagina1.php

&lt;?php header('Content-Type: text/html; charset=utf-8'); if ($_REQUEST['cod']=='c1') { echo "&lt;img src=\"../imagen1.jpg\"&gt;"; echo "&lt;p&gt;Primer tooltip.&lt;/p&gt;"; echo "&lt;p&gt;aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa"; echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaa"; echo "aaaaaaaaaaaaaaaaaaa aaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa aaaaaaa"; echo "aaaaaaaaaaaaaa aaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaa aaaaaaaaaa"; echo "aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaa aaaaaaaaaaaaaaaa&lt;/p&gt;"; } if ($_REQUEST['cod']=='c2') { echo "&lt;img src=\"../imagen2.jpg\"&gt;"; echo "&lt;p&gt;Segundo tooltip.&lt;/p&gt;"; echo "&lt;p&gt;bbbbbbbb bbbbbbbbbbb bbbbbbbb bbbbbbbbbbbbbb bbbbbbbbbbb bb"; echo "bbbbbbbb bbbbbbbbbb bbbbbbbbbbbb bbbbbbbbbb bbbbbbbbbbb bbb&lt;/p&gt;"; } if ($_REQUEST['cod']=='c3') { echo "&lt;img src=\"../imagen3.jpg\"&gt;"; echo "&lt;p&gt;Tercer tooltip.&lt;/p&gt;"; } if ($_REQUEST['cod']=='c4') { echo "&lt;img src=\"../imagen4.jpg\"&gt;"; echo "&lt;p&gt;Cuarto tooltip.&lt;/p&gt;"; } ?&gt;
  Ejecutar ejemplo	

Retornar

— @bolUDOoficial

— Síguenos en Twitter@bolUDOoficial

Categorías: #Ajax, #


[0] Atrás | Directorio
« Inicio
Apps Infoudo
Apps Infoudo ¡Descarga el icono directo en el menú de tu equipo!
[»] Las mejores Apps para tu celular
[»] Imágenes Gratis


Comenta o lee lo que otros opinan

COMPÁRTELO:

Indica que te gusta y comparte

Me Gusta :)Facebook Tuiteame :)Twitter .WhatsApp .Telegram . LinkedIn

También te puede interesar:

Validación de la existencia de un nombre de usuario en forma asincrónica (AJAX)
Pizarra interactiva multiusuario
De JSON a PHP (utilizando la función json_decode)
De JSON a JavaScript (utilizando utilizando la función parse)
De JavaScript a JSON (utilizando la función stringify del objeto JSON)
De PHP a JSON (utilizando la función json_encode)
Recuperar datos del servidor en formato JSON
Qué es JSON?
Encuenta con AJAX
Autocompletar un control de tipo text


« Cargar un control de tipo select  |  Autocompletar un control de tipo text »
 
Apps Infoudo
 
Buscador:
Powered by Google:


Web móvil
Imágenes
La Web

 

Síguenos por RSS


Puedes leerlos mediante el navegador Firefox, lectores de noticias en la computadora o el móvil o usando el servicio de Feedburner de Google para recibir las notificaciones por correo electrónico.
RSS - Suscribirse usando Feedburner de Google

email Recibir las nuevas publicaciones de Boludo por email

Atom


»Ir a URL
.....
Registra Gratis Tu Negocio
....
Sugerir un nuevo sitio WAP

...
¡Bloguea Ya!

..
Registro de Profesionales(Abogados, escritores, doctores, licenciados, ingenieros, etc.)
.
Soporte

Síguenos en las redes sociales

Síguenos en Facebook facebook.com/boludooficial Síguenos en Twitter @bolUDOoficial Síguenos en Instagram @boludooficial Síguenos en Telegram t.me/Boludooficial
Síguenos en WhatsApp BolUDOoficial Síguenos en YouTube youtube.com/@boludo.oficial
Síguenos en Facebook facebook.com/SergioAlemanFans Síguenos en Twitter @SergioAleman1 Síguenos en Instagram @sergioalemanfans
Síguenos en WhatsApp wa.me/qr/Y7Q232VLZPR5O1 Síguenos en Tiktok @sergioalemanoficial Síguenos en Tiktok @sergioalemanfans
Síguenos en Telegram t.me/SergioAlemanOficial Síguenos en YouTube youtube.com/@sergioaleman
Síguenos en Facebook facebook.com/INFOUDO.OFICIAL Síguenos en Twitter @infoudomon Síguenos en Instagram @infoudooficial Síguenos en Telegram t.me/Infoudooficial
Síguenos en Facebook facebook.com/tuinfou Síguenos en Twitter @infoudomonagas
Síguenos en WhatsApp INFO UDO Síguenos en YouTube youtube.com/@infoudooficial

Mis cuentas sociales

FB
Twitter
Pinterest
Instagram
Otras

Móvil: (0426 683 6955 - 0412 8226575) - E-mail: [email protected] - [email protected] - WhatsApp: +58 (0426) 683.69.55


Copyscape
Volver arriba

Protocolo  |  Mapa del Sitio  |  Report Abuse - DMCA  |  Términos y Condiciones  |  Ayuda  |  Privacidad de Datos  |  Política de Cookies  |  Reportar un bug  |  Licencia: CC BY-NC-ND 3.0

Copyright ©2023 Boludo. Todos los derechos reservados. Diseñado y Desarrollado por Sergio Alemán Mi perfil en GitHub


SUBIR