Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Mostrar Datos en DIV

Estas en el tema de Mostrar Datos en DIV en el foro de Frameworks JS en Foros del Web. Hola a todos la comunidad de FOROS DEL WEB, le escribo por la siguiente duda que me ha surgido, soy nuevo en AJAX y voy ...
  #1 (permalink)  
Antiguo 05/03/2011, 10:06
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Mostrar Datos en DIV

Hola a todos la comunidad de FOROS DEL WEB, le escribo por la siguiente duda que me ha surgido, soy nuevo en AJAX y voy aprendiendo poco a poco, les explicare mi problema y les mostrare el codigo.

Tengo un formulario donde escribo el codigo del producto y me muestra la informacion del producto que corresponde al codigo ingresado, por ese la todo bien, la informacion me la esta mostrando en div correctamente sin recargar la pagina, el problema es que quiero ocultar el DIV y que cuando ingrese el codigo y le de al boton buscar me aparezca el DIV con la informacion y asi mismo que se pueda cerrar el DIV despues de haber visto la informacion.

Espero haberme explicado bien. aqui les dejare el codigo que estoy usando:

consultar_inventario.php

Código PHP:
<!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=utf-8" />
<title>Consultas de Inventario</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css" />
<!--<script language="JavaScript" type="text/javascript" src="js/ajax.js"></script>-->
<script language="JavaScript" type="text/javascript" src="js/consultar_productos.js"></script>

<style>
#detalles {
margin: 20px;
border: 1px solid #F0F0F0;
padding: 10px;
font-size: 10px;
}
</style> 
</head>

<body>

 <?php
 
include("conex.php");
 
$escala mysql_query ('SELECT esc_codigo FROM dpescalas');
 
//$consulta1 = mysql_query ('select  mar_descri from dpmarcas');
 
 
?>

 <fieldset id="inventario" >
 <!--<table width="400" border="0" align="center">
        <tr>-->
          <th scope="row" align="center" ><legend>CONSULTAR INVENTARIO</legend></th>
        <!--</tr>
       </table>-->
       <table width="400" border="0" align="center">
          <tr>
          
           <form name="formulario1" action="" onsubmit="enviarCodigoProducto(); return false" >
            <th width="82" scope="row" bordercolor="#F0F0F0" class="fondo"><label>Código:</label></th>
             <td colspan="6" align="center" bgcolor="#CCCCCC"><input name="codbusqueda" type="text" value="" size="20" maxlength="55" title="Código del Producto" class="inputboxInicio"   /><br/></td>
             <tr>
             <!--<td colspan="3" align="center" bordercolor="#F0F0F0" bgcolor="#0099CC">
                 <label><strong> Marcas: </strong></label>
               <td width="130" bgcolor="#CCCCCC">
               <label> Código: </label>
               </td>
             <td width="41">
               <select name = "codigo" title="Código de Marca">
                <?php 
                  
while ($resultado mysql_fetch_array($consulta))
                  {
                    echo 
"<option value={$resultado[mar_codigo]}>{$resultado[mar_codigo]}</option>";
                  }
                  
mysql_free_result($consulta);
                
?>              
                </select>
                </td>
                <td width="153" bgcolor="#CCCCCC"><label>Descripción: </label>
                </td>
                <td width="48">
                <select name = "descripcion" title="Descripcion de Marca">
                <?php 
                  
while ($resultado1 mysql_fetch_array($consulta1))
                  {
                    echo 
"<option value={$resultado1[mar_descri]}>{$resultado1[mar_descri]}</option>";
                  }
                  
mysql_free_result($consulta1);
                
?>              
                </select>
               </td> -->
             </tr>
             <tr>
             <td colspan="7" bgcolor="#CCCCCC"><div align="right"> <input name="buscar" type="submit" value="Buscar" class="boton" /></div></td>
             </tr>
          </form> 
         </tr>
</table>

 <div id="consultar_productos">
   <?php include('consultar.php'); ?>
 </div>

</fieldset>

