Edición en línea de elementos (edit in place) con Programación Orientada a Objetos en JavaScript, Ajax, JSON y PHP

En este HowTo vamos a crear una clase, que agrupa una serié de métodos, los cuales nos van a permitir la edición de elementos en línea (edit in place). La solicitud se realiza con Ajax y los datos se podrán guardar en una en una base de datos haciendo uso de PHP.

El ejemplo funcionando lo tienes disponible siguiendo este enlace.

Uso de Clases y JavaScript

Las clases en JavaScript nos permiten crear objetos, para así organizar e implementar comportamientos mediante el uso de funciones o métodos.

Cada método de una clase realiza un proceso, por lo que además de hacer más legible nuestro código, vamos a tener más organizados nuestros procesos, lo que nos hará más fácil su ampliación en un futuro.

La construcción de clases en JavaScript es muy similar a otros lenguajes como PHP. Para empezar necesitamos crear una nueva clase a la que llamaremos Forms que contiene una serie de métodos o funciones.

Como es una clase sencilla no va a contener muchos métodos. Dichos métodos realizan las siguientes tareas:

  • A través del constructor() podremos recibir argumentos los cuales son asignados a this.
  • createForm() se encarga de crear el formulario y recibe dos argumentos que corresponden a los valores de los atributos id y method del elemento <form>.
  • createInput() se encarga de crear un elemento <input> por lo que tendremos que pasarle los atributos type, id y value.
  • createButton() se encarga de crear los elementos <button> que se encargan de guardar y eliminar el formulario. Recibe el valor de los atributos id y value.
  • closeEvent() se encarga de crear el evento que cierra y elimina el formulario de edición.
  • submitEvent() se encarga de crear el evento para enviar el formulario. Crea la llamada haciendo uso de Ajax para crear la solicitud que va enviar los datos al servidor y este nos devolverá una respuesta en caso de éxito.
  • editInline() es el método principal y se encarga de llamar a todos los métodos.

Creación de Objetos

Toda clase suele escribirse capitalizando la primera letra y tan sólo puede ser ejecutada mediante el operador new.

Una vez tenemos creado el Objeto, se nos va a permitir el acceso a sus métodos. En nuestro caso vamos a acceder al método editInline() que se encarga de llamar al resto de métodos, que crean el formulario y todos sus eventos.

Haciendo elementos editables

Para hacer editables elementos de nuestra página, necesitamos crear el objeto y declarar dos parámetros:

  • El primero contiene el valor del atributo type del elemento que se va a crear <input type=»text»>
  • El segundo el valor del atributo id del elemento que se queremos editar y que usaremos obtener los valores del elemento <input>

La Clase JavaScript

La clase se encarga de crear todos los elementos del formulario y sus eventos.

Llamada al servidor

Los datos serán enviados al servidor para ser tratados con PHP y se puede proceder a guardarlos en la base de datos . Cualquier dato o error será devueltos en formato JSON.

El ejemplo funcionando lo tienes disponible siguiendo este enlace y en jsfiddle

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.