jQuery

Cargar JSON desde PHP usando jQuery y AJAX

AJAX, PHP y jQuery: carga de datos

AJAX, PHP y jQuery si bien no están ligados, se relacionan para crear aplicaciones web dinámicas usando tecnologías libres.

En este post te mostraré cómo usar la librería jQuery para traer datos HTML y JSON desde PHP, todo eso sin refrescar la página.

Para ello haremos una petición HTTP GET usando el método $.get de jQuery; de este modo vamos a poder usar la técnica de AJAX usando jQuery y PHP.

Continue reading…

jQuery y select - Manipular elemento HTML

Select y jQuery: obtener seleccionado, agregar opción, limpiar y escuchar cambios

jQuery sigue siendo una librería usada en estos últimos tiempos. Me atrevo a decir que es el framework más usado en el entorno de JavaScript, aunque claro, existen mejores por mucho, pero no vamos a discutir eso hoy.

La librería de jQuery y su forma de seleccionar los elementos permite interactuar con los mismos de una manera muy fácil, pero debemos aprender los métodos.

jQuery y select - Manipular elemento HTML

jQuery y select – Manipular elemento HTML

Por eso es que en este post veremos cómo trabajar con el elemento select de HTML desde jQuery. Veremos cómo:

  • Obtener elemento seleccionado del select (la opción)
  • Agregar una opción al select
  • Limpiar el select, es decir, remover todas las opciones
  • Escuchar cuando el usuario seleccione otra opción del select.

Todo esto con jQuery, si quieres ver cómo se hace con JavaScript puro mira este post.

Nota: si quieres ver la demostración de lo que haremos aquí puedes entrar a este enlace.

Continue reading…

Menú responsivo de Bootstrap 4 sin dependencias

En este post voy a mostrarte un ejemplo de código para tener el menú responsivo de Bootstrap sin dependencias como jQuery, usando únicamente algunas líneas de JavaScript puro.

Bootstrap es el framework CSS por excelencia. Casi todo programador web lo conoce, es de hecho una base que hay que tener. Sin embargo, tiene una desventaja y es que normalmente no funciona sin jQuery (u otros frameworks).

Continue reading…

Subir foto desde jQuery a un servidor con PHP y CodeIgniter utilizando AJAX

Introducción

Hoy veremos cómo subir una foto o imagen a un servidor PHP. Dicha foto será elegida por el usuario desde un input de tipo file. La subiremos utilizando la clase FormData de Javascript en conjunto con la clase para recibir archivos en CodeIgniter.

Esto lo haremos utilizando AJAX, por lo que la experiencia del usuario será mejor. Este post funciona para imágenes GIF, PNG o JPG pero supongo que igualmente podemos subir archivos de cualquier tipo.

Lado del cliente

En el lado del cliente tengo mi input de tipo file, con un id para tener una referencia a él desde jQuery. También tengo un botón que servirá para enviar el archivo. No hay formulario porque como tal no enviaremos un formulario, enviaremos un archivo por AJAX:

En Javascript tengo la referencia al input y al botón. Escucharemos el click del botón y accederemos al arreglo de archivos de nuestro input. Con ello crearemos un objeto de tipo FormData y luego lo mandaremos por AJAX a nuestro controlador de CodeIgniter:

Con eso ya hemos terminado la parte del cliente. Vamos con el servidor.

Lado del servidor

En nuestro controlador de CodeIgniter debemos cargar el ayudante para subir archivos. Recibir la imagen será pan comido. En mi caso, mi método se llama ponerFotoAlumno y se ve así:

Lo que hacemos es simplemente recibir el archivo y guardarlo en la carpeta fotos_alumnos. Las opciones que puse son simplemente para aceptar imágenes que no excedan el peso de 2 MB.

Conclusión

Con esto pude subir una foto con FormData utilizando AJAX y jQuery. Hay opciones para cambiar el nombre de la imagen, recibir el nombre con el que se guardó, etcétera. La documentación oficial la dejo abajo.

Por cierto, en mi caso utilizo JSON para devolver la respuesta de la petición y trabajar con ella en el cliente, pero esto es opcional y podemos manejarlo como deseemos.

Referencias

Aquí dejo las especificaciones de cada cosa utilizada.

Clase para trabajar con archivos subidos en CodeIgniter

FormData

jQuery y checkboxes: obtener, cambiar y vigilar valores

Introducción

jQuery es un framework que todavía (en pleno 2018) es muy utilizado por muchísimos programadores. Al trabajar en checkboxes, entradas de tipo checkbox o cajas de selección es muy probable que nos preguntemos cómo obtener el valor o estado de cada campo.