<fieldset id="existencias" >
 <!--<table width="400" border="0" align="center">
        <tr>-->
          <th scope="row" align="center" ><legend>CONSULTAR EXISTENCIAS EN INVENTARIO</legend></th>
        <!--</tr>
       </table>-->
       <table width="400" border="0" align="center">
          <tr>
           <form name='existecia' method='post' action='consultarExistencias.php' >
            <th width="150" scope="row" bordercolor="#F0F0F0" class="fondo"><label>Código del Producto:</label></th>
             <td colspan="6" align="center" bgcolor="#CCCCCC"><input name="busqueda" type="text" value="" size="20" maxlength="55" title="Código del Producto" class="inputboxInicio"  /><br/></td>
             <tr>
             <td colspan="3" align="center" bordercolor="#F0F0F0" class="fondo">
                 <label><strong> Escalas: </strong></label>
               <td width="139" bgcolor="#CCCCCC">
               <label> Código: </label>
               </td>
             <td width="41">
               <select name = "escala" title="Código de Escala">
                <?php 
                  
while ($resultado mysql_fetch_array($escala))
                  {
                    echo 
"<option value={$resultado[esc_codigo]}>{$resultado[esc_codigo]}</option>";
                  }
                  
mysql_free_result($escala);
                
?>              
                </select>
                </td>
            <!--    <td width="153" bgcolor="#CCCCCC"><label>Descripción: </label>
                </td>
                <td width="48">
                <select name = "descripcion" title="Descripcion de Marca">
                <?php 
                  
while ($resultado1 mysql_fetch_array($consulta1))
                  {
                    echo 
"<option value={$resultado1[mar_descri]}>{$resultado1[mar_descri]}</option>";
                  }
                  
mysql_free_result($consulta1);
                
?>              
                </select>
               </td> -->
             </tr>
             <tr>
             <td colspan="7" bgcolor="#CCCCCC"><div align="right"> <input name="buscar" type="submit" value="Buscar" class="boton" /></div></td>
             </tr>
          </form> 
         </tr>
</table>
</fieldset>
</body>
</html>
consultar_productos.js

Código Javascript:
Ver original
  1. function objetoAjax(){
  2.     var xmlhttp=false;
  3.     try {
  4.         xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  5.     } catch (e) {
  6.         try {
  7.            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  8.         } catch (E) {
  9.             xmlhttp = false;
  10.         }
  11.     }
  12.  
  13.     if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  14.         xmlhttp = new XMLHttpRequest();
  15.     }
  16.     return xmlhttp;
  17. }
  18. function enviarCodigoProducto(){
  19.     //donde se mostrará lo resultados
  20.     divResultado = document.getElementById('consultar_productos');
  21.     //valores de los inputs
  22.     codbusqueda=document.formulario1.codbusqueda.value;
  23.    
  24.     //instanciamos el objetoAjax
  25.     ajax=objetoAjax();
  26.     ajax.open("POST","consultar.php",true);
  27.     ajax.onreadystatechange=function() {
  28.         if (ajax.readyState==4) {
  29.             divResultado.innerHTML = ajax.responseText
  30.             LimpiarCampos();
  31.         }
  32.     }
  33.     ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  34.     ajax.send("&codbusqueda="+codbusqueda)
  35.    
  36.     }
  37.  
  38. function LimpiarCampos(){
  39.     document.formulario1.codbusqueda.value="";
  40.     document.formulario1.codbusqueda.focus();
  41. }


Ahi estan los 2 archivos que estoy usando para hacer proceso.
Ya les envio el archivo donde se hace la consulta

P.D.: De que manera me sugieren validar mis campos con AJAX?

Saludos, espero pueda ayudarme.
  #2 (permalink)  
Antiguo 05/03/2011, 10:07
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar Datos en DIV

Aqui esta el ultimo archivo, que es donde se hace la consulta a la base de datos:


consultarr.php

Código PHP:

<body>
<?php
        
include("conex.php");

$codbusqueda=$_POST['codbusqueda'];
$env=$_GET["env"];

$result=mysql_query("select dpinv.INV_CODIGO, dpinv.INV_DESCRI, dpinv.INV_CODMAR, dpmarcas.MAR_DESCRI,  dpinv.INV_MODELO,                    dpinv.INV_MATERI, dpinv.INV_TACON, dpinv.INV_COLOR, dpinv.INV_FILBMP FROM dpinv,dpmarcas 
                    WHERE dpinv.INV_CODIGO = '$codbusqueda' AND    dpinv.INV_CODMAR = dpmarcas.MAR_CODIGO "
);

$row mysql_fetch_row($result);

$sql mysql_query("SELECT dpprecios.PRE_CODIGO, dpprecios.PRE_PRECIO, dpinv.INV_CODIGO FROM dpprecios,dpinv WHERE dpinv.INV_CODIGO = '$codbusqueda' AND dpprecios.PRE_CODIGO = dpinv.INV_CODIGO " );
$row1 mysql_fetch_row($sql);

