[SOLUCIONADO] Como poner el típico "Ver mas" en mi sistema de comentarios

[randy69]

Hola buenas a todos espero que estén de maravilla...
Bueno mi problema es el siguiente, tengo un sistema de comentarios y solo he puesto que me muestre un mínimo de 10 comentarios y quiero ponerle el típico "Ver mas" que cuando pulsen sobre ese botón aparezcan 10 comentarios mas
Muchas gracias por su respuesta

[jheckson]

Bueno existen distintas formas de que puedas hacerlo.

Una que sea a traves con Ajax y la otra es sin el Ajax.

Si es con Ajax debes primero contar o saber de alguna forma cuantos comentarios ya tienes mostrados, entonces enviar esa cifra por el Ajax y solicitar al servidor los siguientes 10 comentarios y luego agregarlos dinamicamente a tu pagina con Javascript.

Si es con PHP de igual forma solo que no seria tan "dinamica u efectivo"

[alexisverano]

Puedes utilizar un sistema de paginacion.

[rottenp4nx]

Con HTML5 puedes guardar los valores que quieras en los atributos data-loquesea="valor"

Después solo a jugar con PHP, AJAX y JSON

Saludos

[randy69]

Iniciado por rottenp4nx

Con HTML5 puedes guardar los valores que quieras en los atributos data-loquesea="valor"

Después solo a jugar con PHP, AJAX y JSON

Saludos

lo unció que no controlo es eso de guardar atributos con html5 si puedes profundizar un poquito mas

[randy69]

Iniciado por alexisverano

Puedes utilizar un sistema de paginacion.

ahora tengo un sistema de paginación pero me parece un poco antiguo ese sistema :)

[rottenp4nx]

Iniciado por randy69

lo unció que no controlo es eso de guardar atributos con html5 si puedes profundizar un poquito mas

<div id="boton" data-dato="<?php echo $valor; ?>"></div>

Concatenación con PHP

Saludos

[jheckson]

la solucion de rottenp4nx es una opcion, pero a mi parecer no creo que sea conveniente, ya que tendrias que cargar todos tus comentarios la primera vez y en vez de poco a poco.

Aunque es mas sencillo hacer eso lo anterior de todos de una vez, pero creo que es mejor que le coloques a los comentarios que no quieers mostrar un estilo css con la regla display:none, y asi no los muestres y luego con un simple javascript le cambias el atributo para display:inline o display:block y asi los muestras y ya! =)

[randy69]

Iniciado por jheckson

la solucion de rottenp4nx es una opcion, pero a mi parecer no creo que sea conveniente, ya que tendrias que cargar todos tus comentarios la primera vez y en vez de poco a poco.

Aunque es mas sencillo hacer eso lo anterior de todos de una vez, pero creo que es mejor que le coloques a los comentarios que no quieers mostrar un estilo css con la regla display:none, y asi no los muestres y luego con un simple javascript le cambias el atributo para display:inline o display:block y asi los muestras y ya! =)

Lo explicas todo que parece tan sencillo pero yo no quiero que cargue todos los comentarios de golpe si no poco a poco

[jheckson]

Iniciado por randy69

Lo explicas todo que parece tan sencillo pero yo no quiero que cargue todos los comentarios de golpe si no poco a poco

Nunca dije que fuese facil el poco a poco, si notas el primer comentario que hice explique el procedimiento, solo dije que el de cargar todos y luego mostrar el resto si seria mas sencillo.

Repito, debes cargar los 10 que quieres, luego con javascript/jquery capturas el evento del click en "ver mas", cuentas cuantos comentarios ya tienes mostrados tambien con javascript, o si quieres mantienes la cuenta con una variable de session en PHP, luego mandas un Ajax donde solicites los siguientes comentarios, y el resultados los anexas a la parte final donde muestras tus comentarios con el mismo.

[rottenp4nx]

Para mí, según mi opinión sería ir cargándolos de a poco, más rápida la carga de la página

Saludos

[randy69]

Iniciado por jheckson

Nunca dije que fuese facil el poco a poco, si notas el primer comentario que hice explique el procedimiento, solo dije que el de cargar todos y luego mostrar el resto si seria mas sencillo.

Repito, debes cargar los 10 que quieres, luego con javascript/jquery capturas el evento del click en "ver mas", cuentas cuantos comentarios ya tienes mostrados tambien con javascript, o si quieres mantienes la cuenta con una variable de session en PHP, luego mandas un Ajax donde solicites los siguientes comentarios, y el resultados los anexas a la parte final donde muestras tus comentarios con el mismo.

