Ajax Sin Ajax, Facil y muy util Por Mtech (19/11/2017)

Blog sobre Programacion en Estados Unidos

Ajax Sin Ajax, Facil y muy util

Sin recargar la pagina podremos validar formularios, captchas, obtener datos de MySQL, cambiar secciones de la pagina consultando a MySQL, cambiar componentes y muchas funciones mas y muy utiles que suelen ser de complejidad alta utilizando Ajax. Para poder realizar esto basta con incluir un iframe y un poco de codigo muy sencillo javascript.

Funcionamiento basico

Para lograr validar formularios y otras operaciones sin recargar la pagina sera necesario. (Por el momento los ejemplos seran utilizando formulario.)

  • Incluir un iframe con id. Mientras estemos en modo desarrollo puede ser grande ya que nos servira para depurar el codigo php. Luego bastara con css añadirle un estilo display:none.
  • Incluir un formulario y agregar target="id_iframe"

Listo! Ya estas ejecutando codigo PHP y consultas MySQL sin recargar la pagina. Mas adelante estara explicado como enviar mensajes y datos a la pagina principal. 

Ej. teorico para formulario de registro en un sitio web.

El usuario completa el formulario  con nombre, email, sitios web, etc, etc. Pero el email ya esta registrado. Al enviar el formulario se ejecutara validar.php dentro del iframe sin recargar la pagina. Validar.php encontrara que el email ya existe y mostrara un mensaje al usuario indicando que utilice otro email. El usuario modificara el email y nuevamente realizara click en registrarme. Todo esto sin recargar ni cambiar de pagina.

Antiguamente se guardaban los datos en sesiones y luego de recargar la pagina se completaban mediante programacion. Es el caso cuando en algunos sitios web luego que nos informa de algun error se vacian algunos campos que ya habiamos completado.

Desde el iframe tambien podras validar si el capcha es correcto.

Otro ejemplo seria incluir un select con categorias, luego en el lugar de las subcategorias deberias incluir un iframe. Cada vez que se cambie la categoria cambiaran las subcategorias. Esto es muy simple y mas adelante esta el detalle y codigo. Tener en cuenta que al quitarle los bordes al iframe quedara totalmente invisible para el usuario.

Sin recargar pagina

<!doctype html>
<html>
<head>
<meta charset="utf-8>
<title>Sin recargar pagina</title>
</head><body>
<form method="post" action="validar.php" target="iframe">
    <nput type="text" value="" name="nombre"; id="nombre" />
    <input type="text" value="" name="email" id="email" />
    <input type="submit" />
</form>
<iframe name="iframe" id="iframe" frameborder="0"></iframe>
</body>
</html>

Enviar mensajes a pagina principal desde Iframe

Una vez que el codigo de validacion se ha ejecutado debe enviar un mensaje al usuario indicando si la operacion fue valida o no.

  • Si no es valida mostraremos un mensaje de error y el motivo.
  • Si la pagina es valida redirigiremos la pagina principal a la seccion de usuarios registrados.

En el documento principal debemos incluir una etiqueta html, puede ser <div id="mensaje">&nbsp;</div>. El id es necesario. &nbsp; es utilizado para que no cambie el tamaño al enviarle texto desde el iframe, aunque tamaño color, etc. podras configuralo con CSS.

Desde validar.php. Si hay algun error como email repetido. Enviaremos el mensaje con el siguiente codigo.

<script type="text/javascript">
parent.document.getElementById("mensaje").innerHTML="La cuenta de correo ya existe";
</script>

document.getElementById permite acceder a objetos html mediante su ID

Antes incluimos parent. esto indica que es el documento principal, ya que este codigo se esta ejecutando en un iframe.

innerHTML permite modificar el contenido del objeto

 

Si el registro fue valido redireccionaremos la pagina principal a la seccion de usuarios registrados

<script type="text/javascript">
parent.document.location="registrados.php";
</script>

Para mayor organizacion del codigo es recomendable asignar a una variable php llamada por ejemplo $resultado_js con el codigo javascript sin las etiquetas de apertura y cierre luego al final del documento incluiras:

<?php echo '<script>' . $resultado_js . '</script>'; ?>

 

Crear selector de categorias y subcategorias

Para poder mostrar subcategorias dependiendo de la categoria elegida debes en primer lugar tener los datos almacenados en la base de datos, suponiendo que habra marcas en categorias y modelos de vehiculos en subcategorias la base de datos seria similar a la siguiente:

Tabla marcas

   id    marca

Tabla modelos

   id_modelo   nombre     id_marca

cada vez que agregues un nuevo modelo tendras que añadirle el id de marca. Por supuesto podrias agregarle mas datos como el año, color, motor, etc. Pero para crear el selector de marcas y modelos alcanza con los datos mencionados.

En nuestro documento principal llamado selector.php incluiremos un select html y un iframe. El select incluira onchange="cambiarsub(this.value)".  Y en el head o antes de </body>(recomendado) incluiremos la funcion cambiarsub(). 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<body><label for="select">Select:</label>
<select name="select" id="select">
  <option>Audi</option>
  <option>Chevrolet</option>
  <option>Ford</option>
</select>
<iframe name="iframe" id="iframe" frameborder="0"></iframe>
<script type="text/javascript">
function cambiarsub(categoria){
    document.getElementById("iframe").src="cambiarsub.php?categoria=" + categoria;
}
</script>
</body>
</html>

Listo! la funcion cambiarsub() mostrara el contenido de cambiarsub.php cada vez que se cambie de categoria.

En cambiarsub.php obtendras el id de la categoria con $_GET["categoria"] con lo cual podras realizar una consulta "SELECT  * FROM modelos WHERE id_marca=" . $_GET["marca"]. El codigo para cambiarsub.php seria:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<body>
<select name="subcategoria" id="subcategoria">
  <option value="0">Elegir categoria</option>
<?php 
    $categoria=$_GET["categoria"];
    $sql="SELECT  * FROM modelos WHERE id_marca=" . $categoria;
    $rs_subcategorias=$db->obtener;
    
    foreach ($rs_subcategorias as $sub){
        echo '<option value="' . $sub->id_modelo . '">' . $sub->nombre . '</option>';    
    }
?>
</select>
</body>
</html>

En cambiarsub.php sera necesario agregar algunos estilos css para que el selector de subcategoria quede igual al selector de categorias. Principalmente seria quitar margenes y padding al body y los estilos basicos del select.

Para añadir nuevas subcategorias podras realizarlo desde el archivo cambiarsub.php. En resumen deberias en el select de categorias incluir un option con un id especial. En la funcion cambiarsub() si el id es el del option "agregar subcategoria" solicitar mediante javascript el nombre de las subcategoria y en src="cambiarsub.php" añadir un parametro mas con &add=1. De esta forma en cambiarsub.php preguntas si add=1 antes realiza un insert a la base de datos.

Comparte tu opinion o comenta

Cuenta tu opinion o amplia el contenido del articulo