[Javascript] Ejemplo de modificar campos con el plugin X-Editable

El plugin X-Editable sirve para editar elementos directamente desde la tabla donde se muestra, mejorando la experiencia del usuario.

Después de que se muestra la tabla el usuario tiene que hacer clic en el elemento, se abre un popup con los campos para modificar.

Introduccion

El plugin X-Editable sirve para facilitar la edicion de datos y asi mejorar la experiencia del usuario, ya que el usuario no tiene que ir a otra vista para modificar los datos, en la misma pantalla puede modificar varios campos de diferentes entradas de manera facil.

El plugin y su documentacion lo pueden conseguir de su pagina oficial: https://vitalets.github.io/x-editable/

El plugin funciona con Bootstra 3, Bootstra 2, Jquery UI y Plano. También cuenta con muchos parámetros de configuración, callbacks y es compatible con plugins como date pickers, select2 y wysiwyg, entre otros.

Funcionamiento

En la siguiente imagen se puede ver el funcionamiento del plugin.

Al hacer click en el campo se muestra una ventana “popup” y se puede modificar el campo, al hacer click en el boton azul se guardan los datos, el boton blanco es cancelar.

Implementacion

La implementacion básica del plugin es relativamente fácil.

En este ejemplo vamos a usar Bootstrap 3, necesitamos lo siguiente:

• Archivos Css y js de bootstrap
• Jquery.min.js
• Archivo Css y Js de X- Editable

Incluimos los archivos necesarios en la pagina donde lo implementaremos.

Una vez que incluimos los archivos, debemos crear la conexion a la base de datos y mostrar la tabla con los datos que vamos a usar.

En los elementos de la tabla donde queremos implementar el X-Editable debemos usar lo siguiente:

<a href=“#“ id=“date_at“ data-type=“date“ data-name=“date_at“ data-pk=““ data-url=“update.php?field=date_at“ data-title=“Fecha“>Ejemplo</a>

Es un enlace con los siguientes parametros:

• id: El id del elemento, debe ser unico, ya que este id lo usaremos para hacer una llamada en Jquery/javascript.
• data-type: El tipo de dato, puede ser texto, select, textarea, date, entre otros.
• data-name: El nombre del campo en el formulario
• data-pk: El id de la entrada en la base de datos, o bien la primary key
• data-url: La URL donde se enviaran y procesaran los datos.
• data-title: El titulo del popup.
• En el texto “Ejemplo” debe ir el valor almacenado en la base de datos.

Una vez creado el o los elementos, se debe crear los X-Editable con Jquery.

[code language=”javascript”]

$(‘#date_at’).editable();

[/code]

Y por ultimo debe tener el codigo del archivo que actualizara los datos, en este caso update.php.

[code language=”php”]

include "connection.php";
if(isset($_GET["field"]) &amp;&amp; $_GET["field"]=="date_at"){
$sql = "update event set date_at=\"$_POST[value]\" where id=$_GET[id]";
$con-&gt;query($sql);
}
[/code]

Y listo.

Descarga

A continuación el paquete de descarga con todos los archivos.

[sociallocker]

Link: https://drive.google.com/file/d/1cahMTDCy1-Lboe4iv_6osqSdBpQjGURu/view?usp=sharing

[/sociallocker]

Conclusión

X-Editable es fácil de implementar y ayuda mucho para mejorar los sistemas.

Alguna duda o comentario?