hacer efecto

[viringas]

hola a todos, se me ocurrió una idea para hacer una web mas interesante, es la siguiente,

si yo muestro este texto:

hola que tal


y le pongo un botón al lado para poder modificarlo en plan:

hola que tal <bt modifica texto>

entonces al pulsar q el sitio donde esta el texto se convirtiera automáticamente en un form para introducir un nuevo texto o modificar el texto.

alguien sabe si Jquery permite hacer esto?

o como seria una posible solución para hacerlo

[maycolalvarez]

tienes 2 formas:

1 - tener un input oculto que en el onchange cambie el innerHTML de la capa (div), que se muestre al hacer click en dicho botón

2 - habilitar el contentEditable de dicha capa, (algunas versiones de navegadores no soportan esta característica)

¿jQuery?: para ésto no es necesario

[viringas]

gracias por contestar, estuve indagando en lo que me dijiste y me decanto por la segunda opción ya que html5 permite hacer esto, pero yo tengo un matiz a parte que en todos los ejemplo que vi no hace, veras, mi idea es como tu bien me indicaste esa, pero yo kiero que solo digamos un usuario que sea administrador vea ese botón(lo cual ya tengo echo), pero mi idea es q solo le deje cambiar el texto si pulsa en el botón, no si pone el botón encima del div. para esto si tendría q usar javascript (Jquery) no?

[maycolalvarez]

lo único que necesitas es establecer un ID único por DIV, de modo que puedas obtenerlo y cambiar la propiedad, el botón puede estar en donde sea, no requiere que esté anidado dentro de la capa.

[viringas]

estuve probando a hacer lo q me dijiste y va genial, pero el problema q tengo es q yo quiero guardar ese texto para que quede de forma permanente en la pagina, y no q al recargar se borre, como podría hacer para guardarlo en una base de datos x ejemplo ?

[viringas]

conseguí hacer q me edite el contenido, pero mi idea como bien dije en el post anterior seria guardarlo en una base de datos o así para que tenga consistencia y no se borre al cerrar o recargar la pagina.

Código Javascript:

function toggleEdit() {
                         var newState = !editableText.isContentEditable
                         editableText.contentEditable = newState
                         editableText.className = (newState) ? "editing" : "normal"
                         editBtn.innerText = (newState) ? "guardar" : "editar"
                        }
 

este es el codigo q utilizo, pero mi idea es ahora q una vez pulse en guardar, lo envíe a una pagina php, mediante tipo json para después allí procesarlo y guardarlo en una base de datos, pero no se como puedo hacer para q una vez cambie el botón de estado y pase a guardar envíe los datos

[maycolalvarez]

use AJAX, o envié datos por GET u POST (formularios) de forma tradicional

[viringas]

estoy haciendo eso, pero no doy obtenido el valor de un <p>.

y hago $("#parrafo1").text();

pero no se xq no me cojee el valor

[maycolalvarez]

prueba con innerHTML, para lo que jquery sería html()

[viringas]

ya consigo q envie el texto a otra pagina php para procesarla pero tengo un problema, el estring q envio es recibido por $post pero cuando lo guarda en la base de datos no me aparece nada, es decir me guarda un valor en blanco

a q puede ser debido esto?

te pongo el codigo de como lo hice haber si tu ves algún fallo q yo no logro ver

Código Javascript:

$("#editBtn").click(function(event){
                            if(editBtn.innerText != "guardar"){
                                var txt = $("#parrafo1");
                                 var textoFinal = txt.text();
                                 event.preventDefault();
                                 
                                $.ajax({
                                    url: 'modificaTextoInicio.php',
                                    type: 'POST',
                                    data: {datos : textoFinal},
                                    success: function(){
                                        alert("texto modificado");
                                        }
                                });
                            }
                        });
                    </script>
 

[maycolalvarez]

revisa si en efecto a php le llega la variable post en blanco, a lo sumo debes de postear ese codigo, use una consola de depuración como Firebug

[viringas]

hice un echo de la variable post y no muestra nada, pero en firebug aparece en datos el texto, pero en la variable q se pasa por post aparece muchos caracteres raros es decir:

esto es lo q me muestra firebug:

Parametersapplication/x-www-form-urlencoded
datos
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever sincehsjadhfjsadfsadf the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


Source
datos=%0A++++++++++++++++++++%09Lorem+Ipsum+is+sim ply+dummy+text+of+the+printing+and+typesetting+ind ustry.+Lorem+Ipsum+has+been+the+industry's+standar d+dummy+text+ever+sincehsjadhfjsadfsadf+the+1500s% 2C+when+an+unknown+printer+took+a+galley+of+type+a nd+scrambled+it+to+make+a+type+specimen+book.++%0A %09%09%09%09%09++++++++++++++++++++%0A++++++++++++ ++++++++

[maycolalvarez]

recuerde que debe de escapar la data pasada por POST, use jQuery.Serialize() en su caso

[viringas]

pero serialize() es para recoger los datos de formularios, y yo no tengo ningún formulario, lo q hago es recoger el valor de <p> y lo envio por post,

como podría hacer un serialize() sin tener un form?

[maycolalvarez]

var textoFinal = $("#parrafo1").serialize();

si en dado caso no funciona, también existe la función nativa escape(), aunque la función jQuery.param podría ayudar:

http://api.jquery.com/jQuery.param/

[viringas]

ya consegui solucionar el problema, com param(), gracias por tu aporte