[SOLUCIONADO] Funcion loadXMLDoc Ajax

rcuyan40 · #1 (**permalink**) 08/08/2013, 02:30

Estoy desarrollando un pequeño proyecto, para llevar el control de horario de unos cursos de una institucion. Ya cuento con mi base de datos definida y el calendario muy parecido al de esta pagina con ajax que solo busco la fecha desplazandome en el mismo (Ejemplo 1)
http://www.ajaxshake.com/demo/ES/448/dfb38d65/calendario-estilo-windows-vista-en-javascript-para-aplicaciones-web-vista-likecalendar.html

El problema que tengo es que el calendario me escribe automaticamente en el input(donde se escribiria la fecha) al seleccionar el dia, y esto no activa la busqueda en tiempo real a la base de datos. Investigando la funcion que estoy utilizando de ajax "loadXMLDoc" detecta solo lo tecleado por el usuario. No me detecta lo que este el input si no se teclea forzosamente. Algun apoyo. Gracias.

quimfv · #2 (**permalink**) 08/08/2013, 03:10

Yo solucione un caso similar de la siguiente forma:

En el input agregue un evento

Código HTML:

Ver original<input id="exampleI" type="text" maxlength="10" style="width: 80px;" name="date" onBlur="busca(this.value)">

Donde "busca" es la funcion que lanza la busqueda en la bbdd, esta recibe como parametro el valor del input, se haya introducido como se haya introducido.

Luego en la función que gestiona el calendario le agregue al final una llamada al evendo onBlur del input.

La funcion que activa el formulario recibe el id del input, sino no podria poner el valor, luego puedes usar ese id para hacer

document.getElementById(id).onblur();

con lo que se ejecutará la funcion "busca", con el valor que tenga.

Se podria substituir esa linea por una llamada a la función "busca", pero al ponerlo separado, es decir en el evento del input, podras usar el mismo codigo modificado del calendario para ejecutar cualquier función que pongas en el evento del objeto.... (imagina que en otro sitio necesitas ejecutar una funcion digamos "borrar()" o simplemente en otro calendario no necesitas ejecutar nada onBlur="").

Ademas tiene la ventaja de que si alguien no usa el calendario e introduce a mano la fecha tambien se ejecutara al abandonar el input.

Yo trabajaba con "calendarpopup.js" de Matt Kruse http://www.mattkruse.com/ que es similar pero no la misma que estas usando tu, por eso no puedo ser mas concreto en la respuesta.

rcuyan40 · #3 (**permalink**) 08/08/2013, 23:03

Gracias por responder quimfv.

Donde me pierdo es donde me indicas que "busca" sera la nueva funcion que lanzara la busqueda a mi base

Este es mi codigo que envia el Post

Código PHP:

  <!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> 
 
<title>Calendario</title> 
<script type="text/javascript" src="ajax.js"></script> 
<!-- <link rel="stylesheet" type="text/css" href="estilos.css" /> --> 
<!-- <META HTTP-EQUIV="REFRESH" CONTENT="2;URL=index.php"> --> 
 
<!-- Calendario--> 
    <meta http-equiv="content-language" content="en" /> 
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
 
     
    <link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1.css" type="text/css" /> 
    <link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1-adobe_cs3.css" type="text/css" /> 
    <link rel="stylesheet" media="screen" href="styles/vlaCal-v2.1-apple_widget.css" type="text/css" /> 
     
    <script type="text/javascript" src="jslib/mootools-1.2-core-compressed.js"></script> 
    <script type="text/javascript" src="jslib/vlaCal-v2.1-compressed.js"></script> 
 
    <style> 
 
    input { 
        text-align: center; 
        font-family: calibri, arial, sans-serif; 
        font-size: 13px; 
        background-color: white; 
        border: 1px solid; 
        border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea; 
        padding: 2px; 
    } 
    input:focus, input:hover  { 
        border-color: #5794bf #b7d5ea #c7e2f1 #c5daed; 
    } 
 
    </style> 
 
        <script type="text/javascript"> 
        window.addEvent('domready', function() {  
 
            new vlaDatePicker('exampleII', { separator: '-', leadingZero: true, twoDigitYear: false, offset: { y: 3 }, alignX: 'center', alignY: 'bottom', format: 'y/m/d' }); 
         
        });     
        </script> 
</head> 
<body> 
 
<center>     
<h1> 
    <b>Prototipo I - Calendario</b> 
</h1> 
 
 
 