Muchas gracias por intentar resolver mi duda, todo lo que me as explicado lo entiendo perfectamente menos lo de anexar los resultados ala parte final... porque el sistema de comentarios que tengo al insertarse el comentario cara todo el contenido de comentarios menos la pagina... nose si me explico

[jheckson]

No entendi muy bien la explicación... quieres decir que te carga todos los comentarios que tengas y no la pagina (X cantidad de comentarios),si te refieres a limitar o traer un rango específico de comentarios de la base de datos debes usar el "limit" en la consulta asi vas cargando de a poco tu lista!

[randy69]

Iniciado por jheckson

No entendi muy bien la explicación... quieres decir que te carga todos los comentarios que tengas y no la pagina (X cantidad de comentarios),si te refieres a limitar o traer un rango específico de comentarios de la base de datos debes usar el "limit" en la consulta asi vas cargando de a poco tu lista!

No, no me as entendido jeje el el div de comentarios verdad? pues en ves de agregar un comentario pues carga todo el div y agrega el comentario. Ahora si me entiendes?

[randy69]

no carga toda la pagina pero si todo el div con todos los comentarios para que se agregue el comentario

[jheckson]

Intenta explicarte un poco mejor por favor que no te logro entender mucho! xD
Quieres decir que te borra los comentarios que ya tienes y coloca solamente los de mla nueva carga???

Si es eso, solo tienes que guardar el contenido del DIV antes, luego le añades el resto de los comentarios y cargas el DIV... Seria algo como:

Código Javascript:

contenidoAnterior = document.getElementById('DivID').innerHTML;
nuevoContenido = contenidoAnterior  + nuevosComentarios;
document.getElementById('DivID').innerHTML = nuevoContenido ;
 
//O si estas usando Jquery usa esta function que te agrega al final
//del div lo que quieras sin borrar lo anterior!
 
$('#DivId').append(nuevoContenido);
 

[randy69]

No, no me los borra si no que el div parpadea y el comentario se agrega y ami me gustaría que el comentario se agregue sin que el div parpadeé
te dejo el codigo

php

Código PHP:

  <?php 
session_start(); 
?> 
<script type="text/javascript" src="js/codigo1.js"></script> 
<?php 
$cadena=$_POST['termino']; 
$id=$_GET['id']; 
$anio=date('Y'); 
$dia=date('d'); 
$hora=date('H'); 
$minuto=date('i'); 
$segundo=date('s'); 
$usuario=$_SESSION['usuario']; 
$caracteres = strlen($cadena); 
$idcomen=$_SESSION['id']; 
$mes = array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); 
$mes1=$mes[date('n')-1]; 
if ($caracteres>0 AND $_SESSION['login']=="yes") { 
    require_once "conexion.php"; 
$a->query("INSERT INTO comantarios VALUES('".$idcomen."','".$anio."','".$mes1."','".$dia."','".$hora."','".$minuto."','".$segundo."','','".$usuario."','".$_POST['termino']."','".$id."')")or die($a->error); 
//$a->close(); 
}else{} 
    require_once "conexion.php"; 
$sql=$a->query("SELECT * FROM comantarios WHERE utc='".$id."' ORDER BY id DESC LIMIT 10")or die($a->error); 
while ($fila=$sql->fetch_array()) { 
    $anio=$fila['anio']; 
    $mes=substr($fila['mes'], 0, 3);  
    $dia=$fila['dia']; 
    $hora=$fila['hora']; 
    $minutos=$fila['minuto']; 
    echo '<div class="f" id="service'.$fila['id'].'" data="'.$fila['id'].'"">'; 
     $sql1=$a->query("SELECT * FROM usuario")or die($a->error); 
     while ($fila1=$sql1->fetch_array()) { 
            $idusuario=$fila1['id']; 
            $fotousuario=$fila1['imagen']; 
            $usuario=$fila1['usuario']; 
            $fotousuario = strlen($fotousuario); 
            if ($fotousuario>0) { 
                $fotousuario=$fila1['imagen']; 
                //$fotousuario=substr($fotousuario, 3); 
               }else{$fotousuario="img_usuarios/usuario.jpg";} 
            if ($idusuario==$fila['id_usuario']) { 
           if ($fila['id_usuario']==$idusuario){ 
           echo '<img src="'.$fotousuario.'"><span class="usuario">'.$usuario.'</span><span class="fecha">'.' '.$dia.' '.$mes.' '.$anio.' '.$hora.':'.$minutos.'</span>'; 
           }else{echo '<img src="img_usuarios/usuario.jpg">';} 
          } 
       } 
    if ($_SESSION['login']=="yes"){if ($_SESSION['id']==$fila['id_usuario']){ 
    echo '<span class="delete" id="delete'.$fila['id'].'" title="Eliminar">x</span><div class="texto"><p>'.$fila['mensaje'].'</p></div></div>'; 
    }else{echo '<div class="texto"><p>'.$fila['mensaje'].'</p></div></div>';} 
    }//else{ echo '<div class="texto"><p>'.$fila['mensaje'].'</p></div></div>';} 
} 
$a->close(); 
?>   