$sql1 mysql_query("SELECT DPINV.INV_CODIGO,DPINV.INV_DESCRI,
                     ROUND(SUM(DPMOVINV.MOV_CANTID*MOV_FISICO*MOV_CXUND )) AS MOV_CANTID
                    ,SUM(DPMOVINV.MOV_CANTID*MOV_FISICO*MOV_CXUND ) AS ANTERIOR
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_CANTID*MOV_CXUND,0)) AS ENTRADA 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_CANTID*MOV_CXUND,0)) AS SALIDA  
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL01*MOV_CXUND,0)) AS T1E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL02*MOV_CXUND,0)) AS T2E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL03*MOV_CXUND,0)) AS T3E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL04*MOV_CXUND,0)) AS T4E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL05*MOV_CXUND,0)) AS T5E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL06*MOV_CXUND,0)) AS T6E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL07*MOV_CXUND,0)) AS T7E  
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL08*MOV_CXUND,0)) AS T8E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL09*MOV_CXUND,0)) AS T9E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL10*MOV_CXUND,0)) AS T10E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL11*MOV_CXUND,0)) AS T11E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL12*MOV_CXUND,0)) AS T12E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL13*MOV_CXUND,0)) AS T13E 
                    ,SUM(IF(MOV_FISICO= 1,DPMOVINV.MOV_TALL14*MOV_CXUND,0)) AS T14E 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL01*MOV_CXUND,0)) AS T1S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL02*MOV_CXUND,0)) AS T2S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL03*MOV_CXUND,0)) AS T3S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL04*MOV_CXUND,0)) AS T4S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL05*MOV_CXUND,0)) AS T5S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL06*MOV_CXUND,0)) AS T6S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL07*MOV_CXUND,0)) AS T7S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL08*MOV_CXUND,0)) AS T8S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL09*MOV_CXUND,0)) AS T9S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL10*MOV_CXUND,0)) AS T10S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL11*MOV_CXUND,0)) AS T11S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL12*MOV_CXUND,0)) AS T12S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL13*MOV_CXUND,0)) AS T13S 
                    ,SUM(IF(MOV_FISICO=-1,DPMOVINV.MOV_TALL14*MOV_CXUND,0)) AS T14S 
                   ,DPESCALAS.ESC_TALL01,DPESCALAS.ESC_TALL02,DPESCALAS.ESC_TALL03,DPESCALAS.ESC_TALL04,
                    DPESCALAS.ESC_TALL05,DPESCALAS.ESC_TALL06,DPESCALAS.ESC_TALL07,DPESCALAS.ESC_TALL08,
                    DPESCALAS.ESC_TALL09,DPESCALAS.ESC_TALL10,DPESCALAS.ESC_TALL11,DPESCALAS.ESC_TALL12,
                   DPESCALAS.ESC_TALL13,DPESCALAS.ESC_TALL14,DPMOVINV.MOV_ESCASO FROM DPINV 
                   LEFT JOIN DPMOVINV ON DPINV.INV_CODIGO=DPMOVINV.MOV_CODIGO  INNER JOIN DPESCALAS ON ESC_CODIGO=MOV_ESCASO  
                    WHERE dpinv.INV_CODIGO = '$codbusqueda' AND dpmovinv.MOV_CODIGO = '$codbusqueda' AND(DPMOVINV.MOV_CODALM= '001') 
                    AND (DPMOVINV.MOV_CODSUC= '000001') AND MOV_INVACT=1 AND MOV_FISICO<>0 AND NOT (INV_UTILIZ='R' OR INV_UTILIZ='S') 
                    GROUP BY INV_CODIGO,INV_DESCRI,MOV_ESCASO 
                    HAVING SUM(DPMOVINV.MOV_CANTID*MOV_FISICO)> '' ORDER BY DPINV.INV_CODIGO"
);

$existencia mysql_fetch_row($sql1);

/*if (!$row=="")
  {
    echo "<script>alert('Codigo no existe!')</script>";
    echo "<script> window.history.back(-1)</script>";
   }
  */
 
mysql_free_result($result);
 
mysql_free_result($sql);
 
mysql_free_result($sql1);
 
?>

