Selector cargando datos con ajax
En este artículo vamos a ver como se realiza un selector que al seleccionar una de los opciones muestra una tabla de sus datos utilizando las técnicas AJAX para no recargar completamente la página reduciendo una petición al servidor.
Para disponer de un selector de contenidos utilizando las técnicas AJAX lo primero que deberemos hacer es incluir en el <head> una función AJAX que será la que se encargará de abrir el fichero php y acceder al servidor sin recargar la página mostrando los resultados.
<script type="text/javascript">
function showService(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getservice.php?service="+str,true);
xmlhttp.send();
}
</script>
La función lo que realiza es recibir la id del registro a mostrar abriendo el fichero»getservice.php» pasándole mediante el método GET la id del registro.
En el archivo php realizamos la conexión en la base de datos, realizamos una consulta de los datos del registro con la id enviada y mostramos la información mediante una tabla.
<?php
require('config.php');
$service = $_GET['service'];
$query = mysql_query("SELECT title, price, date_added, date_modified, status FROM services WHERE service_id = '".$service."'", $conexion);
echo "<table border='1'>
<tr>
<th>Titulo</th>
<th>Precio</th>
<th>Fecha de registro</th>
<th>Fecha de modificacion</th>
<th>Estado</th>
</tr>";
while($row = mysql_fetch_array($query)) {
echo "<tr>";
echo "<td>" . $row['title'] . "</td>";
echo "<td>" . $row['price'] . "</td>";
echo "<td>" . $row['date_added'] . "</td>";
echo "<td>" . $row['date_modified'] . "</td>";
echo "<td>" . $row['status'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($conexion);
?>
El formulario que debemos tener el <body> de nuestra página será algo como lo siguiente:
<form>
<select name="services" onchange="showService(this.value)">
<option value="">Seleccione un servicio...</option>
<?php
$query = mysql_query("SELECT * FROM TU_TABLA ORDER BY title asc", $conexion);
while($row = mysql_fetch_array($query)) {
echo '<option value="'.$row['service_id'].'">'.$row['title'].'</option>';
}
?>
</select>
</form>
Mostramos un selector que al seleccionar una opción se llama a la función AJAX pasándole la id del registro. Los registros a seleccionar son capturados de la base de datos
Ver ejemplo en funcionamiento
Autor
¿Buscas trabajo de programador?
28 respuestas a “Selector cargando datos con ajax”
Deja una respuesta
116 artículos que te podrían interesar
Ver más sobre
Hola José:
Muy agradecida por todo el material que publicas.
Puntualmente este ejemplo, me salvó y aprendí mucho.
Que estés muy bien.
Hola Jose primero que nada felicitarte por el apoyo que les das en ejemplos muy prácticos a muchos nuevos programadores….
Estoy subscrito a tu canal y plataforma hace tiempo….Lo mejor es que te vas actualizando y dejando tu un historial arriba.
Pero en esta ocasión como un buen programador (También haciendo referencia que una ayuda mutua no está demás para perfeccionar conocimientos).
EL script php con ajax que presentas en este enlace funciona perfecto….Está añadido y probado con nuestros propios datos de algunos proyectos que tenemos en proceso, pero nos está faltando una parte importante para cerrar el ciclo de esta.
Cuando seleccionas un «option value» del select los datos logicamente son cargado enseguida….(eso mismo lo transformamos en una consulta foreana que termina en un insert register….pero tienes alguna referencia que antes de que se seleccione una opcion te pida confirmación? y a su vez algun result para el eror de insert?
Gracias por tu gestión Profesional….
Atte.
Esteban Evert
Hola,
En principio el post al que estás haciendo referencia es de hace mucho tiempo. Actualmente yo lo haría de otra forma. Con jQuery + Ajax. De todas formas funciona y aceptamos todo tipo de mejoras. Para añadir una confirmación antes de insertar el registro quizá te pueda servir la función confirm(). En el siguiente enlace puedes ver un ejemplo:
https://www.jose-aguilar.com/blog/confirmar-la-eliminacion-de-un-registro/
Saludos
me carga los datos del select pero no muestra nada en la tabla al ejecutar el archivo «getservice.php» me dice: Notice: Undefined index: service in C:\xampp\htdocs\ajax-select\getservice.php on line 4 en esa linea esta declarada la variable: $service = $_GET[‘service’];
Hola buenos días,
Tendrás que hacer debug de tu código. Empieza por comprobar que está llegando con datos la variable str a la función showService(str).
Puedes hacerlo con:
alert(str);
console.log(str);
Para ver que traen.
Saludos
Hola Jose Aguilar. Necesito esto mismo que posteas, pero pasando varios campos (dia, mes y año de nacimiento)
Entonces dependiendo de esta fecha mostrará unos campos adicionales…
¿Como podria adaptarlo?
Gracias de antemano
Hola buenas tardes,
En principio puedes aprovechar este tutorial como base para desarrollar tu requerimiento. Si no sabes como hacerlo, envía un ticket al centro de soporte con todos los detalles de tu solicitud y desde allí ya te indicarán como proceder.
Centro de soporte – https://www.jose-aguilar.com/soporte/
Saludos
buenas, como puedo hacer eso mismo pero que me traiga las consulta de una base de datos de postgresql? estoy trabajando en un sistemas de gestion y quisiera saber como puedo hacer eso mismo que esa función me cargue los datos un trabajador,
por favor si alguien me puede ayudar u orientar con eso, estoy trabajando con un sistema de gestion con php,ajax,js,tpl,postgresql, cada uno en sus carpetas apartes
Buenas , muy buen aporte! He tratado de amoldar estos codigos a postgre y no he podido no me extrae los datos. si es tan amable de ayudarme se lo agradeceria
Hola José, muy interesante tu blog. Me gustaria saber como puedo devolver otro valor si es 0.
if ($totalRows_Recordset2>0){
echo ($row_Recordset2[‘cupo_curso’] – $row_Recordset2[‘totalPago’]).» cupos»;
}else {
echo «hay cupos»;
}
donde:
$row_Recordset2[‘cupo_curso’] = a cupos del curso
$row_Recordset2[‘totalPago’] = total de cursos disponible
me devuelve todo bien pero cuando el totalRows_Recordset2 no encuentre nada me devuelta $row_Recordset2[‘cupo_curso’]
si encuentra cupo dice:
6 cupos de 8
else
8 cupos
Hola jose, disculpa y si quiero que en vez de usar un dropdown, quiero seleccionar una fecha directamente de la tabla y que este se me autocomplete en un formulario con todos los valores de esa fecha seleccionada, como le puedo hacer?
Hola Jose, buenos dias, desde ya muchisimas gracias por tu predisposicion para escribir todo este ejemplo. lo que si yo soy medio nuevo en programacion y no logro hacer andar esto con mi base de datos, vos me podrias hacer el grandisimo e inmenso favor de pasarme estos archivos, y la base sql? porque quiero dejarlo andando y reemplazar tus datos por los mios, evidentemente algo hago mal que no anda, he estado 3 dias casi 9 horas tratando de hacerlo andar y no he podido, me harias el inmeso favor de ayudarme?
Muchas gracias
Misael Pieruccini
Hola buenas tardes,
Ok se puede descargar en el siguiente enlace:
http://jose-aguilar.com/scripts/javascript/ajax-select/ajax-select.zip
Buenos días.
Muy sencillo el ejemplo, ahora mi duda es la siguiente.
Si el código que cargas con ajax getservice.php en el ejemplo incluyera una llamada a javascript (por ejemplo si cargará un al que se le aplica un editor de texto enriquecido que carga via javascript) como quedaría modificada la función para que realice la llamada al código javascript de getservice.php en cada una de las cargas de ajax.
Un saludo y gracias anticipadas.
wilwox
Que tal, mi cuestión es la siguiente
Si yo quisiera realizar 2 o mas consultas mediante select, donde se tendría que poner el código, por ejemplo, quiero seleccionar un servicio y un costo por ejemplo seleccionar 1 el que sea y que se haga la consulta, también seleccionar el 2 y que se haga otra vez la consulta, como un filtro en cascada con sus respectivas consultas
Espero y me haya dado a entender, Saludos cordiales
Hola,
Puede que te sirva lo siguiente: http://www.jose-aguilar.com/blog/combos-dependientes-con-jquery-ajax-php-base-datos/
amigo tengo una consulta, el tutorial es magnifico solo que cuando selecciono un id se me crea otro combo. desde ya muchas gracias por el tutorial.
Hola, Jose esta exelente tu Blog!. Una pregunta no esta para descargar este ejemplo ya que no encuentro como armar el getservice.php? Gracias y saludos!
Es un artículo un poco antiguo pero el código del archivo getservice.php está implícito en la explicación
Estimado que tal, sigo los mismo pasos pero al momento de seleccionar una opción se queda ahí sin mostrar resultado, saludos.
TU BLOG ESTA MUY INTERESANTE ME GUSTO..
podrias mostrar el codigo del archivo config.php y getservice para realizar este proceso
puede subir el codigo de getservice.php y el de config.php, marca error al ejecutar todo el codigo..
hola tengo un pregunta para que utilizas este campo en el script txtHint y como haces para imprimir la tabla….si podrias mostrar el condigo de el archivo getservice.php porfa.. gracias——-….:)
Ok, hemos actualizado la entrada con el contenido del archivo getservice.php. El archivo config.php lo único que hace es conectar y seleccionar la base de datos.
Tengo un problema al mostrar la tabla, consigo mostrar los registros en el archivo principal agregando la conexion a la base de datos pero al hacer click sobre alguno no me devuelve ningun item ni resultado, tiene algo que ver que se llame service y services? porque creo que no llego a comprender este envio y recepcion de datos de donde proviene.
Desde ya muchas gracias y muy buen blog!
hola tengo una pregunta como puedo hacer para llenar un formulario con los campos de direccion y telefono apartir de un campo de texto en el cual le tecleo el nombre de una persona no se si tengas algun ejemplo uso php y mysql gracias
Hola, si se trata de lo que yo creo necesitarás apoyarte de la librería jQuery y ajax para que al escribir en un campo el nombre de una persona te retorne su dirección y teléfono en otros campos.
No tengo el código para ello pero tengo un artículo que te podría servir ya que se trata de la misma idea:
http://www.jose-aguilar.com/blog/comprobar-disponibilidad-de-nombre-de-usuario-en-vivo/