Foros del Web » Programando para Internet » Jquery »

[JQuery]Problema con hide and show

 Estas en el tema de [JQuery]Problema con hide and show en el foro de Jquery en Foros del Web. Buenas, estoy haciendo una web de inventario en php, mi problema yace en que en la pantalla principal muestro una ficha con datos principales de ...
  #1 (permalink)  
Antiguo 16/06/2009, 11:46
Avatar de mackiechan  
Fecha de Ingreso: junio-2009
Ubicación: Maracay, Venezuela
Mensajes: 51
Antigüedad: 14 años, 10 meses
Puntos: 12
[JQuery]Problema con hide and show
Buenas, estoy haciendo una web de inventario en php, mi problema yace en que en la pantalla principal muestro una ficha con datos principales de la consulta y al hacer click sobre esta ficha despliega un div donde se muestran el resto de los datos, pero la cosa solo funciona en la primera ficha de la consulta, las demas no.

Index php
Código PHP:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ordenar por Columnas</title>
<script type="text/javascript" src="ajax/ajax.js"></script>
<link href="css/estilos.css" rel="stylesheet" type="text/css"></link> 
<script src="jquery.js" type="text/javascript">
</script>

<script type="text/javascript">
    $(document).ready(function (){

        $("#show").click(function (){

            $("#mostrar").show("normal");
        });
    $("#hide").click(function (){

            $("#mostrar").hide("normal");
        });


        $("#mostrar").hide("fast");
    });
</script>

</head>

<body>


<?php include('listado.php')?>


</body>
</html>
Listado php
Código PHP:
while($MostrarFila=mysql_fetch_array($Consulta)){
    echo "<div id='cont'><div id='sombra'><div id='text'>

          <a id='show'><table class='contenido' style='background-image:url(css/images/".$cat.".png);' width='500px' cellspacing='0' cellpading='0'>
<tr><td colspan='3'><h2>".$MostrarFila['ncat']."</h2></td></tr><tr> \n";
    echo "    <td rowspan='4' style='width:100px;'></td> \n";
    echo "    <tr><td>".$MostrarFila['ndep']."</td> \n";
    echo "    <td>".$MostrarFila['nmar']."</td> \n";
    echo "    <tr><td style='width:300px;'>".$MostrarFila['idred']."</td> \n";
    echo "    <td>".$MostrarFila['nmod']."</td></tr> \n";
    echo "    <tr><td style='width:100px;'>".$MostrarFila['ip']."</td> \n";
    echo "    <td>".$MostrarFila['serial']."</td></tr></table></a></div><a id='hide'><div id='mostrar' class='oculto'><table style='background-color:#9fa881;color:#ffffff;'><tr><td>".$MostrarFila['codcat']."</td> \n";
    echo "    <td>".$MostrarFila['mem']."</td> \n";
    echo "    <td>".$MostrarFila['mac']."</td> \n";
    echo "    <td>".$MostrarFila['prov']."</td> \n";
    echo "    <td>".$MostrarFila['add1']."</td> \n";
    echo "    <td>".$MostrarFila['add2']."</td> \n";
    echo "    <td>".$MostrarFila['add3']."</td> \n";
    echo "    <td>".$MostrarFila['fact']."</td> \n";
    echo "    <td >".$MostrarFila['costo']."</td> \n";
    echo "    <td>".$MostrarFila['gar_ini']."</td> \n";
    echo "    <td>".$MostrarFila['nsta']."</td> \n";
    echo "    <td>".$MostrarFila['observacion']."</td></tr></table></div></a> \n</div></div> \n";
} 
Ayuda T_T
Última edición por mackiechan; 16/06/2009 a las 11:51
  #2 (permalink)  
Antiguo 17/06/2009, 03:01
Avatar de aldo1982  
Fecha de Ingreso: noviembre-2004
Ubicación: Santa Fe (Argentina) Colon F.C
Mensajes: 1.362
Antigüedad: 19 años, 5 meses
Puntos: 6
Respuesta: [JQuery]Problema con hide and show
yo lo hago asi...

