Efectos con Input (validacion, guardar y editar)

[sergiold]

Hola a todos,

llevo varios dias haciendo un formulario un tanto especial. Lo que pretendo es que el usuario vaya rellenando los datos y a la que el dato se ajuste a las especificaciones cambiar el estilo. Bueno esto ya esta hecho.

Luego el usuario pasaría a otro campo, en este momento el campo que acaba de rellenar pasa a ser un simple párrafo con el contenido, y mediante XAJAX el contenido se transmite a PHP que lo almacena.

Ahora viene el problema, intento hacer que apretando en el párrafo (div) vuelva a aparecer el mismo input con el contenido y con todos los atributos que tenía antes para la validación, el blur...

He conseguido hacer aparecer el input mediante un botón a parte, pero no desde el mismo div, además el nuevo input no hace la validación instantánea y cuando se hace el blur no reconoce el id...

Así que estoy muy bloqueado y no sé como continuar. Si alguien supiera decirme como sería la lógica del código que debo hacer para almacenar el input completo momentaneamente que luego vuelva a aparecer o algo así... lo agradecería mucho.

Saludos,

[SiR.CARAJ0DIDA]

si es algo como el quick edit del foro, yo hice cosas parecidas para mi pagina y basicamente es asi:

el parrafo o la capa con el texto tiene el evento onclick / ondblclick, cuando el evento ocurre guardas en una variable global el contenido del parrafo y creas un campo de texto / textarea. a ese campo de texto se le agrega el evento onblur y se le copia el contenido de esta variable, cuando ocurre el evento se compara el nuevo contenido con el anterior, si cambió se hace el update y al parentNode del campo de texto se hace un innerHTML con su contenido. si el valor es el mismo obviamente no se hace el update.

[sergiold]

Vale, entonces es más o menos lo que he estado intentando yo.

A ver si me explico bien porque si la lógica de lo que se tiene que hacer es esta debe ser otro tipo de problema:

- tengo un Input con diferentes atributos, entre ellos algunos inventados por el script de validacion como mask="email"...

- cada input tiene su id y está contenido en un div, el id de este div es "c" + id del input.

- cuando hay un onblur en algun input lo que hago es coger el innerHTML del div contenedor, guardarlo en una variable global y substituirlo por el value.

- además le añado un onclick al div contenedor del tipo "funcion('idInput')"

- ahora está el problema, parece ser que este onclick no me lo reconoce porque apreto y no hace nada.

Sin embargo, si en vez de poner solo el value tambien añado un boton con el mismo onclick entonces si que funciona, pero no del todo. Es decir, me vuelve a aparecer el input y el evento onblur funciona pero:

1. Ya no valida
2. No le puedo hacer un focus()

Por lo que deduzco que no reconoce el id ni otros atributos de validación.

Estoy bastante liado, haber si alguien encuentra alguna solución.

Si lo necesitais puedo poner el código que utilizo...

PD. Para la validación uso http://www.dhtmlgoodies.com/scripts/...alidation.html

Saludos,

[SiR.CARAJ0DIDA]

pone el codigo, pero lo mas importante: en que navegador probaste si funciona o no? porque si funciona en firefox tu codigo anda perfecto, solo hay que hacerle 5000 modificaciones para que ande en explorer. por ej, explorer no soporta agregar eventos de esta forma:

setAttribute('onclick', "funcion_loca('parametro loco', 'otro parametro loco')");

[sergiold]

Pues tienes razón! Solo lo he probado con IE, debe ser eso. La verdad es que siempre lo pruebo todo primero con IE y luego lo paso a FF.

Para añadir atributos lo hago:

noseque.onclick="noseque"

Voy a probarlo en FF, a ver si funciona...

En todo caso luego cuelgo el código.

Saludos y gracias!

[sergiold]

Bueno aunque con bastante retraso aquí voy con el código, lo he estado probando con los dos y no me funciona en ninguno:

Funciona la validación, el onblur() que envia el dato mediante ajax y el javascript que añade el contenido en forma de texto simple. Sin embargo a la que intento hacer click en la capa ya no me vuelve a mostrar el contenido del input.

Este sería un campo de texto:

Código HTML:

<p>
<div class='ncampo'><label for='nombrew'>Nombre/Empresa:</label></div>
<?
if(!isset($_SESSION['nombrew'])){
echo "<div id='cnombrew' style='vertical-align:middle;'><input name='nombrew' type='text' id='nombrew' size='25' class='text' required='1' onblur='procesaForm(\"nombrew\")'></div>";
}else{
echo $_SESSION['nombrew'];
}
?>
</p> 

Este sería el código del javascript (onblur y, en teoría, onclick):

Código HTML:

var html = new Array();
function procesaForm(id){
	if(document.getElementById(id).className=="invalidInput"){
		window.alert("El tipo de dato que has introducido es incorrecto, por favor asegurate de haberlo escrito correctamente.");
	}else{
	valor = document.getElementById(id).value;
	html[id]= document.getElementById("c"+id).innerHTML;
	document.getElementById("c"+id).innerHTML=valor
	document.getElementById("c"+id).onclick="cInput('"+id+"')";
	xajax_procesaForm(id, valor);
	return false;
	}
}
function cInput(id){
	document.getElementById("c"+id).innerHTML=html[id];
	document.getElementById(id).focus();
}

Seguramente va a ser algo de javascript así que si lo ve un moderador y lo cree conveniente que cambie el post de foro.

Saludos y gracias de nuevo!

[Calisco]

Yo encontre este articulo que por ahi te puede servir. Yo hoy estoy empezando a estudiar e implementar esto. Por ahi te puede servir. Esta en un wiki en español http://www.ajax.com.es/, y el enlace directo es http://www.ideasfreelance.com/lab/instant_edit/.

[sergiold]

Muchas gracias por el enlace. Voy a mirarmelo con detenimiento a ver si logro sacar algo que me sirva.

Saludos,

[Calisco]

Estuve viendo otros scripts que te pueden ayudar. Los publice en mi Blog. Fijate que hay una seccion "AJAX Scripts". Yo creo que te pueden llegar a servir.
Saludos.