Foros del Web » Programando para Internet » Javascript »

Mostrar y Ocultar Contenido

Estas en el tema de Mostrar y Ocultar Contenido en el foro de Javascript en Foros del Web. Hola compañeros, el titulo del tema quizas no diga mucho, repecto a lo que quiero hacer, tengo el siguiente problema: En un formulario ingresos "X" ...
  #1 (permalink)  
Antiguo 16/09/2011, 14:48
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Mostrar y Ocultar Contenido

Hola compañeros, el titulo del tema quizas no diga mucho, repecto a lo que quiero hacer, tengo el siguiente problema:

En un formulario ingresos "X" datos los cuales se guardan en una base de datos y en otro archivo genero una especie de DataGrid con tablas.

En el campo donde me muestra la descripcion del requerimiento que ingresé le valide que me mostrara cierta cantidad de caracteres y me mostrara [...] al final ya que hay descripciones demasiado largas debido a que es un campo BLOB en la base de datos.

Lo que quisiera es que en los puntos [...] al darle click me expandiera y me mostrara el resto de la descripcion, no se si me explique bien y espero haber posteado en el foro correcto, aqui les dejo el codigo que tengo:

Código PHP:
<?php
session_start
();
if(!isset(
$_SESSION['us_id'])){
header("Location: ../index.php"); 
} else { 
$usuario=$_SESSION['us_id'];
$admin=$_SESSION['us_tipo'];

$emp=$_GET["q"];

include_once(
"conexion.php");
include(
'./Scripts/funcion.php');
    
$conexion = new ControlBD();
    
$conexion->conectar();
    
$conexion->seleccionarBD();
    
$query="SELECT req_id, em_nombre,su_nombre, us_unidad, us_cargo, us_nombre, us_apellido, us_email, us_telefono, mo_nombre, tra_maestro, req_date, req_descripcion, req_valicacion, us_tipo, req_imagen, req_archivo FROM cgrequerimientos 
           INNER JOIN cgempresa on req_idempresa=em_id 
           INNER JOIN cgusuarios on req_usuario=us_id 
           INNER JOIN cgmodulo on req_idmodulo=mo_id 
           INNER JOIN cgtransacciones on req_idtrans=tra_tipo
           INNER JOIN cgsucursal ON req_idsucursal=su_id
            WHERE req_valicacion=0 and req_estado='Activo' AND em_id = '$emp'
            ORDER BY req_id,req_date"
;
$result=$conexion->ejecutarQuery($query);
?>
<form>
<a href="javascript:imprSelec('seleccion')" >Imprimir Requerimientos</a> 
<div class="centrado">
<DIV ID="seleccion">
<table class="tablas">
    <tr>
        <th>Empresa</th>
        <th>Sucursal</th>
        <th>Ticket</th>
        <!--<th>Departamento</th>
        <th>Cargo del Solicitante</th> -->
        <th>Nombre</th>
        <th>Email</th>
        <th>Telefono</th>
        <th>Modulo</th>
        <th>Transaccion</th>
        <th>Fecha</th>
        <th>Descripcion</th>
        <th>Imagen</th>
        <th>Documentacion</th>
        <th colspan="4">Acciones</th>
    </tr>
<? while($array=mysql_fetch_array($result)){ $id=$array['req_id'];?>
    <tr>
        <td><?=$array['em_nombre']; ?></td>
        <td><?=$array['su_nombre']; ?></td>
        <td><strong><?=$array['req_id']; ?></strong></td>
        <!--<td><?=$array['us_unidad']; ?></td>
        <td><?=$array['us_cargo']; ?></td>-->
        <td><?=$array['us_nombre']." ".$array['us_apellido']; ?></td>
        <td><?=$array['us_email']; ?></td>
        <td><?=$array['us_telefono']; ?></td>
        <td><?=$array['mo_nombre']; ?></td>
        <td><?=$array['tra_maestro']; ?></td>
        <td><?=cambiar_fecha($array['req_date']); ?></td>
        <td style=" text-align:justify; font-family:Tahoma, Geneva, sans-serif; font-size:12px;">
        <? if(strlen($array['req_descripcion']) <= 120){
             echo 
$array['req_descripcion'];
         }else{
              echo 
$descri=substr($array['req_descripcion'], 0120)." [...]";
         } 
?>
         </td>
        
        <td><a href="<?=$array['req_imagen']; ?>" rel="lightbox" title="imagen"><img src="<?=$array['req_imagen']; ?>" alt="imagen" width="72" height="64" /></a></td>
        
        <? $archivo=$array['req_archivo']; if(substr($archivo,-3) == 'doc'){ ?>  
        <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/word.png" alt="Word" width="50" height="50"  /></a></td>
        <? } if(substr($archivo,-4) == 'docx'){ ?>  
        <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/word.png" alt="Word" width="50" height="50"  /></a></td>
        <? } elseif(substr($archivo,-3) == 'xls'){ ?>  
        <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/excel.png" alt="Excel" width="50" height="50"  /></a></td>
        <? } elseif(substr($archivo,-4) == 'xlsx'){ ?>  
        <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/excel.png" alt="Excel" width="50" height="50"  /></a></td>
        <? } elseif(substr($archivo,-3) == 'pdf'){ ?>  
        <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/pdf.png" alt="Excel" width="50" height="50"  /></a></td>
        <? } else {?>
        <td class="center">No Tiene</td>
        <? ?>
        
        <td><a href="Javascript:Borrar('<?=$id;?>','Borrar_disp.php' ,'800','300')" title="Anular"><img src="./imagenes/eliminar.png" alt="Eliminar" border=0 ></a></td>
        <td><a href="javascript:Actualizar('<?=$id;?>','modificareq.php' ,'850','370')" title="Modificar"><img src="./imagenes/actualizar.png" alt="Modificar" border=0></a></td>
<? if($array['req_valicacion']==0){ ?>
        <td><a href="javascript:Validar('<?=$id;?>','activar.php' ,'800','300')" title="Validar"><img src="./imagenes/aceptar.png" alt="Agregar" border=0 ></a></td><? ?>
   
    <td><a href="javascript:Correo('<?=$id;?>','correo.php' ,'800','300')" title="Correo"><img src="./imagenes/mail.png" alt="Agregar" border=0 ></a></td>
   
    </tr>
<? ?>
</table>
</DIV>
</div>
</form>
</body>
<? }?>
Bueno espero puedan ayudarme, Saludos
  #2 (permalink)  
Antiguo 16/09/2011, 17:49
 
Fecha de Ingreso: septiembre-2011
Mensajes: 480
Antigüedad: 12 años, 7 meses
Puntos: 18
Respuesta: Mostrar y Ocultar Contenido

te doi una idea...puedes poner ese [...] con un id o sea algo que lo identifique que es de esa publicacion...y con jquery al darle click alli mediante la clase...y entonces verificas cual es el id luego de eso...envias ese id por jquery a otra pagina...y cuando te retorne los datos nuevos..lo que puedes hacer es rescribir lo que ya estaba...o sea que cuando te retorne los datos...en el div donde se muestra pones que cambie el html y ya :D y bueh...a la inversa..para mostrar menos entonces :o
  #3 (permalink)  
Antiguo 19/09/2011, 05:54
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar y Ocultar Contenido

Buenos dias edward18_1, muchas gracias por tu respuesta, probare de esa manera que me sugieres, ya yo habia hecho algo asi pero con valores estaticos, y aqui la cosa me va distinta por que estoy llenando la tabla dinamicamente desde base de datos.

Nuevamente gracias por la idea.

Saludos
  #4 (permalink)  
Antiguo 19/09/2011, 13:22
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar y Ocultar Contenido

Hola de nuevo compañeros, no he logrado hacer lo dice el titulo del tema, pero por el apuro y la rapidez en debo entregar la aplicacion, lo intente hacer mostrando la descripcion con un alert, lo coloque asi:

Código PHP:

 <td style=" text-align:justify; font-family:Tahoma, Geneva, sans-serif; font-size:12px;">
        <? if(strlen($array['req_descripcion']) <= 120){
             echo 
$array['req_descripcion'];
         }else{
             echo 
$descri=substr($array['req_descripcion'], 0120); ?><a href="#" onclick="(alert('<? $array['req_descripcion']; ?>'))"> [...] </a>
         <? ?>
         </td>
al mismo codigo de alla arriba le agregue esto:

Código PHP:
<a href="#" onclick="(alert('<? $array['req_descripcion']; ?>'))"> [...] </a>
El problema es que el alert no me muestra ningun valor, yo asumo que como es una tabla dinamica que se llena desde una base de datos debo enviarle el valor del ID de ese elemento para que asi sepa que descripcion va a mostrar.

El detalle es que no tengo idea de como asociar esto sin necesidad de enviar a otra pagina, ejecutar y mostrar lo que quiero.

Espero haberme explicado y puedan ayudarme.

Saludos
  #5 (permalink)  
Antiguo 19/09/2011, 18:41
 
Fecha de Ingreso: julio-2011
Mensajes: 220
Antigüedad: 12 años, 9 meses
Puntos: 72
Respuesta: Mostrar y Ocultar Contenido

Bueno, pues como se estan recogiendo las descripciones completas me parece que lo más apropiado es guardar estas en un array javascript y depues acceder a ellas al dar clic sobre los tres puntos, el problema es que se tendran que escribir todas las descripciones en el código fuente, lo cual puede hacer el archivo muy grande. De todas formas te dejo la siguiente sugerencia.

Primero sera necesario declarar el arary y la función javascript de esta manera:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. var datos= new Array();
  3. function mostrar(obj, indice)
  4. {
  5. var celda= document.getElementById(obj);
  6. celda.innerHTML= datos[indice];
  7. }
  8. </script>

Luego sera necesario añadir el atributo 'id' a cada celda que contiene la descripción, esto se puede realizar con una variable que vaya incrementando su valor en cada iteración de 'while'.

Despues en cada celda donde la descripción rebase los 120 caracteres, es decir en esta parte del código:
Código PHP:
Ver original
  1. }else{
  2.               echo $descri=substr($array['req_descripcion'], 0, 120)." [...]";
  3.          }

Habria que escribirlo de la siguiente manera:
Código PHP:
Ver original
  1. }else{
  2. echo $descri=substr($array['req_descripcion'], 0, 120)."<a href=\"#\" onClick=\"mostrar('id_de_celda_contenedara', indice_array)\">[...]</a>";
  3. echo "<script type=\"text/javascript\">\n";
  4. echo "datos[indice_array]=".$array['req_descripcion']."\n";
  5. echo "</script>\n";
  6. }

Lo importante es que coincidan el 'id' de la celda contenedora de la descripción con el 'id' que se pasara como primer parámetro en el llamado a la función javascript 'mostrar()', de la misma forma debe coincidir el índice que se pasa como segundo parámetro a la función javascript 'mostrar()' y el indice del array javascript 'datos' en el que se ira guardando cada descripción que pase de los 120 caracteres.

Espero haberme explicado y que esto te sirva.

Última edición por lubtufano; 19/09/2011 a las 19:02
  #6 (permalink)  
Antiguo 20/09/2011, 05:48
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar y Ocultar Contenido

Hola lubtufano gracias por tu respuesta, una nueva pregunta que no entendi del codigo que me enviaste

Código PHP:

}else{
echo 
$descri=substr($array['req_descripcion'], 0120)."<a href=\"#\" onClick=\"mostrar('id_de_celda_contenedara', indice_array)\">[...]</a>";
echo 
"<script type=\"text/javascript\">\n";
echo 
"datos[indice_array]=".$array['req_descripcion']."\n";
echo 
"</script>\n"
En id_de_celda_contenedora yo aqui coloque una variable $id que es el valor de la cada id de cada elemento de mi tabla,asumo que es asi.

Ahora bien, en "indice_array" que valor debo colocar, estoy perdido en ese punto

Saludos
  #7 (permalink)  
Antiguo 20/09/2011, 16:34
 
Fecha de Ingreso: julio-2011
Mensajes: 220
Antigüedad: 12 años, 9 meses
Puntos: 72
Respuesta: Mostrar y Ocultar Contenido

Hola mixzplit, te dejo el código completo que se necesita con una pequeña corrección, que es la parte para ocultar el texto desplegado cuando se muestra otro y volver a la versión corta; pruebalo a ver que te parece. Primero el código javascript que debe ir en la cabecera de la página.
Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. var datos= new Array();
  3. var visible= -1;
  4. function mostrar(obj, indice)
  5. {
  6.     if(visible != -1)
  7.     {
  8.         var actual= document.getElementById('celda'+visible);
  9.         var o= 'celda'+ visible;
  10.         actual.innerHTML= datos[visible].substring(0, 5)+'<a href="#" onClick="mostrar(\''+o+'\', '+visible+')"> [...]</a>';
  11.     }
  12.     var celda= document.getElementById(obj);
  13.     celda.innerHTML= datos[indice];
  14.     visible= indice;
  15. }
  16. </script>

Y tambien el código php con el bloque 'else' necesario.
Código PHP:
Ver original
  1. <?php
  2. if(!isset($_SESSION['us_id'])){
  3. header("Location: ../index.php");
  4. } else {
  5. $usuario=$_SESSION['us_id'];
  6. $admin=$_SESSION['us_tipo'];
  7.  
  8. $emp=$_GET["q"];
  9.  
  10. include_once("conexion.php");
  11. include('./Scripts/funcion.php');
  12.     $conexion = new ControlBD();
  13.     $conexion->conectar();
  14.     $conexion->seleccionarBD();
  15.    
  16. $query="SELECT req_id, em_nombre,su_nombre, us_unidad, us_cargo, us_nombre, us_apellido, us_email, us_telefono, mo_nombre, tra_maestro, req_date, req_descripcion, req_valicacion, us_tipo, req_imagen, req_archivo FROM cgrequerimientos
  17.           INNER JOIN cgempresa on req_idempresa=em_id
  18.           INNER JOIN cgusuarios on req_usuario=us_id
  19.           INNER JOIN cgmodulo on req_idmodulo=mo_id
  20.           INNER JOIN cgtransacciones on req_idtrans=tra_tipo
  21.           INNER JOIN cgsucursal ON req_idsucursal=su_id
  22.            WHERE req_valicacion=0 and req_estado='Activo' AND em_id = '$emp'
  23.            ORDER BY req_id,req_date";
  24. $result=$conexion->ejecutarQuery($query);
  25. ?>
  26. <form>
  27. <a href="javascript:imprSelec('seleccion')" >Imprimir Requerimientos</a>
  28. <div class="centrado">
  29. <DIV ID="seleccion">
  30. <table class="tablas">
  31.     <tr>
  32.         <th>Empresa</th>
  33.         <th>Sucursal</th>
  34.         <th>Ticket</th>
  35.         <!--<th>Departamento</th>
  36.         <th>Cargo del Solicitante</th> -->
  37.         <th>Nombre</th>
  38.         <th>Email</th>
  39.         <th>Telefono</th>
  40.         <th>Modulo</th>
  41.         <th>Transaccion</th>
  42.         <th>Fecha</th>
  43.         <th>Descripcion</th>
  44.         <th>Imagen</th>
  45.         <th>Documentacion</th>
  46.         <th colspan="4">Acciones</th>
  47.     </tr>
  48. <?
  49. $indice= 0;
  50. while($array=mysql_fetch_array($result)){ $id=$array['req_id'];?>
  51.     <tr>
  52.         <td><?=$array['em_nombre']; ?></td>
  53.         <td><?=$array['su_nombre']; ?></td>
  54.         <td><strong><?=$array['req_id']; ?></strong></td>
  55.         <!--<td><?=$array['us_unidad']; ?></td>
  56.         <td><?=$array['us_cargo']; ?></td>-->
  57.         <td><?=$array['us_nombre']." ".$array['us_apellido']; ?></td>
  58.         <td><?=$array['us_email']; ?></td>
  59.         <td><?=$array['us_telefono']; ?></td>
  60.         <td><?=$array['mo_nombre']; ?></td>
  61.         <td><?=$array['tra_maestro']; ?></td>
  62.         <td><?=cambiar_fecha($array['req_date']); ?></td>
  63.         <td style=" text-align:justify; font-family:Tahoma, Geneva, sans-serif; font-size:12px;" id="<?="celda".$indice; ?>">
  64.         <? if(strlen($array['req_descripcion']) <= 120){
  65.              echo $array['req_descripcion'];
  66.              }else{
  67.     echo $descri=substr($array['req_descripcion'], 0, 120)."<a href=\"#\" onClick=\"mostrar('celda".$indice."', ".$indice.")\">[...]</a>";
  68.     echo "<script type=\"text/javascript\">\n";
  69.     echo "datos[".$indice."]= '".$array['req_descripcion']."'\n";
  70.     echo "</script>\n";
  71.     } ?>
  72.          </td>
  73.        
  74.         <td><a href="<?=$array['req_imagen']; ?>" rel="lightbox" title="imagen"><img src="<?=$array['req_imagen']; ?>" alt="imagen" width="72" height="64" /></a></td>
  75.        
  76.         <? $archivo=$array['req_archivo']; if(substr($archivo,-3) == 'doc'){ ?>  
  77.         <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/word.png" alt="Word" width="50" height="50"  /></a></td>
  78.         <? } if(substr($archivo,-4) == 'docx'){ ?>  
  79.         <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/word.png" alt="Word" width="50" height="50"  /></a></td>
  80.         <? } elseif(substr($archivo,-3) == 'xls'){ ?>  
  81.         <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/excel.png" alt="Excel" width="50" height="50"  /></a></td>
  82.         <? } elseif(substr($archivo,-4) == 'xlsx'){ ?>  
  83.         <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/excel.png" alt="Excel" width="50" height="50"  /></a></td>
  84.         <? } elseif(substr($archivo,-3) == 'pdf'){ ?>  
  85.         <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/pdf.png" alt="Excel" width="50" height="50"  /></a></td>
  86.         <? } else {?>
  87.         <td class="center">No Tiene</td>
  88.         <? } ?>
  89.        
  90.         <td><a href="Javascript:Borrar('<?=$id;?>','Borrar_disp.php' ,'800','300')" title="Anular"><img src="./imagenes/eliminar.png" alt="Eliminar" border=0 ></a></td>
  91.         <td><a href="javascript:Actualizar('<?=$id;?>','modificareq.php' ,'850','370')" title="Modificar"><img src="./imagenes/actualizar.png" alt="Modificar" border=0></a></td>
  92. <? if($array['req_valicacion']==0){ ?>
  93.         <td><a href="javascript:Validar('<?=$id;?>','activar.php' ,'800','300')" title="Validar"><img src="./imagenes/aceptar.png" alt="Agregar" border=0 ></a></td><? } ?>
  94.    
  95.     <td><a href="javascript:Correo('<?=$id;?>','correo.php' ,'800','300')" title="Correo"><img src="./imagenes/mail.png" alt="Agregar" border=0 ></a></td>
  96.    
  97.     </tr>
  98. <?
  99. $indice++;
  100.  } ?>
  101. </table>
  102. </DIV>
  103. </div>
  104. </form>
  105. </body>
  106. <? }?>

Como puedes ver la variable '$indice', que se define antes del bucle 'while' y que aumenta su valor en uno a cada iteración del bucle, es la que sirve para asignar el 'id' a cada celda que contine la descripción y tambien para guardar esta descripción en la posición correspondiente del array y poder recuperarla despues.

Edito:


En el código javascript hay una equivocación en esta linea.

Código Javascript:
Ver original
  1. actual.innerHTML= datos[visible].substring(0, 5)+'<a href="#" onClick="mostrar(\''+o+'\', '+visible+')"> [...]</a>';

Como esta solo mostrara seis caracteres, lo correcto es esto.

Código Javascript:
Ver original
  1. actual.innerHTML= datos[visible].substring(0, 120)+'<a href="#" onClick="mostrar(\''+o+'\', '+visible+')"> [...]</a>';

De esta manera se mostraran los 121 caracteres iniciales.

Última edición por lubtufano; 20/09/2011 a las 16:53
  #8 (permalink)  
Antiguo 22/09/2011, 14:14
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar y Ocultar Contenido

Hola lubtufano, en teoria todo lo que me facilitaste me debe funcionar, pero no se esta funcionando como debe ser, cuando presiono sobre los 3 puntos no hace ninguna accion, no si sera por que lo datos que se muestran son generados a travez de AJAX, no creo que eso afece el funcionamiento, pero todo es posible.

Gracias por tu inmensa ayuda

Saludos
  #9 (permalink)  
Antiguo 22/09/2011, 15:08
 
Fecha de Ingreso: julio-2011
Mensajes: 220
Antigüedad: 12 años, 9 meses
Puntos: 72
Respuesta: Mostrar y Ocultar Contenido

Hola mixzplit, ¿Cuál es el código que se genera? Especialmente en la celda que contiene la descripción.
  #10 (permalink)  
Antiguo 22/09/2011, 15:35
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar y Ocultar Contenido

Hola Lubtufano

A partir de este codigo:

Código PHP:
<?php
session_start
();
if(!isset(
$_SESSION['us_id'])){
header("Location: ../index.php"); 
} else {
$usuario=$_SESSION['us_id'];
$admin=$_SESSION['us_tipo'];

include_once(
"conexion.php");
include(
'./Scripts/funcion.php');

$conexion = new ControlBD();
$conexion->conectar();
$conexion->seleccionarBD();
$query1="select * from cgusuarios where us_id='$usuario'";
$result1=$conexion->ejecutarQuery($query1);
$array1=mysql_fetch_array($result1);
$em_id=$array1['us_idempresa'];

$query2="select * from cgempresa";
$result2=$conexion->ejecutarQuery($query2);
?>
<!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=iso-8859-1"/>
<script type="text/javascript" src="./Scripts/imprimir.js"></script>
<script type="text/javascript" src="./Scripts/jquery-1.6.1.js"></script>
<script type="text/javascript" src="./Scripts/tooltips.js"></script>
<script type="text/javascript" src="accion.js"></script>
<script type="text/javascript" src="./Scripts/jquery.uniform.js"charset="utf-8"></script>
<link rel=stylesheet href="./Style/uniform.default.css" type="text/css"> 
<link rel=stylesheet href="./Style/default.css" type="text/css">
<link rel=stylesheet href="./Style/menuH.css" type="text/css">

</head>
<script type="text/javascript">
 $(function(){
        $("input, textarea, select, button").uniform();
      });
function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","req_selecionado.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?php
    
include('menu.php');
?>
<form>
<div class="centrado">
<table width="342" height="156" class="backgroundRequerimiento" id="tablas">
<tr>
<? if($admin>=3){ ?>
    <th height="149"><br>
      &nbsp;&nbsp;&nbsp;&nbsp;Empresa/Proyecto</th>
    <td><br><select name="empresa" id="empresa" onchange="showUser(this.value)">
        <option value="0">--- Seleccione ---</option>
<?        while($array2=mysql_fetch_array($result2)) {?>
        <option value="<?=$array2['em_id']; ?>"><?=$array2['em_nombre']; ?></option>
        <? ?></select></td>
<? }if($admin==2){ ?>
    <td><input type="hidden" value="<?=$em_id;?>" name="empresa" /></td>
<? ?>
    <!--<th>Buscar por Estatus:</th>
    <td><select name="users" onchange="showUser(this.value, empresa.value)">
        <option value="">---Seleccione---</option>
        <option value="Pendiente">Pendiente</option>
        <option value="En Proceso">En Proceso</option>
        <option value="Terminado">Terminado</option>
        <option value="todo">Todos</option>
    </select>
    </td>-->
</tr>
</table>
</div>
<br />
<div id="txtHint" class="centrado"><b>Mostrando</b></div>
</form>
</body>
</html>
<? ?>
Se llena la tabla y me genera todos los datos del codigo donde se valida la cantidad de caracteres de la descripcion.

Aqui existe un Formulario con un select, que al seleccionar se ejecuta el AJAX y me muestra la tabla con todos los datos de esa empresa.

Espero haberme explicado
  #11 (permalink)  
Antiguo 22/09/2011, 18:35
 
Fecha de Ingreso: julio-2011
Mensajes: 220
Antigüedad: 12 años, 9 meses
Puntos: 72
Respuesta: Mostrar y Ocultar Contenido

Pues en efecto esto no funciona debido a que se esta utilizando Ayax, entoces lo mejor es utilizar Ajax tambien para realizar lo que se desea; para esto sera necesario crear otra archivo PHP con el cúal se obtendra de la base de datos la descripción requerida, tambien se modificara un poco el archivo 'req_seleccionado.php' y el código javascript.

El archivo 'req_seleccionado.php' quedaria asi:
Código PHP:
Ver original
  1. <?php
  2.     session_start();
  3.     if(!isset($_SESSION['us_id'])){
  4.     header("Location: ../index.php");
  5.     } else {
  6.     $usuario=$_SESSION['us_id'];
  7.     $admin=$_SESSION['us_tipo'];
  8.      
  9.     $emp=$_GET["q"];
  10.      
  11.     include_once("conexion.php");
  12.     include('./Scripts/funcion.php');
  13.         $conexion = new ControlBD();
  14.         $conexion->conectar();
  15.         $conexion->seleccionarBD();
  16.        
  17.     $query="SELECT req_id, em_nombre,su_nombre, us_unidad, us_cargo, us_nombre, us_apellido, us_email, us_telefono, mo_nombre, tra_maestro, req_date, req_descripcion, req_valicacion, us_tipo, req_imagen, req_archivo FROM cgrequerimientos
  18.              INNER JOIN cgempresa on req_idempresa=em_id
  19.              INNER JOIN cgusuarios on req_usuario=us_id
  20.              INNER JOIN cgmodulo on req_idmodulo=mo_id
  21.              INNER JOIN cgtransacciones on req_idtrans=tra_tipo
  22.              INNER JOIN cgsucursal ON req_idsucursal=su_id
  23.               WHERE req_valicacion=0 and req_estado='Activo' AND em_id = '$emp'
  24.               ORDER BY req_id,req_date";
  25.     $result=$conexion->ejecutarQuery($query);
  26.     ?>
  27.     <form>
  28.     <a href="javascript:imprSelec('seleccion')" >Imprimir Requerimientos</a>
  29.     <div class="centrado">
  30.     <DIV ID="seleccion">
  31.     <table class="tablas">
  32.         <tr>
  33.             <th>Empresa</th>
  34.             <th>Sucursal</th>
  35.             <th>Ticket</th>
  36.             <!--<th>Departamento</th>
  37.             <th>Cargo del Solicitante</th> -->
  38.             <th>Nombre</th>
  39.             <th>Email</th>
  40.             <th>Telefono</th>
  41.             <th>Modulo</th>
  42.             <th>Transaccion</th>
  43.             <th>Fecha</th>
  44.             <th>Descripcion</th>
  45.             <th>Imagen</th>
  46.             <th>Documentacion</th>
  47.             <th colspan="4">Acciones</th>
  48.         </tr>
  49.     <?
  50.     $indice= 0;
  51.     while($array=mysql_fetch_array($result)){ $id=$array['req_id'];?>
  52.         <tr>
  53.             <td><?=$array['em_nombre']; ?></td>
  54.             <td><?=$array['su_nombre']; ?></td>
  55.             <td><strong><?=$array['req_id']; ?></strong></td>
  56.             <!--<td><?=$array['us_unidad']; ?></td>
  57.             <td><?=$array['us_cargo']; ?></td>-->
  58.             <td><?=$array['us_nombre']." ".$array['us_apellido']; ?></td>
  59.             <td><?=$array['us_email']; ?></td>
  60.             <td><?=$array['us_telefono']; ?></td>
  61.             <td><?=$array['mo_nombre']; ?></td>
  62.             <td><?=$array['tra_maestro']; ?></td>
  63.             <td><?=cambiar_fecha($array['req_date']); ?></td>
  64.             <td style=" text-align:justify; font-family:Tahoma, Geneva, sans-serif; font-size:12px;" id="<?="celda".$indice; ?>">
  65.             <? if(strlen($array['req_descripcion']) <= 120){
  66.                  echo $array['req_descripcion'];
  67.                  }else{
  68.         echo $descri=substr($array['req_descripcion'], 0, 120)."<a href=\"#\" onClick=\"mostrar('celda".$indice."', ".$indice.", ".$id.")\">[...]</a>";
  69.         } ?>
  70.              </td>
  71.            
  72.             <td><a href="<?=$array['req_imagen']; ?>" rel="lightbox" title="imagen"><img src="<?=$array['req_imagen']; ?>" alt="imagen" width="72" height="64" /></a></td>
  73.            
  74.             <? $archivo=$array['req_archivo']; if(substr($archivo,-3) == 'doc'){ ?>  
  75.             <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/word.png" alt="Word" width="50" height="50"  /></a></td>
  76.             <? } if(substr($archivo,-4) == 'docx'){ ?>  
  77.             <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/word.png" alt="Word" width="50" height="50"  /></a></td>
  78.             <? } elseif(substr($archivo,-3) == 'xls'){ ?>  
  79.             <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/excel.png" alt="Excel" width="50" height="50"  /></a></td>
  80.             <? } elseif(substr($archivo,-4) == 'xlsx'){ ?>  
  81.             <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/excel.png" alt="Excel" width="50" height="50"  /></a></td>
  82.             <? } elseif(substr($archivo,-3) == 'pdf'){ ?>  
  83.             <td class="center"><a href="<?=$array['req_archivo']; ?>" title="Documentacion"><img src="images/pdf.png" alt="Excel" width="50" height="50"  /></a></td>
  84.             <? } else {?>
  85.             <td class="center">No Tiene</td>
  86.             <? } ?>
  87.            
  88.             <td><a href="Javascript:Borrar('<?=$id;?>','Borrar_disp.php' ,'800','300')" title="Anular"><img src="./imagenes/eliminar.png" alt="Eliminar" border=0 ></a></td>
  89.             <td><a href="javascript:Actualizar('<?=$id;?>','modificareq.php' ,'850','370')" title="Modificar"><img src="./imagenes/actualizar.png" alt="Modificar" border=0></a></td>
  90.     <? if($array['req_valicacion']==0){ ?>
  91.             <td><a href="javascript:Validar('<?=$id;?>','activar.php' ,'800','300')" title="Validar"><img src="./imagenes/aceptar.png" alt="Agregar" border=0 ></a></td><? } ?>
  92.        
  93.         <td><a href="javascript:Correo('<?=$id;?>','correo.php' ,'800','300')" title="Correo"><img src="./imagenes/mail.png" alt="Agregar" border=0 ></a></td>
  94.        
  95.         </tr>
  96.     <?
  97.     $indice++;
  98.      } ?>
  99.     </table>
  100.     </DIV>
  101.     </div>
  102.     </form>
  103.     <? }?>

Lo que se hizo fue agregar un parametro más al llamado a la función 'mostar()', el cual es el id del registro y eliminar los bloques <script></script> que no sirven en este caso.
Ahora el código javascript que se localiza en la página principal.
Código Javascript:
Ver original
  1. <script>
  2.  $(function(){
  3.         $("input, textarea, select, button").uniform();
  4.       });
  5. function showUser(str)
  6. {
  7. if (str=="")
  8.   {
  9.   document.getElementById("txtHint").innerHTML="";
  10.   return;
  11.   }
  12. if (window.XMLHttpRequest)
  13.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  14.   xmlhttp=new XMLHttpRequest();
  15.   }
  16. else
  17.   {// code for IE6, IE5
  18.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  19.   }
  20. xmlhttp.onreadystatechange=function()
  21.   {
  22.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  23.     {
  24.     resumen= "";
  25.     visible= -1;
  26.     i= "";
  27.     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
  28.     }
  29.   }
  30. xmlhttp.open("GET","req_selecionado.php?q="+str,true);
  31. xmlhttp.send();
  32. }
  33.  
  34. var resumen= "";
  35. var visible= -1;
  36. var i= "";
  37.  
  38. function mostrar(obj, indice, d)
  39. {
  40. if (window.XMLHttpRequest)
  41.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  42.   xmlhttp=new XMLHttpRequest();
  43.   }
  44. else
  45.   {// code for IE6, IE5
  46.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  47.   }
  48. xmlhttp.onreadystatechange=function()
  49.   {
  50.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  51.     {
  52.     if(visible != -1)
  53.         document.getElementById('celda'+visible).innerHTML= resumen+" <a href=\"#\" onclick=\"mostrar('celda"+visible+"', "+visible+", "+i+")\">[...]</a>";
  54.     resumen= document.getElementById(obj).childNodes[0].nodeValue;
  55.     visible= indice;
  56.     document.getElementById(obj).innerHTML=xmlhttp.responseText;
  57.     }
  58.   }
  59. xmlhttp.open("GET", "req_selecionado_2.php?ind="+indice+"&id="+d, true);
  60. xmlhttp.send();
  61. }

Con la función mostrar se realizara una consulta asincronica cada vez que se de 'clic' sobre los tres puntos, esta consulta devolvera la descripción completa que se colocara en la celda adecuada al mismo tiempo que se oculta, en caso de que haya, la otra descripción larga.
Finalmente tenemos el segundo archivo PHP en este caso llamado 'req_selecionado_2.php', el cual recibirá como dato el 'id' del registro solicitado y lo único que se necesita es conectarce a la base de datos y obtener los datos deseados creo que seria algo asi.
Código PHP:
Ver original
  1. <?php
  2. if(!isset($_SESSION['us_id'])){
  3. header("Location: ../index.php");
  4. } else {
  5. $usuario=$_SESSION['us_id'];
  6. $admin=$_SESSION['us_tipo'];
  7.  
  8. $emp=$_GET["q"];
  9.  
  10. include_once("conexion.php");
  11. include('./Scripts/funcion.php');
  12.     $conexion = new ControlBD();
  13.     $conexion->conectar();
  14.     $conexion->seleccionarBD();
  15.    
  16. $query="SELECT  req_descripcion FROM cgrequerimientos where req_id=".$_GET['id'];
  17. $result=$conexion->ejecutarQuery($query);
  18. if($array= mysql_fetch_array($result))
  19.    echo $array['req_descripcion'];
  20. else
  21.    echo "no existe el elemento";
  22. ?>

Bueno eso ya depende de la estructura de la base de datos. Espero que esto te sirva.
  #12 (permalink)  
Antiguo 23/09/2011, 12:38
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar y Ocultar Contenido

Hola lubtufano, un millon de gracias por tu inmensa ayuda, has tenido paciencia con mi problema, algo que no veia como resolver.

Me funciona correctamente, ahora bien una ultima pregunta, espero no estar abusando, en una lista se despliagan en ocasiones muchos resultados, cuando le doy a los 3 puntos hace la accion correctamente, cuando le doy a los 3 puntos de otra descripcion me contrae el anterior y me desplliega el actual.

Ahora bien lo que sucede es que al darle de nuevo a los 3 puntos de la descripcion anterior no hace nada, no me permite volverle a dar click y q ejecute la accion, que podria estar pasando, estuve revisando antes de preguntarte pero no logre resolver.

Saludos y gracias nuevamente por la ayuda
  #13 (permalink)  
Antiguo 23/09/2011, 17:15
 
Fecha de Ingreso: julio-2011
Mensajes: 220
Antigüedad: 12 años, 9 meses
Puntos: 72
Respuesta: Mostrar y Ocultar Contenido

Es verdad, fue un pequeño error mio en la función mostrar(), lo que sucede es que no se esta guardando el 'id' correspondiente a la descripción sobre la que se hace clic y entonces al generarse la versión corta de esta descripción con javascript el principal dato necesario para relizar la consulta al servidor no se envia; lo correcto es esto.
Código Javascript:
Ver original
  1. function mostrar(obj, indice, d)
  2. {
  3. if (window.XMLHttpRequest)
  4.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  5.   xmlhttp=new XMLHttpRequest();
  6.   }
  7. else
  8.   {// code for IE6, IE5
  9.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  10.   }
  11. xmlhttp.onreadystatechange=function()
  12.   {
  13.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  14.     {
  15.     if(visible != -1)
  16.         document.getElementById('celda'+visible).innerHTML= resumen+" <a href=\"#\" onclick=\"mostrar('celda"+visible+"', "+visible+", "+i+")\">[...]</a>";
  17.     resumen= document.getElementById(obj).childNodes[0].nodeValue;
  18.     visible= indice;
  19.     i= d;
  20.     document.getElementById(obj).innerHTML=xmlhttp.responseText;
  21.     }
  22.   }
  23. xmlhttp.open("GET", "req_selecionado_2.php?ind="+indice+"&id="+d, true);
  24. xmlhttp.send();
  25. }

Solo faltaba esta linea: i= d;
Un saludo.
  #14 (permalink)  
Antiguo 24/09/2011, 07:07
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar y Ocultar Contenido

Hola lubtufano, muchas gracias por tu inmensa ayuda, yo habia colocado esa variable pero al incio, nunca probe colocarlo despues
Código PHP:
Ver original
  1. visible = indice;
, ahora si funcion bien con esa linea

Ahora aprendi un poco mas sobre AJAX, mil gracias por tu tiempo y rapidez de respuesta

saludos
  #15 (permalink)  
Antiguo 26/09/2011, 11:46
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar y Ocultar Contenido

Hola lubtufano, disculpa que te vuelva a molestar, pero me esta pasando algo muy particular.
Cuando el listado es muy largo, por ejemplo 30 registros y el registro 26 aplica para ampliar la descripcion al clickear en los 3 puntos, despues clickear este me envia al inicio de la pagina, donde esta el registro 1 y tengo que bajar para ver la descripcion completa.

Que opcion habria para que al darle a los 3 puntos se quede ahi y no me envie al incio de la pagina, ya que esto va a causar malestar en los usuarios. Supongo que dentro del mismo codigo AJAX se haria la modificacion, pero como no oy muy diestro te vuelvo a pedir ayuda.

Gracias de antemano y espero no causarte molestias

Saludos

Etiquetas: contenido, php, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:00.