02/03/2012
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
Nube de etiquetas
javier oswaldo
Publicado el 19/11/2012 04:42hola 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
Jose Aguilar
Publicado el 19/11/2012 22:38Hola, 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/
alex
Publicado el 28/11/2012 16:15hola 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——-….:)
Jose Aguilar
Publicado el 04/12/2012 14:23Ok, 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.
Lucas
Publicado el 11/12/2012 19:58Tengo 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!
jose
Publicado el 15/01/2013 17:27puede subir el codigo de getservice.php y el de config.php, marca error al ejecutar todo el codigo..
jose
Publicado el 15/01/2013 17:32podrias mostrar el codigo del archivo config.php y getservice para realizar este proceso
JOSE
Publicado el 15/01/2013 22:52TU BLOG ESTA MUY INTERESANTE ME GUSTO..
Pedro
Publicado el 02/05/2013 22:29Estimado que tal, sigo los mismo pasos pero al momento de seleccionar una opción se queda ahí sin mostrar resultado, saludos.
Gabriel
Publicado el 02/12/2013 05:31Hola, 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!
LUCIANO
Publicado el 04/12/2013 19:04amigo 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.
Jose Aguilar
Publicado el 05/12/2013 21:37Es un artículo un poco antiguo pero el código del archivo getservice.php está implícito en la explicación
Arturo
Publicado el 20/11/2014 20:45Que 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
Jose Aguilar
Publicado el 20/11/2014 21:06Hola,
Puede que te sirva lo siguiente: http://www.jose-aguilar.com/blog/combos-dependientes-con-jquery-ajax-php-base-datos/
wilxox
Publicado el 17/12/2014 10:27Buenos 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
Misael
Publicado el 18/08/2015 14:47Hola 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
Jose Aguilar
Publicado el 27/08/2015 19:36Hola buenas tardes,
Ok se puede descargar en el siguiente enlace:
http://jose-aguilar.com/scripts/javascript/ajax-select/ajax-select.zip
Nayely
Publicado el 05/12/2016 16:28Hola 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?
Richard Martinez
Publicado el 31/03/2017 23:56Hola 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
JoseQS22
Publicado el 16/04/2017 03:13Buenas , 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
anderson
Publicado el 16/10/2017 16:02buenas, 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
Raul
Publicado el 17/01/2018 21:03Hola 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
Jose Aguilar
Publicado el 19/01/2018 16:11Hola 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
Kenshi
Publicado el 31/01/2018 15:35me 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’];
Jose Aguilar
Publicado el 01/02/2018 10:10Hola 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
Esteban
Publicado el 25/04/2018 20:53Hola 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
Jose Aguilar
Publicado el 26/04/2018 07:54Hola,
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
Nora
Publicado el 08/03/2019 15:04Hola José:
Muy agradecida por todo el material que publicas.
Puntualmente este ejemplo, me salvó y aprendí mucho.
Que estés muy bien.