"Ver mas" en un campo tipo text php mysql

dark_17 · #1 (**permalink**) 21/12/2012, 23:47

Buenas..
Alguna idea de como hacer el "Ver mas"
en una lista en donde muestro varias columnas y en la columna mensaje, quiero que solo me muestre un determinado numero de palabras y que me bote un link que diga "Ver mas" y haciendo clic ahi que recien me muestre todo el mensaje..
Sin hacer uso de Ajax solo PHP

xIamAlex · #2 (**permalink**) 22/12/2012, 00:00

En una parte de tu código HTML genera la información de los "Ver más", dentro de contedenedores span, así:

Código HTML:

<span name="informacion"><?php echo $Informacion; ?></span>

Una vez generados, utiliza un Javascript con un EventListener que espere a que la página cargue, una ver cargada, utiliza document.getElementsByName('informacion') e innerHTML para recoger la info de todos los contenedores y almacénalas en un Array aparte, y en otro array almacena la info con sus respectivos substrings.

Una vez cargada la página cambia el innerHTML de cada contenedor por el del substring.

Por último nada más queda hacer un toggle

Para programar el Ver más bastaría crear un contador PHP que maneje los índices desde 0, luego creas los botones con la etiqueta que más se te apetezca y le agregas un atributo como data-Indice="<?php echo $Indice; ?>".

Luego crea un onclick en botón que llame a una función javascript, así: onclick="TogglearInfo(this);".

Y en la función manejas los Arrays a través de la referencia:

Código HTML:

function TogglearInfo(Boton)
{

var Indice = parseInt(Boton.getAttribute('data-Indice'));

// Contenedores es un array dónde recoges los names de "información".
// Informacion es un array con los substrings de los contenedores.

Contenedores[ Indice ].innerHTML = Informacion[ Indice ];

}

dark_17 · #3 (**permalink**) 22/12/2012, 02:55