Código PHP:
while($MostrarFila=mysql_fetch_array($Consulta)){

<script type="text/javascript">
    $(document).ready(function (){

        $("#show<?=$MostrarFila['id']?>").click(function (){

            $("#mostrar<?=$MostrarFila['id']?>").show("normal");
        });
    $("#hide<?=$MostrarFila['id']?>").click(function (){

            $("#mostrar<?=$MostrarFila['id']?>").hide("normal");
        });


        $("#mostrar<?=$MostrarFila['id']?>").hide("fast");
    });
</script>

    echo "<div id='cont'><div id='sombra'><div id='text'>

          <a id='show". $MostrarFila['id']."'><table class='contenido' style='background-image:url(css/images/".$cat.".png);' width='500px' cellspacing='0' cellpading='0'>
<tr><td colspan='3'><h2>".$MostrarFila['ncat']."</h2></td></tr><tr> \n";
    echo "    <td rowspan='4' style='width:100px;'></td> \n";
    echo "    <tr><td>".$MostrarFila['ndep']."</td> \n";
    echo "    <td>".$MostrarFila['nmar']."</td> \n";
    echo "    <tr><td style='width:300px;'>".$MostrarFila['idred']."</td> \n";
    echo "    <td>".$MostrarFila['nmod']."</td></tr> \n";
    echo "    <tr><td style='width:100px;'>".$MostrarFila['ip']."</td> \n";
    echo "    <td>".$MostrarFila['serial']."</td></tr></table></a></div><a id='hide'><div id='mostrar' class='oculto'><table style='background-color:#9fa881;color:#ffffff;'><tr><td>".$MostrarFila['codcat']."</td> \n";
    echo "    <td>".$MostrarFila['mem']."</td> \n";
    echo "    <td>".$MostrarFila['mac']."</td> \n";
    echo "    <td>".$MostrarFila['prov']."</td> \n";
    echo "    <td>".$MostrarFila['add1']."</td> \n";
    echo "    <td>".$MostrarFila['add2']."</td> \n";
    echo "    <td>".$MostrarFila['add3']."</td> \n";
    echo "    <td>".$MostrarFila['fact']."</td> \n";
    echo "    <td >".$MostrarFila['costo']."</td> \n";
    echo "    <td>".$MostrarFila['gar_ini']."</td> \n";
    echo "    <td>".$MostrarFila['nsta']."</td> \n";
    echo "    <td>".$MostrarFila['observacion']."</td></tr></table></div></a> \n</div></div> \n";
}
Ayuda T_T[/QUOTE]
__________________
LA MUERTE ESTÁ TAN SEGURA DE VENCER QUE NOS DA TODA UNA VIDA DE VENTAJA
  #3 (permalink)  
Antiguo 17/06/2009, 06:33
Avatar de mackiechan  
Fecha de Ingreso: junio-2009
Ubicación: Maracay, Venezuela
Mensajes: 51
Antigüedad: 14 años, 10 meses
Puntos: 12
Respuesta: [JQuery]Problema con hide and show
O__O a la final lo deje así...

Código: 
while($MostrarFila=mysql_fetch_array($Consulta)){

<script type="text/javascript">
    $(document).ready(function (){

        $("#show<?php echo $MostrarFila['id']?>").click(function (){

            $("#mostrar<?php echo $MostrarFila['id']?>").show("normal");
        });
    $("#hide<?php echo $MostrarFila['id']?>").click(function (){

            $("#mostrar<?php echo $MostrarFila['id']?>").hide("normal");
        });


        $("#mostrar<?php echo $MostrarFila['id']?>").hide("fast");
    });
</script>

    echo "<div id='cont'><div id='sombra'><div id='text'>

          <a id='show". $MostrarFila['id']."'><table class='contenido' style='background-image:url(css/images/".$cat.".png);' width='500px' cellspacing='0' cellpading='0'>
<tr><td colspan='3'><h2>".$MostrarFila['ncat']."</h2></td></tr><tr> \n";
    echo "    <td rowspan='4' style='width:100px;'></td> \n";
    echo "    <tr><td>".$MostrarFila['ndep']."</td> \n";
    echo "    <td>".$MostrarFila['nmar']."</td> \n";
    echo "    <tr><td style='width:300px;'>".$MostrarFila['idred']."</td> \n";
    echo "    <td>".$MostrarFila['nmod']."</td></tr> \n";
    echo "    <tr><td style='width:100px;'>".$MostrarFila['ip']."</td> \n";
    echo "    <td>".$MostrarFila['serial']."</td></tr></table></a></div><a id='hide". $MostrarFila['id']."'><div id='mostrar". $MostrarFila['id']."' class='oculto'><table style='background-color:#9fa881;color:#ffffff;'><tr><td>".$MostrarFila['codcat']."</td> \n";
    echo "    <td>".$MostrarFila['mem']."</td> \n";
    echo "    <td>".$MostrarFila['mac']."</td> \n";
    echo "    <td>".$MostrarFila['prov']."</td> \n";
    echo "    <td>".$MostrarFila['add1']."</td> \n";
    echo "    <td>".$MostrarFila['add2']."</td> \n";
    echo "    <td>".$MostrarFila['add3']."</td> \n";
    echo "    <td>".$MostrarFila['fact']."</td> \n";
    echo "    <td >".$MostrarFila['costo']."</td> \n";
    echo "    <td>".$MostrarFila['gar_ini']."</td> \n";
    echo "    <td>".$MostrarFila['nsta']."</td> \n";
    echo "    <td>".$MostrarFila['observacion']."</td></tr></table></div></a> \n</div></div> \n";
}
Creo que amo a aldo D: XDDDD muchas gracias man, funciono perfectamente, aunque algo lento, le agregare algo de paginacion para que no cargue tanto.

