Problema con codigo para ocultar div

federicomatiasbais · #1 (**permalink**) 29/08/2012, 08:14

hola estoy usando un codigo que encontre en la web

copie el codigo fuente pero en mi archivo creado no funciona y si en el que yo lo copie , que puede ser?

Código HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>
<link type="text/css" href="css/styles.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
    $("#element").hide();
  });
  $("#show").click(function(){
    $("#element").show();
  });
});
</script>
<script type="text/javascript">

$(document).ready(function() {

    $("#enviar-btn").click(function() {
            
        var name = $("input#name").val();
        var message = $("textarea#message").val();

        var dataString = 'name=' + name + '&message=' + message;

        $.ajax({
            type: "POST",
            url: "addcomment.php",
            data: dataString,
            success: function() {
				$("#element").hide();
                $('#newmessage').append('<h2>Tu información ha sido recibida correctamente!</h2><table><tr><td>Nombre:</td><td>'+name+'</td></tr><tr><td>Mensaje:</td><td>'+message+'</td></tr></table>');
            }
        });
        return false;
    });
});
</script>
</head>

<body>
<div class="header"><h2>Cabecera de simulación para ver el efecto jquery-ajax</h2></div>
<div id="newmessage"></div>
<a href="#" id="show">Mostrar</a>
<div id="element" style="display: none;">
   <div id="close"><a href="#" id="hide">cerrar</a></div>
   <form method="post" action="">
        Nombre:<br/>
        <input type="text" id="name" name="name" size="40" /><br/><br/>
        Mensaje:<br/>
        <textarea name="message" id="message" rows="6" cols="40"></textarea>
        <br/><br/>
        <div style="margin-left: 376px;"><input name="submit" type="submit" value="enviar" id="enviar-btn" /></div>
    </form>
</div>
<div style="display:none"><b></b>
</div>
</body>
</html>

iukaeru · #2 (**permalink**) 30/08/2012, 10:01

A ver si nos ahorras un poco de trabajo. ¿Y qué es lo que no funciona?

YYs86 · #3 (**permalink**) 30/08/2012, 11:01

A ver vamos a ir optimizando el codigo poco a poco:

- En el enlace: <a href="javascript:void(0)" ...>
- En la función "$("#enviar-btn").click()": Yo personalmente utilizaría $.serialize() y te ahorrarías dos variables
- En el "<script>": Sobra lo siguiete

Código Javascript:

Ver original});
</script>
<script type="text/javascript">
 
$(document).ready(function() {

Una vez hecho esto metele un alert despues de definir tu dataString y mandanos la salida a ver que te aparece.

^^