En este art\u00edculo vamos a ver como se realiza un selector que al seleccionar una de los opciones muestra una tabla de sus datos utilizando las t\u00e9cnicas AJAX para no recargar completamente la p\u00e1gina reduciendo una petici\u00f3n al servidor.<\/p>\n
Para disponer de un selector de contenidos utilizando las t\u00e9cnicas AJAX lo primero que deberemos hacer es incluir en el <head> una funci\u00f3n AJAX que ser\u00e1 la que se encargar\u00e1 de abrir el fichero php y acceder al servidor sin recargar la p\u00e1gina mostrando los resultados.<\/p>\n
<script type=\"text\/javascript\">\r\nfunction showService(str) {\r\n\u00a0\u00a0\u00a0 if (str==\"\") {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(\"txtHint\").innerHTML=\"\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 return;\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 if (window.XMLHttpRequest) {\/\/ code for IE7+, Firefox, Chrome, Opera, Safari\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 xmlhttp=new XMLHttpRequest();\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 else {\/\/ code for IE6, IE5\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 xmlhttp=new ActiveXObject(\"Microsoft.XMLHTTP\");\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 xmlhttp.onreadystatechange=function() {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 if (xmlhttp.readyState==4 && xmlhttp.status==200) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 document.getElementById(\"txtHint\").innerHTML=xmlhttp.responseText;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0 xmlhttp.open(\"GET\",\"getservice.php?service=\"+str,true);\r\n\u00a0\u00a0\u00a0 xmlhttp.send();\r\n}\r\n<\/script><\/pre>\nLa funci\u00f3n lo que realiza es recibir la id del registro a mostrar abriendo el fichero\u00bbgetservice.php\u00bb pas\u00e1ndole mediante el m\u00e9todo GET la id del registro.<\/p>\n
En el archivo php realizamos la conexi\u00f3n en la base de datos, realizamos una consulta de los datos del registro con la id enviada y mostramos la informaci\u00f3n mediante una tabla.<\/p>\n
<?php\r\nrequire('config.php');\r\n\r\n$service = $_GET['service'];\r\n\r\n$query = mysql_query(\"SELECT title, price, date_added, date_modified, status FROM services WHERE service_id = '\".$service.\"'\", $conexion);\r\n\r\necho \"<table border='1'>\r\n<tr>\r\n<th>Titulo<\/th>\r\n<th>Precio<\/th>\r\n<th>Fecha de registro<\/th>\r\n<th>Fecha de modificacion<\/th>\r\n<th>Estado<\/th>\r\n<\/tr>\";\r\n\r\nwhile($row = mysql_fetch_array($query)) {\r\n\r\n\u00a0\u00a0\u00a0 echo \"<tr>\";\r\n\u00a0\u00a0\u00a0 echo \"<td>\" . $row['title'] . \"<\/td>\";\r\n\u00a0\u00a0\u00a0 echo \"<td>\" . $row['price'] . \"<\/td>\";\r\n\u00a0\u00a0\u00a0 echo \"<td>\" . $row['date_added'] . \"<\/td>\";\r\n\u00a0\u00a0\u00a0 echo \"<td>\" . $row['date_modified'] . \"<\/td>\";\r\n\u00a0\u00a0\u00a0 echo \"<td>\" . $row['status'] . \"<\/td>\";\r\n\u00a0\u00a0\u00a0 echo \"<\/tr>\";\r\n}\r\n\r\necho \"<\/table>\";\r\n\r\nmysql_close($conexion);\r\n?><\/pre>\nEl formulario que debemos tener el <body> de nuestra p\u00e1gina ser\u00e1 algo como lo siguiente:<\/p>\n
<form>\r\n\u00a0\u00a0\u00a0 <select name=\"services\" onchange=\"showService(this.value)\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <option value=\"\">Seleccione un servicio...<\/option>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $query = mysql_query(\"SELECT * FROM TU_TABLA ORDER BY title asc\", $conexion);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 while($row = mysql_fetch_array($query)) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo '<option value=\"'.$row['service_id'].'\">'.$row['title'].'<\/option>';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ?>\r\n\u00a0\u00a0\u00a0 <\/select>\r\n<\/form><\/pre>\n