Feha<input id="exampleII" name="date" type="text" style="width: 80px;" maxlength="10" onBlur="busca(this.value)" onkeyup="loadXMLDoc()" required /> 
</br></br> 
    <style> 
 
    margin-top: 10px; 
    border-style:dashed; 
    width: 500px; 
    height: 500px; 
    background-color:#F0FFF0; 
    text-align: left; 
    color:#00008B; 
    padding:10px 10px; 
 
    </style> 
     
<div id="myDiv"></div> 
</center> 
 
</body> 
</html>

El Post que recibe y query

Código PHP:

  <?php 
 
include 'conexion.php'; 
 
$variable_post=$_POST['variable_post']; 
$conexion_db=conexion(); 
 
$query_fecha="select  alumno.nombre as alumno, fecha.fecha as fecha, hora.hora as hora, profesor.nombre as profesor from alumno, fecha, hora, hofeproal, profesor where hofeproal.idalumno = alumno.idalumno and hofeproal.idfecha = fecha.idfecha and hofeproal.idhora = hora.idhora and hofeproal.idprofesor = profesor.idprofesor and fecha.fecha LIKE '".$variable_post."%'"; 
$datos_fecha=mysql_query($query_fecha,$conexion_db); 
$fila_db = mysql_fetch_assoc($datos_fecha); 
$total_fecha = mysql_num_rows($datos_fecha); 
?> 
<!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> 
    <title>Horario</title> 
    <link rel="stylesheet" type="text/css" href="../style/style.css"/> 
    <!-- <META HTTP-EQUIV="REFRESH" CONTENT="2;URL=index.php"> --> 
</head> 
<body> 
    <table border="1" > 
        <tr> 
            <td>Alumno</td> 
            <td>Fecha</td> 
            <td>Horario</td> 
            <td>Profesor</td> 
        </tr> 
<?php do { ?>     
        <tr>     
            <td><?php echo $fila_db['alumno'];?></td> 
            <td><?php echo $fila_db['fecha'];?></td> 
            <td><?php echo $fila_db['hora'];?></td> 
            <td><?php echo $fila_db['profesor'];?></td> 
        </tr> 
<?php } while($fila_db=mysql_fetch_assoc($datos_fecha)) ?> 
    </table> 
    </body> 
    </html>

Si pueden hecharme otra manita

quimfv · #4 (**permalink**) 09/08/2013, 00:55

Ok... lo mismo pero pon

onBlur="loadXMLDoc()"

El evento onkeyup se produce al soltar cada una de las teclas que presiones en el imput no tiene sentido lanzar la función hasta que la fecha este completa.

http://librosweb.es/javascript/capit...eventos_2.html

La idea es que el datepiker ademas de rellenar el input lance la función... con el evento que sea, en rea lidad estara lanzando el evento y este a su vez la función...

O
document.getElementById(id).onblur();

o
document.getElementById(id).onkeyup();

o el evento que sea...lo de busca() era un ejemplo.

Por esto

...fecha.fecha LIKE '".$variable_post."%'"

me temo que tengas el campo fecha como varchar, es un error te pierdes toda la potencia de un campo fecha.... MONTH(fecha) es capaz de darte el mes...y otras ventajas.

Claro que tendrás que convertir la fecha a YYYY-mm-dd

Código php:

Ver original$query_fecha="select  alumno.nombre as alumno, 
           fecha.fecha as fecha, 
           hora.hora as hora, 
           profesor.nombre as profesor 
from (((hofeproal INNER JOIN alumno ON hofeproal.idalumno = alumno.idalumno)
                           INNER JOIN  fecha ON hofeproal.idfecha = fecha.idfecha)
                           INNER JOIN  hora ON hofeproal.idhora = hora.idhora)
                           INNER JOIN  profesor ON hofeproal.idprofesor = profesor.idprofesor
where fecha.fecha='".$variable_post."';

(Mas eficiente y moderna)

rcuyan40 · #5 (**permalink**) 10/08/2013, 23:31

Gracias por tu apoyo quimfv.

EL onblur si lo utilice pero no me es factible porque necesitaria utilizar el Enter o tab para que sea funcional y lo que deseo es utilizar unicamente el mouse

Por otra parte con tu orientacion utilice el onclick.

Llamandolo desde otro boton este manda a llamar la funcion "loadXMLDoc()"asi utilizar unicamente el mouse.

Este es mi codigo.

Código PHP:

  Feha <input id="exampleII" name="date" type="text" style="width: 80px;" maxlength="10" /> 
     <input type="submit" name="date" value="Ok" onclick="loadXMLDoc()" required />

El campo de la base si la tengo como DATE.

Gracias, Un Abrazo