También puede que necesitemos cambiar el valor. Es decir, seleccionar una caja de texto en jQuery. Finalmente veremos cómo detectar cuando el estado de un checkbox cambia, es decir, que el usuario lo marque o lo desmarque.

¿Qué es un checkbox?

Antes de continuar; y para no confundir al usuario, hablamos de una caja de selección o checkbox, como el siguiente:

Ahora sí comencemos.

Obtener el estado/valor de un checkbox

Para esto, debemos tener nuestro elemento de jQuery que representa al input. Por ejemplo, podemos tener algo así:

<input id="mi_caja" type="checkbox">

Y para obtener su valor, llamamos al método is y le pasamos como argumento la cadena “:checked” así:

var estaSeleccionado = $('#mi_caja').is(":checked");

Aquí un ejemplo:

Establecer valor/estado

Ahora veamos cómo cambiar el valor de una caja de selección. Para ello, ahora utilizamos el método prop. El primer argumento será la cadena “checked” y el segundo una variable booleana para indicar si queremos marcarlo o desmarcarlo.

Marcar un checkbox

$("#mi_caja").prop("checked", true);

Desmarcar un checkbox

$("#mi_caja").prop("checked", false);

Ejemplo

He aquí un pequeño plunker:

Escuchar cambios

Para terminar este post, veremos cómo escuchar cuando el usuario selecciona o des-selecciona una caja de texto. En este caso simplemente adjuntamos una función que será llamada en el evento change del input. Así:

$("#mi_caja").change(function() {
    alert("Cambio");
  });

Plunker de ejemplo:

Y con eso terminamos 🙂

Establecer opción seleccionada en Select con MaterializeCSS y jQuery

Introducción

Hacer que un select tenga una opción seleccionada con jQuery es una tarea fácil, lo mismo que con MaterializeCSS. Sólo que para que éste último funcione, debemos refrescar el select para que tome la opción que le dimos.

Seleccionar opción en select con MaterializeCSS

Seleccionamos el elemento HTML utilizando jQuery, y le ponemos el valor como lo haríamos con cualquier otro select. Pero después de esto, llamamos a material_select para que los cambios se refresquen. Así:

En este caso, se supone que el select tiene el id miSelect.

Recuerda que el valor que le pongamos debe ser un valor que esté en las opciones. Es decir, no puedes poner un valor que el select no tenga en sus opciones.

Mira el ejemplo de abajo.

Ejemplo para poner valor en un select

Vamos a poner un select y dos botones con los que podremos cambiar la opción del select sin que el usuario tenga que hacer click en él. El código HTML queda así:

Más tarde, en el script esperamos a que el documento esté listo. Iniciamos el componente y escuchamos el click de los botones.

Cuando se hace click en cualquier botón, se selecciona la opción 1 o 2. Si vemos las opciones del select, podemos ver que en el atributo value tienen esos números. Lo que quiero dar a entender es que no debemos seleccionar ningún valor que no esté en las opciones.

Demostración en codepen

Aquí dejo un pen para probar lo que acabamos de hacer.

See the Pen Seleccionar opción en select con materializecss by Luis Cabrera Benito (@parzibyte) on CodePen.

Y con eso terminamos.

Idioma español de datepicker en Materialize CSS

Introducción

MaterializeCSS es un framework CSS que implementa Material Design. Es utilizado junto con jQuery. Tiene muchos componentes, entre ellos el datepicker.

Un datepicker es un control para que el usuario elija una fecha. Por defecto, viene en inglés, pero podemos cambiarlo a cualquier idioma, y en este caso será al español.

Cambiar idioma de datepicker

Es muy simple. Una vez que el documento esté listo, seleccionamos a todos aquellos elementos HTML que tengan la clase datepicker y llamamos al método pickdate. Le pasamos como primer argumento un objeto con las etiquetas en el idioma de nuestra preferencia.

En este caso, las configuramos en español. Como podemos ver, proporcionamos la traducción de meses y días, así como sus formas cortas. Y también algunas cosas como la navegación y los botones de “Limpiar” y “Hoy”.

El código de ejemplo en Javascript es este:

Y el HTML para mostrarlo es el siguiente:

Demostración de cambio de idioma de MaterializeCSS y Datepicker

Aquí dejo un pen para demostrar que esto realmente sirve.

See the Pen Datepicker y Materialize CSS en español by Luis Cabrera Benito (@parzibyte) on CodePen.