jquerty/ajax

Código HTML:

var x;
x=$(document);
x.ready(inicio);
x.ready(ponervalue1);
x.ready(inicio2);
function inicio()
{   var x;
	x=$("#input");
	$("#input2").click(inicio2);
}
function inicio2()
{

$.ajax({
	type:'POST',
	url:$("#input21").attr('action'),
	data:$("form").serialize(),
	beforeSend: function(objeto){
              $('.resultado').html('<img src="../ajax-loader.gif" id="gitloader"/>...');
            },
	success: function(data)
	{  
		$(".resultado").html(data);
	}
})
}

html

Código HTML:

<div class="resultado"></div> 

[randy69]

Iniciado por jheckson

Intenta explicarte un poco mejor por favor que no te logro entender mucho! xD
Quieres decir que te borra los comentarios que ya tienes y coloca solamente los de mla nueva carga???

Si es eso, solo tienes que guardar el contenido del DIV antes, luego le añades el resto de los comentarios y cargas el DIV... Seria algo como:

Código Javascript:

contenidoAnterior = document.getElementById('DivID').innerHTML;
nuevoContenido = contenidoAnterior  + nuevosComentarios;
document.getElementById('DivID').innerHTML = nuevoContenido ;
 
//O si estas usando Jquery usa esta function que te agrega al final
//del div lo que quieras sin borrar lo anterior!
 
$('#DivId').append(nuevoContenido);
 

aver si ahora me entiendes

[jheckson]

Fijate que te di la respuesta ya y otra cosa evita citar tanto los comentarios ya que llenas el tema con mucho informacion de mas, con comentar el nombre al inicio basta, a menos que vayas a citar algun segmento de codigo o algo de relevancia.

mira tu codigo:

Código Javascript:

beforeSend: function(objeto){
              $('.resultado').html('<img src="http://www.forosdelweb.com/f18/ajax-loader.gif" id="gitloader"/>...');
//Aca estas cargando en tu sona de resultados una imagen, por lo tanto estas
//eliminando el contenido anterior y par luego en el "success" poner el comentario
//alli esta el parpadeo de tu pantalla...
            },
    success: function(data)
    {  
        $(".resultado").html(data);
//por lo tanto debes quitar la imagen de carga o ponerla en algun otro lado ya que alli
// te borra tus resultados anteriores... ahora como te dije usa el metodo append() para
// agregar, y no borrar todo y poner todo otra vez. Seria algo asi mas o menos
// en tu success y no lo que tienes.
// $(".resultado").append(data);
    }
 

[randy69]

Iniciado por jheckson

Fijate que te di la respuesta ya y otra cosa evita citar tanto los comentarios ya que llenas el tema con mucho informacion de mas, con comentar el nombre al inicio basta, a menos que vayas a citar algun segmento de codigo o algo de relevancia.

mira tu codigo:

Código Javascript:

beforeSend: function(objeto){
              $('.resultado').html('<img src="http://www.forosdelweb.com/f18/ajax-loader.gif" id="gitloader"/>...');
//Aca estas cargando en tu sona de resultados una imagen, por lo tanto estas
//eliminando el contenido anterior y par luego en el "success" poner el comentario
//alli esta el parpadeo de tu pantalla...
            },
    success: function(data)
    {  
        $(".resultado").html(data);
//por lo tanto debes quitar la imagen de carga o ponerla en algun otro lado ya que alli
// te borra tus resultados anteriores... ahora como te dije usa el metodo append() para
// agregar, y no borrar todo y poner todo otra vez. Seria algo asi mas o menos
// en tu success y no lo que tienes.
// $(".resultado").append(data);
    }
 

Muchas pero que muchas gracias por tu tiempo y tu paciencia

[jheckson]

De nada, espero te haya servido y funcionado! Si fue asi por favor coloca al tema solucionado asi otros sabran como hacer tambien lo que ya tu hiciste! =)