(jQuery) - ¿Qué hago mal? textarea y .load()

[uikekarallo]

hola, llevo ya unas cuantas horas con esto y pido papas.

la historia es enviar una variable por get a un script php para que inserte los datos en una db, el div se recargaría de forma asíncrona y tendría una bonita especie de chatbox/guestbook.

os dejo el código a ver si me podéis ayudar.

Código PHP:

          var usuario = $('#nombreUsuario').val();
        var comentario = $('.textoComentario').val();
        var enviarComentario = $('.enviarComentario');
 
        enviarComentario.click(function()
        {
            if( !comentario )
            {
                return false;
            }
            else
            {
                $('.cargaComentarios').load('scripts/nuevoComentario.php?nick='+ usuario +'&comentario='+ comentario.replace(/ /g,"\+") , function()
                {
                    $('.cargaComentarios').load('index.php .cargaComentarios');
                })
            }
        }); 
   

lo gracioso, es que cuando lo hice de primeras funcionaba! así que no entiendo que pasa ni por aproximación.. es algo que tengo en el index, y cuando lo acabé seguí a lo mío con el resto de la página web... y cuando tengo ya casi todo terminado,, quiero probar de nuevo y ya no funciona no sé que puede influir... quité el resto de código js que tengo y no soluciono...

var comentario = $('.textoComentario').val(); no me recoge nada cuando antes sí lo hacía. qué podría ser?

el .load() tampoco lo ejecuta, ni aún quitando ese if. ya no cabe decir que no llega hasta el php. y hace ~5 horas funcionaba... x_x

alguna idea¿? gracias!!

[uikekarallo]

soy un impaciente... arrojemos más código....

Código PHP:

             <div id="cargaComentarios">
                        <?php
              $peticion = "select * from comentarios order by id asc limit 200";
              $datos = mysql_query($peticion);
              
              while( $fdatos = mysql_fetch_array($datos) )
              {
                echo '<p><strong>'.$fdatos['nick'].':</strong> '.$fdatos['comentario'];
              }
            ?>
          </div>
        </div>
        <input type="hidden" id="nombreUsuario" value="<?php echo $_SESSION['usuario']; ?>" />
        <p><textarea class="textoComentario" <?php if( $_SESSION['usuario'] == "invitado" ){ echo 'disabled="disabled"'; } ?>><?php if( $_SESSION['usuario'] == "invitado" ){ echo 'Sólo los usuarios registrados pueden escribir mensajes.'; } ?></textarea></p>
        <p><input class="boton enviarComentario" <?php if( $_SESSION['usuario'] == "invitado" ){ echo 'disabled="disabled"'; } ?> type="button" value="" /></p>  

ese es el trozo del index.php donde están los inputs y el botón de envío que enlazan al script js de antes.

a ver si alguien ve algo que yo no veo un saludo

[Dany_s]

le estas diciendo a load que te cargue el contenido en un elemento con clase "cargaComentarios"

pero en tu html no tenes nada con clase cargaComentarios, pero si tenes un div con id cargaComentarios, mejor seria que a load le digas que cargue en ese div

$('#cargaComentarios').load jeje


si arreglas eso te va a funcionar pero vas a tener un problema, cuando llamas a load va a cargar en el div, pero en la segunda también por lo que va a sobreescribir

hace con get

Código Javascript:

$.get('primera.php' , function(datos){
    $('#cargaComentarios').html(datos);
    $.get('segunda.php' , function(datos){
        $('#cargaComentarios').append(datos);
    });
});
 

llamas a la primera paginas para traer datos, en el callback lo agregas al div, y llamas a la seguda y en el callback de esa agregas al div con append


pero mejor seria que envies el comentario a la db y que si inserta te devuelva true o false, si es true lo agregas al div, solo el valor de el/los campos y no traer todo un html completo

y ya que estamos podrias llamar a los comentarios de la db con ajax también pero al ingresar a la página

en vez de

Código PHP:

<?php
              $peticion = "select * from comentarios order by id asc limit 200";
              $datos = mysql_query($peticion);
              
              while( $fdatos = mysql_fetch_array($datos) )
              {
                echo '<p><strong>'.$fdatos['nick'].':</strong> '.$fdatos['comentario'];
              }
            ?>
 

traer eso con ajax, en un formato json o xml :)

[uikekarallo]

uuhhmmm gracias! está claro que a veces es mejor dejar las cosas para el día siguiente ^^

ni se me había pasado por la cabeza utilizar get(). gracias de nuevo sobre todo por molestarte, pero ahora que he visto los errores ya funciona como lo tengo puesto

ya sólo queda una cosa por solucionar: no logro recoger el valor del textarea. si hago un alert me devuelve un cuadro vacío (''). intento recogerlo con

var comentario = $('.textoComentario').val();

pero no funciona, y con text() tampoco :/

al final, me ha quedado así:

Código PHP:

          usuario = $('#nombreUsuario').val();
        comentario = $('.textoComentario').val();
        enviarComentario = $('.enviarComentario');
 
        enviarComentario.click(function()
        {
            if( !comentario )
            {
                return false;
            }
            else
            {
                $('.comentariosDinamicos').load('scripts/nuevoComentario.php?nick='+ usuario +'&comentario='+ comentario.replace(/ /g,"\+") , function()
                {
                    $('.comentariosDinamicos').load('index.php #cargaComentarios');
                })
            }
        }); 
   

