Ayuda para desarrollar aplicacion sencilla en ajax y mysql

Gustavo_21 · #1 (**permalink**) 13/03/2011, 17:47

Hola a todos, estoy necesitando desarrollar una aplicacion en principio muy sencilla pero no se por donde empezar. Tengo conocimientos de php y mysql pero lo que quiero hacer no es posible solo con esos lenguajes.

Lo que tengo que hacer es poner un texfield y que al ingresar un codigo X chequee en la base de datos si está. Si no está lo inserta y si esta muestra la fecha y hora en que se insertó. Por otro lado y acá viene la parte mas complicada es que cuando inserto el codigo me muestre una foto (que tengo en la base) y haga foco de nuevo en el textfield.

Para resumir y dejar solo lo que necesito es que al insertar un codigo me busque en la base la foto y me la muestre abajo, tratando de que no se redimensionen los espacios, y que el foco se amntenga siempre en el textfield. Del resto me puedo encargar yo. Pido en ajax porque no quiero recargar la pagina una y otra vez.

La idea es leer productos con un scanner y que sea uno atras del otro, por eso necesito que envie el form con enter y no con boton. Es para ingresar unos 15.000 por día, los codigos nuestros son de 10 caracteres donde los primeros 6 son del producto que hay que mostrar la foto y los otros 4 el identificador unico para no leer algo 2 veces... de esto me puedo encargar.

Gracias y espero que me puedan dar algunas ideas. Yo mientras tanto voy a chusmear otras secciones donde puedo ser util.

Saludos!!

El_Metallick · #2 (**permalink**) 13/03/2011, 21:55

mmm bueno como sabes php y mysql te daré sólo la parte de ajax

Código Javascript:

Ver originalfunction newAjax() { 
    var xmlhttp = false;
    
    try {
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    } catch(e) {
        try {
            xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
        } catch(E) {
            if(!xmlhttp && typeof XMLHttpRequest != 'undefined') {
                xmlhttp = new XMLHttpRequest();
            }
        }
    }
    
    return xmlhttp; 
}
 
function searchImage() { 
    var code = document.getElemetById('code').value;
    var content = docuemt.getElementById('content');
    
    ajax.open('POST', 'searchImage.php?', true);
    ajax.onreadystatechange = function() { 
        if (ajax.readyState == 4) {
            content.innerHTML = ajax.responseText;
        }
    }
    
    ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');  
    ajax.send('code='+code);
}

En el HTML algo así:

Código HTML:

Ver original<form action="#" onSubmit="javascript: searchImage();">
Código: <input type="text" id="code" name="code" />
<br /><input type="submit" value="Enviar" />
</form>
<p id="content"></p>

Consideraciones:

la página searchImage.php debe tener:

un $variable = $_POST['code']; para rescatar el código ingresado y hacer la consulta
y en caso de haber una imagen guardada retornar el html de la imágen, es decir algo de la forma

<img src="<?= $foto ?>" />

y con eso debería funcionar, si no me avisas y le hecho una mirada

Saludos

Gustavo_21 · #3 (**permalink**) 14/03/2011, 06:06

Gracias por la respuesta. Tengo el siguiente problema:

Despues de mandar el codigo el foco no regresa al textfield y segundo es que agrega el simbolo # al final. El contenido del searchimage.php no lo esta mostrando en ningun lado... no me queda claro en donde tengo que poner la imagen una vez que traje la ruta de la db...
Probé dentro de se searchimage.php poner la ruta completa a la foto (no variable) y no muestar nada...

Saludos.

El_Metallick · #4 (**permalink**) 14/03/2011, 12:24

lo del foco puedes hacerlo con la etiqueta on load de body algo así:

<body onLoad="javascript: document.getElementById('code').focus()">

claro el contenido del searchImage.php es simplemente la consulta a la base de datos retornando la imagen, cuando rescates la ruta desde la base de datos la imprimes en la etiqueta html algo así

<?php
//Conexión a la BD
//Consulta SQL
?>
<img src="<?php echo $ruta; ?>" />

Gustavo_21 · #5 (**permalink**) 14/03/2011, 12:37

Lo del focus esta bien, lo de la imagen te decia que no se muestra. Ni siquiera si en searchimage.php le pongo una imagen fija sin db...

Saludos.

El_Metallick · #6 (**permalink**) 14/03/2011, 13:08

el problema está en la línea 21 del primer código

var content = docuemt.getElementById('content');

puse docuemt en vez de document, cambialo por

var content = document.getElementById('content');

saludos

Gustavo_21 · #7 (**permalink**) 14/03/2011, 17:59

Ahora si! MIL Gracias!!

En realidad lo que estaba haciendo mal era que lo que se debe mostrar abajo ve en content, no en otra pagina php... funciona todo solo con una pagina.

En base a esto, voy a poder seguir desarrollando la aplicacion... lo dificil es el primer paso!

Pregunto para quienes esten siguiendo el hilo... Quiero hacer un cuadro que si se inserta el registro sea verde y si se repite sea rojo... que lenguaje debo utilizar?

Saludos!

El_Metallick · #8 (**permalink**) 14/03/2011, 18:28

esto lo puedes hacer con javascript modificando la propiedad css del cuadro según corresponda.

por ejemplo:

document.getElementById('cuadro').style = "background-color: #FF0000";

ahora puedes crear un input del tipo hidden que mantenga un valor booleano (verdadero o falso) para determinar que color va en el campo. Este campo hidden deberías modificarlo según el resultado de una consulta o algo así. Para eso puedes hacerlo mediante el método value, por ejemplo

document.getElementById('hidden').value = true;

luego para ver verde o rojo puedes verlo algo así:

Código Javascript:

Ver originalvar condicion = document.getElementById('hidden').value;
 
if(condicion) {
    //Es repetido pongo el cuadro rojo
    document.getElementById('cuadro').style = "background-color: #FF0000";
} else {
    //No es repetido pongo el cuadro verde
    document.getElementById('cuadro').style = "background-color: #00FF00";
}

Gustavo_21 · #9 (**permalink**) 14/03/2011, 19:08

Buenisimo, que fácil que la haces... voy a hacer toda la parte de sql asi va tomando forma. Saludos y gracias de nuevo!

El_Metallick · #10 (**permalink**) 14/03/2011, 19:31

espero entiendas mas o menos como funciona lo que te pase para que vayas aprendiendo también que la verdad es que no es tan complicado, es más práctica.

Saludos