Foros del Web » Programando para Internet » Javascript »

javascript para ocultar divs

Estas en el tema de javascript para ocultar divs en el foro de Javascript en Foros del Web. Hola buenas a todos, deseo ocultar una div según el contenido de una variable sea igual a cero o diferente de 0, he probado el ...
  #1 (permalink)  
Antiguo 20/07/2015, 13:07
Avatar de angel_xx_1990  
Fecha de Ingreso: junio-2013
Ubicación: Guadalajara
Mensajes: 236
Antigüedad: 10 años, 9 meses
Puntos: 0
Pregunta javascript para ocultar divs

Hola buenas a todos, deseo ocultar una div según el contenido de una variable sea igual a cero o diferente de 0, he probado el siguiente código pero debe de haber algún error ya que no me funciona...




Código PHP:
<script type="text/javascript">
function 
mostrar(){
var 
var1=document.getElementById('$variable'').value;
var var2=document.getElementById('
div1); 

if (
var1==0) {
var2.style.display="inline";
} else {
var2.style.display="none";
}
}
</script> 
¿que es lo que falla?

sorry estoy aprendiendo de programación
  #2 (permalink)  
Antiguo 20/07/2015, 13:25
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 7 meses
Puntos: 578
Respuesta: javascript para ocultar divs

¿Has pensado que pueda ser por las comillas? Pregunto

Ah, ¿y qué se supone que es $variable? En JS, el uso del dólar antes de una variable no es necesario
  #3 (permalink)  
Antiguo 20/07/2015, 13:27
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: javascript para ocultar divs

Los errores están en las dos líneas en las que declaras variables.

Para empezar, si deseas usar una variable de PHP en el código JavaScript en un archivo PHP (una práctica bastante desagradable y que puede ser reemplazada por Ajax para interactuar con ambos lenguajes a la vez), debes de imprimir la variable utilizando tanto las etiquetas PHP como el constructor echo, además, el valor a mostrar debe de ir entre dos comillas, no entre tres.

Código Javascript:
Ver original
  1. var var1=document.getElementById('<?php echo $variable; ?>').value;

Y en la segunda declaración, el error está también en las comillas. Colocaste una en lugar de dos.

Código Javascript:
Ver original
  1. var var2=document.getElementById('div1');

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #4 (permalink)  
Antiguo 20/07/2015, 13:46
Avatar de angel_xx_1990  
Fecha de Ingreso: junio-2013
Ubicación: Guadalajara
Mensajes: 236
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: javascript para ocultar divs

Tal cual:

Código PHP:
Ver original
  1. <script type="text/javascript">
  2. function mostrar(){
  3. var var var1=document.getElementById('<?php echo $variable; ?>').value;
  4. var var2=document.getElementById('div1');  
  5.  
  6. if (var1==0) {
  7. var2.style.display="inline";
  8. } else {
  9. var2.style.display="none";
  10. }
  11. }
  12. </script>


...no funciona..

El php, va antes y si hace su labor...
  #5 (permalink)  
Antiguo 20/07/2015, 13:54
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: javascript para ocultar divs

¿Y en qué momento ejecutas la función? ¿Al cargar la página? ¿Por qué pones dos veces la palabra reservada var para declarar a la primeras de las variables?

Por si no lo sabías, también puedes declarar varias variables a la vez utilizando una sola vez la palabra reservada var:

Código Javascript:
Ver original
  1. var a, b, c, d, e;

Y es la mejor forma.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #6 (permalink)  
Antiguo 20/07/2015, 14:16
Avatar de angel_xx_1990  
Fecha de Ingreso: junio-2013
Ubicación: Guadalajara
Mensajes: 236
Antigüedad: 10 años, 9 meses
Puntos: 0
Información Respuesta: javascript para ocultar divs

Cita:
Iniciado por Alexis88 Ver Mensaje
¿Y en qué momento ejecutas la función? ¿Al cargar la página? ¿Por qué pones dos veces la palabra reservada var para declarar a la primeras de las variables?

Por si no lo sabías, también puedes declarar varias variables a la vez utilizando una sola vez la palabra reservada var:

Código Javascript:
Ver original
  1. var a, b, c, d, e;

Y es la mejor forma.


Se ativa al envíar un formulario que hace una consulta a mi base de datos:


Código PHP:
<? if (isset($_REQUEST['submit'])){

$result=mysql_query("SELECT * FROM $seccion WHERE email='$email'");

$datosobt=mysql_fetch_array($result);

if (
$datosobt==0) { 

echo 
"No existe publicacion con los datos indicados";

}else if(
$datosobt!=0){

echo 
"Si existe publicación";

}
Cuando se envíe el formulario la variable $datosobt tendra un valor 0 si no hay resultados o 1,2,3,4,5, etc si hay resultados.

De esta manera cuando no hay resultados muestra un mensaje y cuando los hay debe ocultar una div...y para ello utilizo el javascript


¿esta bien?
  #7 (permalink)  
Antiguo 20/07/2015, 14:32
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: javascript para ocultar divs

Por como lo explicas, puedo suponer que estás haciendo esto con Ajax, ¿verdad?

Si es así, el mostrar/ocultar al elemento lo debes de hacer cuando recibas la respuesta de la petición. Sería de mucha ayuda si pudieras explicarnos un poco más sobre cómo estás haciendo esto.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #8 (permalink)  
Antiguo 20/07/2015, 14:40
Avatar de angel_xx_1990  
Fecha de Ingreso: junio-2013
Ubicación: Guadalajara
Mensajes: 236
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: javascript para ocultar divs

Cita:
Iniciado por Alexis88 Ver Mensaje
Por como lo explicas, puedo suponer que estás haciendo esto con Ajax, ¿verdad?

Si es así, el mostrar/ocultar al elemento lo debes de hacer cuando recibas la respuesta de la petición. Sería de mucha ayuda si pudieras explicarnos un poco más sobre cómo estás haciendo esto.
Sin Ajax..
  #9 (permalink)  
Antiguo 20/07/2015, 15:02
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: javascript para ocultar divs

El tema está en que en PHP no existen los eventos como los de JavaScript, por lo que el envío del formulario no basta pues aún no hay una respuesta.

Se me ocurre que lo hagas con Ajax, de tal manera que envías los datos de manera asíncrona a otro archivo que hace la búsqueda en la BD y devuelve una respuesta mediante la cual decidirás si ocultarás o mostrarás al <div> o cualquiera otra acción que creas pertinente.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #10 (permalink)  
Antiguo 20/07/2015, 15:14
Avatar de angel_xx_1990  
Fecha de Ingreso: junio-2013
Ubicación: Guadalajara
Mensajes: 236
Antigüedad: 10 años, 9 meses
Puntos: 0
Exclamación Respuesta: javascript para ocultar divs

Cita:
Iniciado por Alexis88 Ver Mensaje
El tema está en que en PHP no existen los eventos como los de JavaScript, por lo que el envío del formulario no basta pues aún no hay una respuesta.

Se me ocurre que lo hagas con Ajax, de tal manera que envías los datos de manera asíncrona a otro archivo que hace la búsqueda en la BD y devuelve una respuesta mediante la cual decidirás si ocultarás o mostrarás al <div> o cualquiera otra acción que creas pertinente.

Saludos
Eso sería perfecto, pero ahora bien...¿como se haria con Ajax?

Si me lo explicas te lo agradecería mucho

Un saludo!!
  #11 (permalink)  
Antiguo 20/07/2015, 15:26
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: javascript para ocultar divs

Ahora estoy de salida, pero te dejo esto en donde podrás encontrar la información necesaria para aprender a hacer peticiones asíncronas (Ajax). Tiene ejemplos.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #12 (permalink)  
Antiguo 21/07/2015, 10:48
Avatar de angel_xx_1990  
Fecha de Ingreso: junio-2013
Ubicación: Guadalajara
Mensajes: 236
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: javascript para ocultar divs

Cita:
Iniciado por Alexis88 Ver Mensaje
Ahora estoy de salida, pero te dejo esto en donde podrás encontrar la información necesaria para aprender a hacer peticiones asíncronas (Ajax). Tiene ejemplos.

Saludos
No soy capaz de hacer funcionar nada coherente...

¿enserio es tan dificil?, podría hacerse con PHP solo?

Muchas gracias de nuevo!
  #13 (permalink)  
Antiguo 21/07/2015, 12:49
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: javascript para ocultar divs

Si nos mostraras lo que has intentado, te podríamos ayudar.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #14 (permalink)  
Antiguo 22/07/2015, 14:09
Avatar de angel_xx_1990  
Fecha de Ingreso: junio-2013
Ubicación: Guadalajara
Mensajes: 236
Antigüedad: 10 años, 9 meses
Puntos: 0
Exclamación Respuesta: javascript para ocultar divs

Cita:
Iniciado por Alexis88 Ver Mensaje
Si nos mostraras lo que has intentado, te podríamos ayudar.
Me he quedado por aquí:

Código PHP:
<script>
    var 
peticionHTTP;
        
    function 
inicializar_XHR()
    {
        if(
window.XMLHttpRequest)
        
peticionHTTP = new XMLHttpRequest();
        
        else 
peticionHTTP = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    function 
realizarPeticion (urlmetodofuncion) {
        
        
//Recibir una funcion de como actuar
        
peticionHTTP.onReadyStateChange funcion;
        
// Realizar la peticion
        
peticionHTTP.open(metodourltrue);
        
peticionHTTP.send(null);
    }
    
</script> 

Ahora es cuando deberia ejecutar la funcion pero no se como...
  #15 (permalink)  
Antiguo 22/07/2015, 14:14
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: javascript para ocultar divs

Dentro de la segunda función debes de llamar a la primera para que crees el objeto XHR.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #16 (permalink)  
Antiguo 22/07/2015, 14:42
Avatar de angel_xx_1990  
Fecha de Ingreso: junio-2013
Ubicación: Guadalajara
Mensajes: 236
Antigüedad: 10 años, 9 meses
Puntos: 0
Exclamación Respuesta: javascript para ocultar divs

Cita:
Iniciado por Alexis88 Ver Mensaje
Dentro de la segunda función debes de llamar a la primera para que crees el objeto XHR.

Saludos
He ampliado lo siguiente, lo que me ocurre es que estoy cogiendo de un ejemplo y no se como seguir...


Código PHP:
<script>
    var 
peticionHTTP;
        
    function 
inicializar_XHR()
    {
        if(
window.XMLHttpRequest)
        
peticionHTTP = new XMLHttpRequest();
        
        else 
peticionHTTP = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    function 
realizarPeticion (urlmetodofuncion) {
        
        
//Recibir una funcion de como actuar
        
peticionHTTP.onReadyStateChange funcion;
        
// Realizar la peticion
        
peticionHTTP.open(metodourltrue);
        
peticionHTTP.send(null);
    }
    
    function 
peticion ()
    {
    
realizarPeticion('ckeckBD.php','GET','funcActuadora');
    }
     
     
     function 
funcActuadora ()
    {
        if(
peticion.HTTP.readyState == 4)
        if(
peticion.HTTP.status == 200)
        
            
hacerAlgo();
        
    }
         
</script> 
Voy bien?
  #17 (permalink)  
Antiguo 22/07/2015, 14:46
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: javascript para ocultar divs

Casi. Te falta ejecutar la función "inicializar_XHR" al comenzar con "realizarPeticion", además, en la función "funcActuadora", la variable peticion.HTTP no existe pues la declaraste sin el punto, aunque en esa función puedes utilizar la palabra reservada this en su lugar ya que la función se ejecuta en el contexto de peticionHTTP. Por cierto, se recomienda que los nombres de los eventos, como onreadystatechange, vayan en minúsculas.

Corrige eso.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #18 (permalink)  
Antiguo 23/07/2015, 11:51
Avatar de angel_xx_1990  
Fecha de Ingreso: junio-2013
Ubicación: Guadalajara
Mensajes: 236
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: javascript para ocultar divs

Cita:
Iniciado por Alexis88 Ver Mensaje
Casi. Te falta ejecutar la función "inicializar_XHR" al comenzar con "realizarPeticion", además, en la función "funcActuadora", la variable peticion.HTTP no existe pues la declaraste sin el punto, aunque en esa función puedes utilizar la palabra reservada this en su lugar ya que la función se ejecuta en el contexto de peticionHTTP. Por cierto, se recomienda que los nombres de los eventos, como onreadystatechange, vayan en minúsculas.

Corrige eso.
Corregido:

Código PHP:
<script>
    var 
peticionHTTP;
        
    function 
inicializar_XHR()
    {
        if(
window.XMLHttpRequest)
        
peticionHTTP = new XMLHttpRequest();
        
        else 
peticionHTTP = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    function 
realizarPeticion (urlmetodofuncion) {
        
        
//Recibir una funcion de como actuar
        
peticionHTTP.onreadystatechange funcion;
        
// Realizar la peticion
        
peticionHTTP.open(metodourltrue);
        
peticionHTTP.send(null);
    }
    
    function 
peticion ()
    {
    
realizarPeticion('ckeckBD.php','GET','funcActuadora');
    }
     
     
     function 
funcActuadora ()
    {
        if(
peticionHTTP.readyState == 4)
        if(
peticionHTTP.status == 200)
        
            
hacerAlgo();
        
    }
         
</script> 
Pero no se como inicializarlo ni como seguir
  #19 (permalink)  
Antiguo 23/07/2015, 12:05
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: javascript para ocultar divs

La función "peticion" ejecuta a "realizarPeticion" que es la que desencadena el resto. Lo que necesitas hacer es ejecutar la función "peticion" de acuerdo a la acción que desees, por ejemplo, al enviar los datos de un formulario, al darle clic a algún botón, etc.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #20 (permalink)  
Antiguo 23/07/2015, 12:46
Avatar de angel_xx_1990  
Fecha de Ingreso: junio-2013
Ubicación: Guadalajara
Mensajes: 236
Antigüedad: 10 años, 9 meses
Puntos: 0
Exclamación Respuesta: javascript para ocultar divs

Cita:
Iniciado por Alexis88 Ver Mensaje
La función "peticion" ejecuta a "realizarPeticion" que es la que desencadena el resto. Lo que necesitas hacer es ejecutar la función "peticion" de acuerdo a la acción que desees, por ejemplo, al enviar los datos de un formulario, al darle clic a algún botón, etc.


Bien, pero como lo hago, es decir yo lo que quiero es que al pulsar el boton envíar, ejecute el php que contiene la consulta a la base de datos, y segun el valor obtenido muestre u oculte la div....


¿pero como lo hago?
  #21 (permalink)  
Antiguo 23/07/2015, 13:29
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: javascript para ocultar divs

Ya. En ese caso y para hacerlo bien sencillo, usa esta forma:

Código HTML:
Ver original
  1. <button onclick = "peticion()">El botón</button>

Cuando le des un clic al botón ejecutará la función "peticion".
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #22 (permalink)  
Antiguo 25/07/2015, 04:28
Avatar de angel_xx_1990  
Fecha de Ingreso: junio-2013
Ubicación: Guadalajara
Mensajes: 236
Antigüedad: 10 años, 9 meses
Puntos: 0
Pregunta Respuesta: javascript para ocultar divs

Cita:
Iniciado por Alexis88 Ver Mensaje
Ya. En ese caso y para hacerlo bien sencillo, usa esta forma:

Código HTML:
Ver original
  1. <button onclick = "peticion()">El botón</button>

Cuando le des un clic al botón ejecutará la función "peticion".


Así estaría bien??


Código PHP:
<input type="submit" name="submit2" id="submit2" value="Enviar" onclick "peticion()"
  #23 (permalink)  
Antiguo 25/07/2015, 09:27
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: javascript para ocultar divs

Si se trata de un formulario, entonces, quedaría mejor en la etiqueta de apertura del formulario:

Código HTML:
Ver original
  1. <form onsubmit = "peticion(event)">

La función se ejecutará cuando se envíen los datos del formulario a procesar. Le envío el objeto del evento como argumento para que puedas cancelarlo en la función y así se logre enviar los datos mediante Ajax.

La función "peticion" quedaría así:

Código Javascript:
Ver original
  1. function peticion(evento){
  2.     event.preventDefault();
  3.     realizarPeticion('ckeckBD.php','GET','funcActuadora');
  4. }

Con el método .preventDefault() cancelo la ejecución del evento para evitar que recargue la ventana y se pueda realizar la petición asíncrona (Ajax).

Prueba y nos dices cómo te fue.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: divs, funcion
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 01:51.