mil gracias más porque no veía los errores... ahora sólo queda el detalle del textarea. una ayudita más, por favor!!

saludos!

[Dany_s]

y esto
comentario = $('.textoComentario').val();

donde lo tienes, dentro del ready?

porque no es lo mismo esto

Código HTML:

<html>
    <head>
        <title>Ejemplon</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
 
          function mostrar(){
              alert($('.textoComentario').val());
          }
        </script>
 
    <body>
        <textarea class="textoComentario" onclick="mostrar()" >fffff</textarea>
    </body>
</html>
 

que esto

Código HTML:

<html>
    <head>
        <title>Ejemplon</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
              alert($('.textoComentario').val());
        </script>
 
    <body>
        <textarea class="textoComentario">fffff</textarea>
    </body>
</html>
 

o que esto

Código HTML:

<html>
    <head>
        <title>Ejemplon</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
        <script type="text/javascript">
           $( function(){
                alert($('.textoComentario').val());
           });
        </script>
    <body>
        <textarea class="textoComentario">fffff</textarea>
    </body>
</html>
</html>
 

y si vas a acceder a un campo de formulario te conviene usar id, porque si usas clases por ahi usas esa misma clase para otro campo, y ademas con un id no tiene que recorrer todos los elementos

[uikekarallo]

bueeno.. al fin

sí, lo tenía directamente dentro del ready. y me recogía el valor utilizando $('.textoComentario'); pero si lo metía en una variable [comentario = $('.textoComentario');] ya no funcionaba. al final he hecho lo siguiente:

Código PHP:

          // ready...

        usuario = $('#nombreUsuario').val();
        enviarComentario = $('.enviarComentario');

        enviarComentario.click(function()
        {
            if( $('#textoComentario').val() != "" )
            {
                comentario = $('#textoComentario').val().replace(/ /g , "\+");

                $('.comentariosDinamicos').load('scripts/nuevoComentario.php?nick='+ usuario +'&comentario='+ comentario , function()
                {
                    $('.comentariosDinamicos').load('index.php #cargaComentarios');
                    $('#textoComentario').val('');
                    $('#textoComentario').focus();
                });
            }
        }); 
   

como ves ya he cambiado las clases por ids (que aunque no utilizaba esas clases en nada más, no me di cuenta de que claro, si pongo una clase tiene que recorrer el documento...).
ahora faltan algunos detalles, como evitar palabas mal sonantes y esas cosas de chat ^^

dany, un millón de gracias!! investigando un poco también he aprendido a diferenciar los 3 ejemplos que me has puesto. así que tu ayuda ha sido inestimable

un saludo!!

[Dany_s]

ah bien, eso no vi, no me habia dado cuenta que usabas eso para enviar

la explicación es porque al hacer

variable = $('#textoComentario').val()

toma el valor cuando se carga el documento, pero al cargar va a recuperar el value si, pero es un vacio jeje asi que en el load la variable tiene nada jeje

val() retorna un string
si vas a ocupar ese campo en diferentes lugares podes hacer


variable = $('#textoComentario');

y para recuperar el value haces
variable.val()
porque
$('#textoComentario') retorna el objeto

al tener el objeto en la variable podes hacer cuanquier cosa, variable.remove(), variable.attr('class'), etc

[uikekarallo]

jeje, ahora lo entiendo y tiene todo el sentido del mundo... estaba recogiendo directamente el valor en lugar del objeto pero al cargar la página, lo cual siempre estaba vacío. lo he entendido ^^

pues con este último retoque... el código queda así:

Código PHP:

      // ready...

        y = $('#cargaComentarios').innerHeight();

        usuario = $('#nombreUsuario').val();
        comentario = $('#textoComentario');
        enviarComentario = $('.enviarComentario');

        enviarComentario.click(function()
        {
            if( comentario.val() != "" )
            {
                comentario_fix = comentario.val().replace(/ /g , "\+");

                $('.comentariosDinamicos').load('scripts/nuevoComentario.php?nick='+ usuario +'&comentario='+ comentario_fix , function()
                {
                    $('.comentariosDinamicos').load('index.php #cargaComentarios' , function(){ $('.comentariosDinamicos').scrollTop(y); } );
                    comentario.val('');
                    comentario.focus();
                });
            }
        }); 
   

gracias, gracias y gracias otra vez. ahora me gusta mucho más como queda, se ve más limpio

[Dany_s]

para que quede mas limpio podes aprovechar lo que devuelve cada método

si te fijas en la doc de cada metodo siempre en la parte azul que está abajo del título muestra los parámetros que hacepta y del lado derecho lo que retorna

.focus( handler(eventObject) )>>>>>>>>>>>Returns: jQuery

te devuelve el mismo objeto, entonces podes usarlo para hacer encadenamiento

en vez de
comentario.focus();
comentario.val('');

en una sola linea
comentario.focus().val('');

si es una linea larga encadenada por ahi queda feo pero se ve legible cuando hacen por linea

comentario
.focus()
.algunMetodo()
.otro()
.otroMas();

en php orientado a objetos seria como una interfz fluida
$instancia->hacerAlgo('bla')->hacerOtraCosa()->tambienOtra('asd');

[uikekarallo]

jeje, si, si ya me lo pone bien claro en el libro de Aprende jQuery... pero a veces estoy tan absorto que no me doy cuenta de que puedo simplificar las cosas. supongo que poco a poco iré haciendo progresos ^^

un saludo!