{"id":3965,"date":"2012-08-17T10:55:56","date_gmt":"2012-08-17T10:55:56","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=3965"},"modified":"2019-03-05T17:28:22","modified_gmt":"2019-03-05T17:28:22","slug":"edit-place-me","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/","title":{"rendered":"Edit place me"},"content":{"rendered":"

En este art\u00edculo vamos a explicar como crear un objeto o contenido editable en l\u00ednea sin necesidad de utilizar plugins que no te acaban de satisfacer o realizar la acci\u00f3n que realmente deseas.<\/p>\n

Si hab\u00e9is buscado un poco por internet sobre el asunto, os habr\u00e9is topados con distintos plugins que os podr\u00edan satisfacer como por ejemplo: jEditable<\/a> o EditInPlace<\/a> entre otros.<\/p>\n

Pens\u00e1ndolo un poquito y desarrollando un poco en jQuery, en pocas l\u00edneas podemos conseguir el mismo efecto o mejor ya que la edici\u00f3n del c\u00f3digo ser\u00e1 mucho m\u00e1s sencilla debido a que lo has programado tu y no dependes de ning\u00fan plugin. La personalizaci\u00f3n ser\u00e1 total.<\/p>\n

\"\"<\/a>
\n
\nBien, vamos a ilustrar un ejemplo en el cual tendremos un p\u00e1rrafo que podremos editar en l\u00ednea al hacer click en \u00e9l apareciendo un input o formulario como el anterior.<\/p>\n

Las tecnolog\u00edas que vamos a emplear para ello ser\u00e1n: HTML, PHP, jQuery y AJAX.<\/p>\n

El HTML lo vamos a utilizar para mostrar el p\u00e1rrafo y los inputs necesarios.<\/p>\n

El c\u00f3digo PHP se utilizar\u00e1 para acceder a la base de datos y mostrar los datos del parr\u00e1fo y tambi\u00e9n para actualizar ese campo.<\/p>\n

La combinaci\u00f3n de jQuery-Ajax para acceder a informaci\u00f3n del servidor sin necesidad de recargar la p\u00e1gina. Es decir, vamos a actualizar la informaci\u00f3n depositada en el campo accediendo al servidor sin necesidad de recargar.<\/p>\n

Lo primero que vamos a ver es como recoger la informaci\u00f3n de la base de datos para depositarla en el p\u00e1rrafo HTML.<\/p>\n

Entonces en el <body> tendremos lo siguiente:<\/p>\n

<?php\r\n$conexion = new mysqli(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE);\r\n\r\n$result = $conexion->query(\"SELECT `titulo`, `texto` FROM `jeip` WHERE id=1\");\r\nif ($result->num_rows > 0) {\r\n\u00a0\u00a0\u00a0 while ($row = $result->fetch_assoc()) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $data = array('titulo' => $row['titulo'], 'texto' => $row['texto']);\r\n\u00a0\u00a0\u00a0 }\r\n}\r\n?><\/pre>\n
Utilizamos la clase \u00abmysqli\u00bb de PHP para realizar una conexi\u00f3n con nuestra base de datos obteniendo los resultados que nos interesa.<\/p>\n
Seguidamente, mostramos el p\u00e1rrafo con la informaci\u00f3n recogida de la base de datos y tendremos un contenedor vac\u00edo al que le a\u00f1adiremos el formulario de edici\u00f3n tras hacer click en el p\u00e1rrafo:<\/p>\n
<p id=\"editme\"><?=$data['titulo']?><\/p>\r\n<div id=\"form_save\"><\/div><\/pre>\n
Ahora en el <head> de la p\u00e1gina a\u00f1adiremos la librer\u00eda jQuery y los scripts necesarios para llevar a cabo la acci\u00f3n que se pretende:<\/p>\n
<script type=\"text\/javascript\" src=\"..\/jquery.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n\u00a0\u00a0 \u00a0$('#editme').live('click', function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var data = $(this).html();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(this).empty();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#form_save').append('<input type=\"text\" id=\"campo\" name=\"campo\" value=\"'+data+'\" \/>');\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#form_save').append('<input type=\"button\" id=\"save\" name=\"save\" value=\"save\" \/>');\r\n\u00a0\u00a0 \u00a0});\r\n\r\n\u00a0\u00a0 \u00a0$('#save').live('click', function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var dataString = 'value='+$('#campo').val();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/alert(dataString);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$.ajax({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: \"POST\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url: \"edit.php\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data: dataString,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 success: function(data) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#form_save').empty();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#editme').html(data);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0 \u00a0});\r\n});\r\n<\/script><\/pre>\n
Como vemos, el documento est\u00e1 esperando a que se haga click en el elemento con id=\u00bbeditme\u00bb que no es m\u00e1s que el p\u00e1rrafo con la informaci\u00f3n recogida de la base de datos.<\/p>\n
Al hacer click en este elemento pasamos a recoger su contenido y a armar el formulario de edici\u00f3n.<\/p>\n
La segunda parte del c\u00f3digo jQuery est\u00e1 a la espera de que se pulse en el bot\u00f3n con id=\u00bbsave\u00bb. En este caso, editaremos el campo que aparece y pulsaremos en el bot\u00f3n que aparece para ejecutar el ajax que lo \u00fanico que hace es actualizar el campo en la base de datos con la nueva informaci\u00f3n enviada a trav\u00e9s de este formulario.<\/p>\n
El archivo \u00abedit.php\u00bb que se utiliza en el ajax contiene lo siguiente:<\/p>\n
$conexion = new mysqli(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD, DB_DATABASE);\r\n$update = \"UPDATE `jeip` SET `titulo`='\".$_POST['value'].\"' WHERE id=1\";\r\n$conexion->query($update);\r\necho $_POST['value'];<\/pre>\n
Simplemente conecta con la base de datos asociada, realiza la query para realizar una actualizaci\u00f3n y la ejecuta retornando los datos enviados.<\/p>\n
Ver el ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
En este art\u00edculo vamos a explicar como crear un objeto o contenido editable en l\u00ednea sin necesidad de utilizar plugins que no te acaban de satisfacer o realizar la acci\u00f3n que realmente deseas. Si hab\u00e9is buscado un poco por internet sobre el asunto, os habr\u00e9is topados con distintos plugins que os podr\u00edan satisfacer como por […]<\/p>\n","protected":false},"author":1,"featured_media":3966,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,12,5,3],"tags":[167,79],"class_list":["post-3965","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-html","category-jquery","category-php","tag-eventos","tag-inputs"],"yoast_head":"\nEdit place me - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Edit place me - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo vamos a explicar como crear un objeto o contenido editable en l\u00ednea sin necesidad de utilizar plugins que no te acaban de satisfacer o realizar la acci\u00f3n que realmente deseas. Si hab\u00e9is buscado un poco por internet sobre el asunto, os habr\u00e9is topados con distintos plugins que os podr\u00edan satisfacer como por […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-08-17T10:55:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-05T17:28:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/editplacejquery.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/\",\"name\":\"Edit place me - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/editplacejquery.gif\",\"datePublished\":\"2012-08-17T10:55:56+00:00\",\"dateModified\":\"2019-03-05T17:28:22+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/editplacejquery.gif\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/editplacejquery.gif\",\"width\":350,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Edit place me\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Edit place me - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Edit place me - Jose Aguilar Blog","og_description":"En este art\u00edculo vamos a explicar como crear un objeto o contenido editable en l\u00ednea sin necesidad de utilizar plugins que no te acaban de satisfacer o realizar la acci\u00f3n que realmente deseas. Si hab\u00e9is buscado un poco por internet sobre el asunto, os habr\u00e9is topados con distintos plugins que os podr\u00edan satisfacer como por […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-08-17T10:55:56+00:00","article_modified_time":"2019-03-05T17:28:22+00:00","og_image":[{"width":350,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/editplacejquery.gif","type":"image\/gif"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/","url":"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/","name":"Edit place me - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/editplacejquery.gif","datePublished":"2012-08-17T10:55:56+00:00","dateModified":"2019-03-05T17:28:22+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/editplacejquery.gif","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/08\/editplacejquery.gif","width":350,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/edit-place-me\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Edit place me"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=3965"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/3965\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/3966"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=3965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=3965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=3965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}