Gracias
  #4 (permalink)  
Antiguo 17/06/2009, 23:43
Avatar de aldo1982  
Fecha de Ingreso: noviembre-2004
Ubicación: Santa Fe (Argentina) Colon F.C
Mensajes: 1.362
Antigüedad: 19 años, 5 meses
Puntos: 6
De acuerdo Respuesta: [JQuery]Problema con hide and show
je de nada, veo que no muchos entran a esta parte del foro.

cuantos registros te carga ? podrias paginarlo, aca te dejo una funcion para armar el paginado.

Código PHP:
function paginacion_sql($perPage, &$page, &$from, $extraVars, $table, $sqlWhere, $title, $idField = "", $showPages = TRUE) {
    // OJO: $page y $from se pasa por referencia 
    
    if (!$page)                { $page = 1; }    
    if ($page < 1)        { $page = 1; }    
    if ($title)             { $title = $title . ": "; }
    if ($extraVars)     { $extraVars = "&" . $extraVars; }
    if (!$idField)         { $idField = "id";    }
    
    $from = ($page - 1) * $perPage;
    
    $sql = "SELECT count(DISTINCT $idField) as n_registros FROM $table $sqlWhere";
    $result = mysql_query($sql);
    
    if ($line = mysql_fetch_array($result)) {
        $cuantos = $line[n_registros];
        $pages = ceil($cuantos / $perPage);

        if ($page > 1) {
            $previous = "<a href=\"" . $_SERVER['PHP_SELF']  . "?page=" . ($page - 1) 
                    . "$extraVars\"><b>&lt; Anterior</b></a> | ";
            $desde = $perPage * ($page - 1) + 1;
        }else{
            $desde = 1;
        }

        if ($desde == $cuantos OR $cuantos < $perPage + $desde) {
            $hasta = $cuantos;
        }else{
            $next = " | <a href=\"" . $_SERVER['PHP_SELF']  . "?page=" . ($page + 1) 
                    . "$extraVars\"><b>Siguiente &gt;</b></a>";
            $hasta = $perPage * $page;
        }

        if ($pages > 0) {
            $header = "<div>$previous$title<b>$desde-$hasta</b> de <b>$cuantos</b>$next</div>";
    
            if ($showPages) {
                $intermedias = "<div>Paginas: ";
                
                for ($n = 1; $n <= $pages; $n++){
                    if ($n == $page){
                        $intermedias .= "$sep<b>$n</b>";
                    }else{
                        $intermedias .= "$sep<a href=\"" . $_SERVER['PHP_SELF'] . "?page=$n$extraVars\">$n</a>";
                    }
                    $sep = " ";
                }
                $intermedias .= "</div>";
            }
        }
        //$page = ($page - 1) * $perPage;
        
    }
    
    $header .= $intermedias; 
    return $header;
} 

para usar la paginacion


Código PHP:
perPage = 100;
$page = $_GET[page];
$paging = paginacion3($perPage, $page, $from,
                                                                                        "variables_get",
                                                                                        "tabla",
                                                                                        " WHERE campo_de_la_tabla =  $variable_de_filtro",
                                                                                        "nombre que aparece en la paginacion",
                                                                                        "id_unico_de_la_tabla");

mysql_query("SET NAMES utf8");    
$sql = "select * from tabla WHERE # EL MISMO QUE EN LA PAGINACION
    "; 

despues del while que termina la recorrida de registros de tu string SQL pones esto que es lo que te muestra la paginacion




Código PHP:
<div id="pages"  align="center" ><?=$paging?></div>
para darle un formato css fijate que tenes el div con id="pages"

podrias hacer algo como lo siguiente

Código HTML:
  <style type="text/css">

div#pages {
	padding: 6px;
	font-size: 10px;
	text-align: center;
}

div#pages a {
	padding: 6px;
	font-size: 10px;
	text-align: center;
}

div#pages a:hover {
	padding: 6px;
	font-size: 10px;
	text-align: center;
}
</style>

salu2 y espero te sirva
__________________
LA MUERTE ESTÁ TAN SEGURA DE VENCER QUE NOS DA TODA UNA VIDA DE VENTAJA
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


« Tema Anterior | Próximo Tema »


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