Waoo.. men soy un novato en javascript :(
pense que se podia solo con puro PHP
La verdad no entendi bien lo que quizo decir,
el pedazo de mi codigo es este:

Código PHP:

 
<form class="tableName toolbar">

                    
                    <table  class="display data_table8 " id="data_table">
                              <thead>
                                 <tr>
                                                                                            
                                   <th width = "50" align="center"  width="1" >ACCION</th>
                                    <th align="center" width="100">CODIGO</th>
                                    <th align="center" width="1" ></th>
                                    <th width="400">MENSAJE</th>
                                                                                            
                                     <th align="center"  width="1" ></th>
                                     <th align="center" width="200">FECHA/NOTA</th>
                                     <th align="center"  width="1" ></th>
                                    <th align="center"  width="1" ></th>
                                  </tr>
                              </thead>
                                     <tbody>
                                      <?php
                                                             
                    if ($notas == 0) {
                                                    } else if ($notas > 0) {
                                                    foreach ($notas as $info) {
                                       ?>
                                        
                                          <tr>
                                              <td   align="center">
                                       <span class="tip " >
                                          <a onclick="return anular();" href=ctr_anularnota.php?note=<?php echo $info['idnota'];?> title="Anular">
                                              <img src="images/icon/icon_delete.png" >
                                          </a>
                                      </span>
                                            </td>
                                            <td  align="center"><?php echo $info['id_reservacion'] ?></td>    
                                            <td  align="center" width="1"></td>    
                                            <td ><b class="red"><?php echo $info['mensaje_nota'] ?></td>        
                                            
                                            <td  align="center" width="1"></td>    
                                            <td  align="center"><?php echo $info['fecha_nota'] ?></td>
                                            
                                            <td  align="center" width="1"></td>    
                                            <td  align="center" width="1"></td>    
                                          </tr>
                                        
        <?php
    }
}
?>
                                       </tbody>
                                    </table>
                                  </form>

Jalo esos datos de la db y en el campo mensaje quiero que me muestre una cantidad de texto determinada y un link "Ver mas".

xIamAlex · #4 (**permalink**) 22/12/2012, 08:06

He aquí un ejemplo rápido que hice:

Código HTML:

<?php
	
	/*
	* Carga tu info de la base de datos
	* En éste caso yo uso un array para demostrar.
	*/
	
	$Informacion = array
	(
		'Buenas.. Alguna idea de como hacer el "Ver mas" en una lista en donde muestro varias columnas y en la columna mensaje, quiero que solo me muestre un determinado numero de palabras y que me bote un link que diga "Ver mas" y haciendo clic ahi que recien me muestre todo el mensaje.. Sin hacer uso de Ajax solo PHP',
		'Una vez cargada la página cambia el innerHTML de cada contenedor por el del substring. Por último nada más queda hacer un toggle Para programar el Ver más bastaría crear un contador PHP que maneje los índices desde 0, luego creas los botones con la etiqueta que más se te apetezca y le agregas un atributo como data-Indice="<?php echo $Indice; ?>". Luego crea un onclick en botón que llame a una función javascript, así: onclick="TogglearInfo(this);". Y en la función manejas los Arrays a través de la referencia:',
		'Waoo.. men soy un novato en javascript :( pense que se podia solo con puro PHP La verdad no entendi bien lo que quizo decir, el pedazo de mi codigo es este: Jalo esos datos de la db y en el campo mensaje quiero que me muestre una cantidad de texto determinada y un link "Ver mas".'
	);
	
	$i = 0; // Este contador llevará el índice para cada contenedor;
	
?>
<!Doctype html>
	<html>
		<head>
			<title>Ejemplo Ver más</title>
			<script type="text/javascript">
				
				var Contenedores;
				var Informacion;
				
				var ObtenerInfo = function()
				{
					// Una vez cargada la página se llamará a ésta función.
					
					var LongitudInformacionResumida = 40;
					var i = 0;
					
					// Cargas los contenedores.
					
					Contenedores = document.getElementsByName('Contenedor');
					Informacion = new Array();
					
					while(Contenedores[i] != null)
					{
						/*
						* Almacenas la info de cada contenedor en un array aparte
						* Luego asignale a cada contenedor su substring;
						*/
						
						Informacion[i] = Contenedores[i].innerHTML;
						Contenedores[i].innerHTML = Informacion[i].substring(0, LongitudInformacionResumida);
						i++;
					}
				}
				
				var VerMas = function(Boton)
				{
					// Aquí asignas la info completa a través de cada botón "Ver más".
					
					var Indice = parseInt(Boton.getAttribute('data-Indice'));
					
					Contenedores[ Indice ].innerHTML = Informacion[ Indice ];
				}
				
				window.addEventListener('load', ObtenerInfo, false);
				
			</script>
		</head>
		<body>
		<?php
			
			// Muestra tu información de la base de datos a través de un bucle:
			
			foreach($Informacion as $Info)
			{
				?>
				<div name="Contenedor"><?php echo $Info; ?></div>
				<div>
					<button data-Indice="<?php echo $i; ?>" onclick="VerMas(this);">Ver más</button>
				</div>
				<?php
				
				$i++; // Incrementa el índice.
			}
			
		?>
		</body>
	</html>

Guárdalo en un archivo .php y luego pruebalo a ver si te funciona

dark_17 · #5 (**permalink**) 27/12/2012, 01:33

Lo estaba probando, y me funca y despues de segundos desaparece y cambia la url a:

http://localhost:9090/APARTLIMA4RENT/create_nota.php?data_table_length=10

asi no tiene que ser porque yo llevo mis datos por GET a esa pagina y mi url tiene que ser

http://localhost:9090/APARTLIMA4RENT/create_nota.php?reserv=18

Debido a que sucede eso? le dejo el codigo

Código HTML:

 <form class="tableName toolbar">
											<table  class="display data_table8 " id="data_table">
                                                  <thead>
                                                      <tr>
                                                                                            
                                                         <th width = "150" align="center"  width="1" >ACCION</th>
                                                         <th align="center" width="100">CODIGO</th>
                                                         <th align="center" width="1" ></th>
                                                         <th width="400">MENSAJE</th>
                                                                                            
                                                         <th align="center"  width="1" ></th>
                                                         <th align="center" width="200">FECHA/NOTA</th>
                                                         <th align="center"  width="1" ></th>
                                                         <th align="center"  width="1" ></th>
                                                 											
                                                       </tr>
                                                   </thead>
                                                   <tbody>
                                                          <?php
                                                            
										if ($notas == 0) {
                                                    } else if ($notas > 0) {
                                                    foreach ($notas as $info) {
														$Informacion= $info[mensaje_nota];
														$i = 0; 
                                       ?>
										
                                          <tr>
                                          	<td   align="center">
                                       <span class="tip " >
                                          <a onclick="return anular();" href=ctr_anularnota.php?note=<?php echo $info['idnota'];?> title="Anular">
                                              <img src="images/icon/icon_delete.png" >
                                          </a>
                                      </span>
                                            </td>
                                            <td  align="center"><?php echo $info['id_reservacion'] ?></td>	
                                            <td  align="center" width="1"></td>	
                                            <td >
                                            <b class="red"><?php echo '<div name="Contenedor">'.nl2br($info['mensaje_nota']).'</div>' 
											
											?>
                                            <div>
                                                <button data-Indice="<?php echo $i; ?>" onclick="VerMas(this);">Ver más</button>
                                            </div>
                                            </td>		
                                            
                                            <td  align="center" width="1"></td>	
                                            <td  align="center"><?php echo $info['fecha_nota'] ?></td>
                                            
                                            <td  align="center" width="1"></td>	
                                            <td  align="center" width="1"></td>	
                                          </tr>
										
        <?php
		$i++; // Incrementa el índice.
    }
	
}
?>
                                       </tbody>
                                    </table>
                                  </form>

Y el javascript que uso es el que me dio, osea este:

Código:

<script type="text/javascript">
				
				var Contenedores;
				var Informacion;
				var ObtenerInfo = function()
				{
					// Una vez cargada la página se llamará a ésta función.
					
					var LongitudInformacionResumida = 40;
					var i = 0;
					
					// Cargas los contenedores.
					
					Contenedores = document.getElementsByName('Contenedor');
					Informacion = new Array();
					
					while(Contenedores[i] != null)
					{
						/*
						* Almacenas la info de cada contenedor en un array aparte
						* Luego asignale a cada contenedor su substring;
						*/
						Informacion[i] = Contenedores[i].innerHTML;
						Contenedores[i].innerHTML = Informacion[i].substring(0, LongitudInformacionResumida);
						i++;
					}
				}
				var VerMas = function(Boton)
				{
					// Aquí asignas la info completa a través de cada botón "Ver más".
					var Indice = parseInt(Boton.getAttribute('data-Indice'));
					Contenedores[ Indice ].innerHTML = Informacion[ Indice ];
				}
				window.addEventListener('load', ObtenerInfo,'false');
</script>