<table width="620" border="0" bordercolor="#FFFFFF" align="center">
    <tr>
      <td width="500"  bordercolor="#F0F0F0" class="fondo"><div align="center">
        <p><strong><span class="Estilo8">INVENTARIO</span></strong></p>
        </div></td>
    </tr>
  </table>
<table width="620" border="0" align="center">
  <tbody>
    <tr>
      <td colspan="5" class="fondo"><div align="center" class="Estilo12 Estilo9">RESULTADO DEL CÓDIGO: <strong><?php echo $codbusqueda?></strong></div></td>
    </tr>
    <tr>
      <!-- <form name='formulario' method='post' action='prueba.php' > -->
      <td width="106" bgcolor="#CCCCCC"><span class="Estilo17">
        <label>Codigo:</label>
      </span></td>
      <td colspan="1" bgcolor="#CCCCCC" class="inputbox"><strong> <?php echo $row[0]?></strong></td>
      <td width="180" rowspan="9" bgcolor="#CCCCCC" ><img src = "<?php echo $row[8]  ?>" width="180" height="180" /></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC">
        <label>Descripcion: </label>
      </td>
      <td colspan="1" rowspan="1" bgcolor="#CCCCCC" class="inputbox"><strong><?php echo $row[1]?></strong></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC">Marca: </td>
      <td colspan="1" bgcolor="#CCCCCC" class="inputbox"><strong> <?php echo $row[3]?></strong></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC">
        <label>Precio: </label>
      </td>
      <td colspan="1" bgcolor="#CCCCCC" class="inputbox"><strong>
          <?php 
                
if ($row1[1] == ""
                  { 
                   echo 
$row1[1] = "0.00"
                  } 
                  else 
                  {
                    echo 
$row1[1];
                  }
          
?>
          </strong></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC">
        <label>Modelo: </label>
      </td>
      <td colspan="1" bgcolor="#CCCCCC" class="inputbox"><strong> <?php echo $row[4]?></strong></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC">Material: </td>
      <td colspan="1" bgcolor="#CCCCCC" class="inputbox"><strong> <?php echo $row[5]?></strong></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC">Tacon: </td>
      <td colspan="1" bgcolor="#CCCCCC" class="inputbox"><strong> <?php echo $row[6]?></strong></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC">Color: </td>
      <td colspan="1" bgcolor="#CCCCCC" class="inputbox"><strong> <?php echo $row[7]?></strong></td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC">Existencia: </td>
      <td colspan="1" bgcolor="#CCCCCC" class="inputbox"><strong>
       <?php 
         
if ($existencia[2]=="" || $existencia[2]< "0" 
                  { 
                   echo 
$existencia[2] = "0"
                  } 
                  else 
                  {
                    echo 
$existencia[2];
                  }
         
         
?>
         </strong>
        </td>
    </tr>
    <tr>
      <td bgcolor="#CCCCCC" colspan="5" align="right">
        <input name="volver" type="button" value="Volver" onclick="window.history.back(-1)" class="boton"  />
      </td>
    </tr>
    
  </tbody>
</table>
</body>
</html>
  #3 (permalink)  
Antiguo 05/03/2011, 15:07
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Mostrar Datos en DIV

en consultar insertas un span
Cita:
<span id="cerrar" onclick="displaydiv()">X</span>
en consultar_inventario
Cita:
function displaydiv() {
document.getElementById('consultar_productos').sty le.display = 'none';
}
consultar_productos
Cita:
divResultado.style.display = 'block';
  #4 (permalink)  
Antiguo 06/03/2011, 09:36
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar Datos en DIV

Muchas gracias IsaBelM, me funciono de maravilla, no podia dar con la solucion, ahora otra pregunta, quizas un poco tonta pero no logro hacerlo?

El DIV me aparece desplegado, como hago para que aparezca cerrado y se habra solo cuando haga la consulta??

Saludos
  #5 (permalink)  
Antiguo 06/03/2011, 13:29
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Mostrar Datos en DIV

usa css para ocultarlo. la propiedad display: none;
  #6 (permalink)  
Antiguo 08/03/2011, 15:52
 
Fecha de Ingreso: enero-2011
Ubicación: Maracaibo
Mensajes: 179
Antigüedad: 13 años, 3 meses
Puntos: 2
Respuesta: Mostrar Datos en DIV

Muchas gracias IsabelM me ha servido mucho tu ayuda.

Saludos

Etiquetas: ajax
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 11:19.