Foros del Web » Programando para Internet » Javascript »

insertar efecto fadeout al eliminar campo

Estas en el tema de insertar efecto fadeout al eliminar campo en el foro de Javascript en Foros del Web. Hola. Tengo una tabla (html) con mensajes en una base de datos con la que interacciono mediante ajax (y php). En la tabla se muestra ...
  #1 (permalink)  
Antiguo 02/07/2010, 18:16
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 13 años, 9 meses
Puntos: 11
insertar efecto fadeout al eliminar campo

Hola.

Tengo una tabla (html) con mensajes en una base de datos con la que interacciono mediante ajax (y php).

En la tabla se muestra un link junto a cada mensaje con la opcion de borrar dicho mensaje. El codigo funciona pero he intentado insertar un jquery para darle un efecto fadeOut a la fila borrada aunque sin exito.

Los codigos:

Código HTML:
<table id="tabla" class="tabla" name="tabla" border="1" align="center">

<thead align="center">
	<th>Titulo</th>
	<th>Nota</th>
</thead>

<?php
//declaracion de variables para la tabla
$i=1;
while($row["nota".$i]) 
	{
	$nota[$i] = $row["nota".$i];
	$titulo[$i] = $row["tnota".$i];
	$i++;
	}
	
//celdas	
for ($j=1;$j<=$i-1;$j++)
	{
	?><tr align="center">
		<td><a href="#" name="t<?php echo $j;?>" id="t<?php echo $j;?>" value="valor<?php echo $j;?>"><?php echo $row["tnota".$j];?></a></td>
		<td><?php echo $row["nota".$j]; ?></td>
		<td><a href="" onClick="eliminar('<?php echo $j;?>'); recargar(); return true;" class="borrar" id="<?php echo $j;?>" value="<?php echo $j;?>"><img src="borrar.png" border="0px" height="20px"/></a></td>
	</tr><?php
	}


	
?>
</table> 
funcion ajax que recoge el mensaje a eliminar:
Código:
function eliminar(numero){
var div = document.getElementById('tabla');
var pregunta = confirm("Seguro que quieres borrar este mensaje??");
if (pregunta){
ajax=objetoAjax();
ajax.open("POST", "borrar_nota.php",true);

ajax.onreadystatechange=function()
	{
	if (ajax.readyState==4)
		{
		div.innerHTML = ajax.responseText;
		}
	}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("numero="+numero);
	};
}
y esta es la funcion que estoy intentando insertar en el codigo anterior.
Código:
$(document).ready(function(){
$("a.borrar").click(function(){

id = $(this).parents("tr").find("td").eq(0).html();
respuesta = confirm("Seguro que quiere eliminar este mensaje?");
if (respuesta){
$(this).parents("tr").fadeOut("normal", function(){
$(this).remove();
alert("Mensaje eliminado");
/*
aqui puedes enviar un conjunto de datos por ajax
$.post("eliminar.php", {ide_usu: id})
*/
})
}
});
});
Tb queria perdiros consejo de paso pq no se si esta seria la manera mas correcta de hacer esto. Se trataria de borrar un mensaje de una tabla, tan solo un campo dentro de un registro....existe alguna manera mas sencilla de hacer esto?? (lo digo por la precariedad del codigo html que he tenido que crear para lograr esto).

Si de momento voy bien....me podeis echar 1 cable?? Es que miro la funcion jquery pero no le veo nada mal....claro que tp entiendo mucho de esta libreria... He insertado casi tal cual el jquery, quitando la funcion eliminar, pero nisiquiera veo el efecto. Como podria insertar el ajax dentro del jquery??

muchas gracias!
  #2 (permalink)  
Antiguo 02/07/2010, 19:33
Avatar de DooBie  
Fecha de Ingreso: septiembre-2004
Mensajes: 1.101
Antigüedad: 19 años, 6 meses
Puntos: 71
Respuesta: insertar efecto fadeout al eliminar campo

Mirate este evento, creo que con eso solucionaras el problema.

Cualquier duda, postea de nuevo.
  #3 (permalink)  
Antiguo 03/07/2010, 20:13
 
Fecha de Ingreso: junio-2010
Mensajes: 373
Antigüedad: 13 años, 9 meses
Puntos: 11
Respuesta: insertar efecto fadeout al eliminar campo

He hecho un "reset".

Ahora si que solo necesito lo que hay en el titulo. Como inserto aqui un fadeout para que desaparezca la fila adecuada???(la función del success no funciona).


Código:
$(document).ready(function(){
	$("a.borrar").click(function(){
		titulo=$(this).attr("value");
		var pregunta = confirm("Seguro que quieres borrar el mensaje:"+titulo);
		if (pregunta){
			$.ajax({
			type: "POST",
			url: "borrar_nota.php",
			data: "titulo="+titulo,
			success: function(){
					$(this).parents("div").fadeOut("slow", function(){
						$(this).remove();
						});
			              }
			});
		};
	});
});

Código HTML:
<div id="tabla" class="tabla">

<div class="fila">
<div class="col_titulo" style="width:200px">Titulo</div>
<div class="col_titulo" style="width:200px">Fecha</div>
<div class="col_titulo" style="width:50px">Borrar</div>
</div>

<?php
for ($j=1;$j<=$i-1;$j++)
	{
	?><div class="fila">
		<div class="col" style="width:200px"><?php echo $titulo[$j];?></div>
		<div class="col" style="width:200px"><?php echo $fecha[$j];?></div>
		<div class="col" style="width:50px"><a class="borrar" value="<?php echo $titulo[$j];?>" href=""><img src="borrar.png" border="0px" height="20px"/></a></div>
	</div><?php
	}
?>
</div> 
un saludo y muchas gracias!

Última edición por oms02; 03/07/2010 a las 22:22

Etiquetas: efecto, eliminar, fadeout, campos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:41.