Entrar

Areas de texto que al enviar se publiquen automaticamente?

EA_ · · Solicitar retirada
Buenos dias! saludos, tengo una pregunta que hacerles, alguno sabe como crear ares de textos en las cuales al presionar "enviar" el comentario se publique automaticamente en la pagina? ejemplo: pongo una foto en la pagina y justo debajo coloco "escribe tu opinion de la foto" y que el usuario al enviar ya aparesca publicado su comentario.
Espero su respuesta! Gracias Saludos.
ocbarrio · · Solicitar retirada
Eso se que se puede con php y mysql. Otra cosa es aprender a hacerlo. Yo estoy empezando a mirarlo, y no es sencillo precisamente.
skaparate · · Solicitar retirada
Hola:

Debes utilizar Ajax.

Como pseudocódigo, lo que debes hacer es:

1.- Procesar el mensaje del usuario (limpiar el texto, quitar etiquetas, etc.).
2.- Leer el contenido desde la base de datos utilizando Ajax (jQuery.ajax(), por ejemplo).
3.- Presentar el contenido con Javascript.

En el fondo, algo así funcionaría:

<script>
  jQuery(document).ready(function($) {
    $('form.comment-picture').submit(function(e) {
      e.preventDefault();
      var self = $(this);
      $.ajax({
        url: 'script_guardar_datos.php', // Este script también leerá los datos y los devolverá para ser mostrados en el documento HTML
        data: $(this).serialize(),
        error: function(obj, error, text) {
          // En caso de error tendrás que revisar la consola del navegador.
          console.log(obj);
          console.log(error);
          console.log(text);
        },
        success: function(data) {
          // Suponiendo que data tenga formato JSON
          $('<div id="comment-" + data['commentID'] + '">' + data['commentBody'] + '</div>')
          .appendTo('#comentarios'); // Esto insertaría el comentario después del formulario
        }
      });
    }
  });
</script>

<div id="foto-10">
<img src="mifoto.algo" title="" alt="">
  <div id="comentarios">
    <div class="comentario">
    </div>
    <div class="comentario">
    </div>
    <div class="comentario">
    </div>
  </div><!-- #comentarios -->
  <form class="comment-picture" id="comment-picture-ID"><!-- Reemplaza ID por el id de la foto -->
    <textarea id="post"></textarea>
    <input type="submit" />
  </form>
</div><!-- #foto-10 -->

El resto de la lógica te la dejo a ti :D. Aquí utilizo la librería jQuery y HTML, nada más :P.

Saludos.