Rellenar Div con Jquery (AJAX) y PHP
Los expertos.
Estoy intentando realizar un mapa que muestre provincias y localidades.
Mi idea principal es que al pasar el mouse por encima de un área (área del mapa que tiene asignada la provincia) me rellene automáticamente un div con la información de esa provincia usando ajax.
Este es el código que tengo puesto, pero no consigo que funcione correctamente.
<! DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>EJEMPLO</TITLE>
<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="jquery.js"></SCRIPT>
<LINK REL="STYLESHEET" HREF="style.css" />
<SCRIPT TYPE="text/javascript">
$(document).ready(function(){
$("area").mouseover(function(){
$("#mapa").html(function(){
$.ajax({
url: "recinfo.php",
data: {provincia: $("area").mouseover().attr('title')},
dataType: 'json',
success: data
});
});
});
});
</HEAD>
<BODY>
<DIV ID="MAPA"></DIV>
</BODY>
</HTML>Aunque aquí no lo haya puesto, tengo creado un mapa interactivo usando la extensión maphilight de jquery que funciona perfectamente, pero a la hora de intentar hacer esto no me sale.
Aquí pongo lo que tengo en el archivo "recinfo.php":
¿
<?
Require_once('sql.php');
$provincia = mysql_real_escape_string($_GET['provincia']);
$resultado = "$provincia<br />Localidades: etc";
header('Cache-Control: no-cache, must-revalidate');
header('Content-type: application/json');
echo json_encode($resultado);
?>Este es más o menos el ejemplo que estoy usando.
No funciona...
1 Respuesta
Por lo pronto veo que el selector al que tienes asignado el evento "onmouseover" es incorrecto:
$("area"). MouseoverEsto está seleccionando un elemento HTML llamada "area" que no tienes en tu HTML.
¿Entiendo qué este "area" es el mapa interactivo que generas con maphilight no? Si es así estoy seguro de que tiene un selector por ID o por clase que puedes utilizar.
Revisa el código que te genera, modifica el selector y me dices.
Gracias por la rapidez de tu respuesta Víctor.
He probado lo siguiente.
En la página HTML:
<area id="divcomplete" href="#" title="Alicante" shape="poly" coords="etc" />
En jquery:
$("#divcomplete").mouseover(function(){
$("#mapa').html(function(){
$.ajax({
url: 'recinfo.php',
data: {provincia: $("#divcomplete").attr('title')},
dataType: 'json',
success: data
});
});
});
Esto significa que cuando paso el ratón por el área con el identificador "divcomplete", debería recoger la información del atributo "title" (que en este caso seria el nombre de la provincia) y mandarlo por ajax a la página que indico, que en este caso se encargaría de procesar la información y devolver los valores solicitados.
Pero nada de eso ocurre.
No entiendo exactamente a que te refieres con el selector "onmouseover", no se si estoy en lo correcto, pero en jquery, "mouseover" es el selector que se utiliza.
Saludos.
Vale, entonces si hay un elemento "area" en tu código, jeje (es que antes no lo habías puesto).
¿Ese elemento "area" lo creas tu o el plugin de mapas? Si está desde el principio en tu página te debería funcionar con el selector $("area") que habías usado inicialmente.
Si no, si se crea dinámicamente, es posible que le problema está en que cuando se establece el handler que escucha el evento onmouseover el elemento area aún no existe.
En ese caso cambia el selector por este otro:
$(document). On('mouseover', 'area', function () { ...Este selector está sobre document (que obviamente existe en el momento de hacer $(document). Ready) y, cada vez que se añada un hijo a dicho nodo, si ese hijo coincide con el selector "area", se creará el handler para el evento mouseover sobre dicho elemento.
Gracias nuevamente por responder.
No, los área no se generan dinámicamente, están escritos todos manualmente en el HTML (manualmente quiero decir que, escribí cada provincia con su área y coordenadas manualmente :V, me llevo un largo tiempo je je), por lo que son fijos en la página.
La extension maphilight lo unico que hace es recoger la informacion de coordenadas de cada area y asignarla en el mapa (que es una imagen de españa) para que cuando pases el raton por encima de una provincia esta se ilumine.
Por lo que llevo varios días con dolor de cabeza por este problema, he probado prácticamente cualquier función (creo) y no funciona ninguna, nninguna es capaz de devolverme el valor solicitado en ajax y cargarlo en el div.
Saludos.
Vale, entonces olvida lo que te he comentado.
El problema tiene que estar en otro punto, ¿el evento mouseover se dispara correctamente?
Pon un breakpoint dentro (o un alert mismo, lo que te sea más fácil) y dime si salta.
¿Da algún error de javascript?
Mira la consola de desarrolador (F12) y dime si está registrando algún error.
Otra cosa que acabo de ver al revisar tu código js se que habían un par de cosas mal (como el modo en el que obtenías la provincia) te lo he corregido y apañado un poco para ganar legibilidad:
$("area").on("mouseover", function(e){
var provincia = e.target.attr("title");
var data = {provincia: provincia};
$.ajax({
url: "recinfo.php",
data: data,
dataType: 'json',
success: function(result){
$("#mapa").html(result);
}
});
});
Si, me da un único error:
Uncaught TypeError: undefined is not a function (anonymous function) jQuery.event.dispatch elemData.handle
¿Antes o después de cambiar el código que te he puesto?
Despues del codigo...
La cosa es que el error viene de la extensión jQuery
Vas a tener que debuggar paso a paso para encontrar el error.
Te recomiendo que uses Chrome que es el que tiene el depurador más completo.
Pulsa F12 para abrir la consola, pincha en Sources, busca tu fichero javascript en el arbol de la izquierda, y pincha en el número de línea donde tienes:
var provincia = e.target.attr("title");pon otra dentro de la función success del ajax.
Luego puedes continuar paso a paso pulsando F10 hasta que de un error. Cuando tengas la línea revisamos que debe ser alguna chorrada que no está bien definida.
Ya esta solucionado. Muchas gracias Víctor por tu ayuda, un día te invito a una cerveza :P
He cambiado el código:
var provincia = e.target.attr("tiitle");por este otro:
var provincia = $(this).attr("title");funciona perfectamente.
Muchas gracias nuevamente. Saludos.
¡Genial!
Cierto, dentro de un callback de un evento relacionado con un elemento el scope es el mismo elemento (vamos, que this es la area que ha provocado el evento).
No olvides puntuar la respuesta y me apunto lo de la cerveza ;-)
Hola Bartosz Karallus,
Recuerda dar una puntuación a la respuesta si te ha sido de ayuda o pedirme más información si aún te falta algo por resolver.
Hola Víctor.
Ayer ya puntúe la respuesta y finalice la pregunta, pero por lo visto no reacciona esto... je je.
Ahora mismo no me permite nada más que enviar este gracias...
He visto que has valorado como "prefiero no valorar" (que es una valoración en si misma, je je).
Si quieres cambiarlo tienes abajo un link que pone "cambiar" para que vuelva a aparecer la botonera :)
