Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Dialog funciona solo para un elemento y no para el resto

Estas en el tema de Dialog funciona solo para un elemento y no para el resto en el foro de Jquery en Foros del Web. Muy buenas, Tengo el siguiente problema con un código bastante simple (creo). En un .php tengo 10 imágenes con el nombre justo debajo. Si pincho ...
  #1 (permalink)  
Antiguo 21/12/2017, 07:44
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 7 meses
Puntos: 3
Dialog funciona solo para un elemento y no para el resto

Muy buenas,

Tengo el siguiente problema con un código bastante simple (creo).

En un .php tengo 10 imágenes con el nombre justo debajo. Si pincho en la imágenes, se abre un dialog con mas información como el teléfono y la dirección.

El código funciona perfectamente solo para la primera imagen. Es decir, si pincho en la primera imagen (o en el nombre), me salta el dialog con la info, pero si pincho en cualquier otra, no pasa nada.

Os dejo el código a ver si alguien me puede ayudar:

Javascript:

Código:
var dialog = document.querySelector('dialog');

  document.querySelector('#show').onclick = function() {
      dialog.showModal();
  };

  document.querySelector('#close').onclick = function() {
      dialog.close();
  };
Parte relevante donde ocurre la "magia":

Código PHP:
//Show the image with some data for it    

<div id="show">
      <img src="images/<?php echo $row1["name"]; ?>.png" alt="<?php echo $row1["name"]; ?>" title="<?php echo $row1["name"]; ?>" width="50" height="50"><br>
     <div>
      <span class="nameBox">
        <?php echo $row1["name"]; ?></span>
     </div>
    </div>

//The dialog which will appear after clicking on the image

    <dialog class="myDialog" id="1">
     <span id="close">x</span>
      <h3 class="headerDialog"><?php echo $row1["name"]; ?></h3>
        <p style="background: black; color: white">phone: <?php echo $row["phone"]; ?><br>
      address: <?php echo $row["address"]; ?></p>
    </dialog>
Como digo, funciona bien pero solo para una imagen...cómo puedo hacer para que funcione para todas?

Gracias por anticipado,
Un saludo!
  #2 (permalink)  
Antiguo 21/12/2017, 08:50
 
Fecha de Ingreso: octubre-2009
Mensajes: 305
Antigüedad: 14 años, 5 meses
Puntos: 29
Respuesta: Dialog funciona solo para un elemento y no para el resto

sucede que estas colocando directamente la data de la primera imagen en el dialog con php y solo veo que se llaman "show", cuando deberias de tener ID diferentes como show1, show2, etc.
  #3 (permalink)  
Antiguo 21/12/2017, 09:20
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 7 meses
Puntos: 3
Respuesta: Dialog funciona solo para un elemento y no para el resto

Cita:
Iniciado por sustentio Ver Mensaje
sucede que estas colocando directamente la data de la primera imagen en el dialog con php y solo veo que se llaman "show", cuando deberias de tener ID diferentes como show1, show2, etc.
Buenas, gracias por contestar.

Si pongo show1, show2, etc...no muestra el dialog, ni siquiera para la primera imagen :S...tengo que modificar también la función javascript?

Perdona, pero soy novatísimo en js :(.

Un saludo y gracias!!
  #4 (permalink)  
Antiguo 21/12/2017, 09:20
Avatar de jsstoni  
Fecha de Ingreso: enero-2015
Ubicación: Maracaibo
Mensajes: 82
Antigüedad: 9 años, 2 meses
Puntos: 4
Respuesta: Dialog funciona solo para un elemento y no para el resto

los id deben ser unicos a cambio puedes utilizar clases que puedan aplicar a todos.
__________________
Desarrollo web Front End Realtime NodeJs
  #5 (permalink)  
Antiguo 21/12/2017, 09:25
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 7 meses
Puntos: 3
Respuesta: Dialog funciona solo para un elemento y no para el resto

Cita:
Iniciado por jsstoni Ver Mensaje
los id deben ser unicos a cambio puedes utilizar clases que puedan aplicar a todos.
Hola, gracias por contestar.

Los id del div? del dialog? los del javascript?
  #6 (permalink)  
Antiguo 21/12/2017, 09:35
Avatar de jsstoni  
Fecha de Ingreso: enero-2015
Ubicación: Maracaibo
Mensajes: 82
Antigüedad: 9 años, 2 meses
Puntos: 4
Respuesta: Dialog funciona solo para un elemento y no para el resto

Cita:
Iniciado por bienpiyao Ver Mensaje
Hola, gracias por contestar.

Los id del div? del dialog? los del javascript?
Los id de tu html deben ser unicos sin repetir.

Las clases si pueden ser repetidas.

Código HTML:
Ver original
  1. <div class="abrir">1</div>
  2. <div class="abrir">2</div>
  3. <div class="abrir">3</div>
  4. <div class="abrir">4</div>

Código Javascript:
Ver original
  1. var dialog = document.querySelector('dialog');
  2. var abrirDom = document.querySelectorAll('.abrir');
  3. for (var i = 0; i < abrirDom.length; i++) {
  4.     abrirDom[i].addEventListener('click', function() {
  5.         dialog.showModal();
  6.     });
  7. }
__________________
Desarrollo web Front End Realtime NodeJs
  #7 (permalink)  
Antiguo 22/12/2017, 09:25
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 7 meses
Puntos: 3
Respuesta: Dialog funciona solo para un elemento y no para el resto

Cita:
Iniciado por jsstoni Ver Mensaje
Los id de tu html deben ser unicos sin repetir.

Las clases si pueden ser repetidas.

Código HTML:
Ver original
  1. <div class="abrir">1</div>
  2. <div class="abrir">2</div>
  3. <div class="abrir">3</div>
  4. <div class="abrir">4</div>

Código Javascript:
Ver original
  1. var dialog = document.querySelector('dialog');
  2. var abrirDom = document.querySelectorAll('.abrir');
  3. for (var i = 0; i < abrirDom.length; i++) {
  4.     abrirDom[i].addEventListener('click', function() {
  5.         dialog.showModal();
  6.     });
  7. }
Buenas de nuevo.

Gracias por tu código pero no funciona como deseo. Es decir, abre el dialog, pero siempre muestra la mismo info. Es decir, ahora sí que abre el dialog con cada foto que pincho, pero siempre muestra la mismo info, la de la primera foto.

He perdido la funcionalidad de la X. Ahora, cuando la pincho, el dialog no se cierra (no hace nada).

Gracias!!
  #8 (permalink)  
Antiguo 22/12/2017, 10:08
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 8 años, 9 meses
Puntos: 263
Respuesta: Dialog funciona solo para un elemento y no para el resto

Código PHP:
Ver original
  1. <?php while($row1 = $query->fetch_array()){ $con=1; ?>
  2.  
  3. <div class="show" id="<?php echo $con; ?>">
  4.       <img src="images/<?php echo $row1["name"]; ?>.png" alt="<?php echo $row1["name"]; ?>" title="<?php echo $row1["name"]; ?>" width="50" height="50"><br>
  5.      <div>
  6.       <span class="nameBox">
  7.         <?php echo $row1["name"]; ?></span>
  8.      </div>
  9.     </div>
  10.  
  11. //The dialog which will appear after clicking on the image
  12.  
  13.     <dialog class="myDialog" id="<?php echo $con; ?>">
  14.      <span id="<?php echo $con; ?>" class="close">x</span>
  15.       <h3 class="headerDialog"><?php echo $row1["name"]; ?></h3>
  16.         <p style="background: black; color: white">phone: <?php echo $row["phone"]; ?><br>
  17.       address: <?php echo $row["address"]; ?></p>
  18.     </dialog>
  19.  
  20. <?php $con++; } ?>

Código Javascript:
Ver original
  1. $(".show").click(function(){
  2.     var id = $(this).attr('id');
  3.     $("#"+id).showModal();
  4. })
  5. $(".close").click(function(){
  6.     var id = $(this).attr('id');
  7.     $("#"+id).close();
  8. })

prueba asi a ver
__________________
[email protected]
HITCEL
  #9 (permalink)  
Antiguo 22/12/2017, 10:55
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 7 meses
Puntos: 3
Respuesta: Dialog funciona solo para un elemento y no para el resto

Me saltan los siguiente errores:

data.php:349 Uncaught TypeError: $(...).showModal is not a function
at HTMLDivElement.<anonymous> (data.php:349)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.r.handle (jquery.min.js:3)

Alguna idea de por qué me lo tira? Siento las molestias, como yo habrás comprobado, soy muuuy novato con JS...

Gracias por tu tiempo!
  #10 (permalink)  
Antiguo 22/12/2017, 11:28
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 8 años, 9 meses
Puntos: 263
Respuesta: Dialog funciona solo para un elemento y no para el resto

carga la libreria de los modales antes de colocar tu codigo
__________________
[email protected]
HITCEL
  #11 (permalink)  
Antiguo 22/12/2017, 12:28
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 7 meses
Puntos: 3
Respuesta: Dialog funciona solo para un elemento y no para el resto

Cita:
Iniciado por xfxstudios Ver Mensaje
carga la libreria de los modales antes de colocar tu codigo
Librería de modales?

No tengo ninguna librería. La único que necesito es jQuery y esa la estoy importando bien, ya que el código original que pongo, funciona bien (quitando el tema de que solo funciona para una imagen jejej).
  #12 (permalink)  
Antiguo 23/12/2017, 14:47
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 1 mes
Puntos: 1146
Respuesta: Dialog funciona solo para un elemento y no para el resto

En lugar de abrir un nuevo tema
http://www.forosdelweb.com/f179/func...imero-1160479/

atiende y muestra avances en este mismo hilo.

quizás una forma en que todos te puedan ayudar es crear una demo en http://jsfiddle.net/
así muestras una demo funcional de como lo tienes y vemos que esta ocurriendo.
  #13 (permalink)  
Antiguo 25/12/2017, 04:53
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 7 meses
Puntos: 3
Respuesta: Dialog funciona solo para un elemento y no para el resto

Cita:
Iniciado por ArturoGallegos Ver Mensaje
En lugar de abrir un nuevo tema
http://www.forosdelweb.com/f179/func...imero-1160479/

atiende y muestra avances en este mismo hilo.

quizás una forma en que todos te puedan ayudar es crear una demo en http://jsfiddle.net/
así muestras una demo funcional de como lo tienes y vemos que esta ocurriendo.
Ya que has borrado el post, podías haber copiado el contenido aquí. Podías haber pensado que me llevó un tiempo hacerlo y solo por eso...

En fin...

Decidí abrir otro hilo porque la pregunta no es la misma. Ya que ahora el dialog sí que se abre para todos los elementos, por tanto esta pregunta estaría solucionada, pero como el señor moderador ha decidido cerrarme el otro hilo pese a ser dos cuestiones diferentes, pues mezclemos...

He solucionado el problema que dice el hilo, ya que ahora el dialog se abre para todos los elementos. El problema que tengo ahora es que solo se abren al segundo click. Es decir, pincho una vez en una foto y no pasa nada. Pincho una segunda vez en la misma foto y se abre el dialog. Las siguientes veces se abre siempre. Si ahora pincho en otra foto, pero es la primera vez que pincho en ella, el dialog no se abre. Al segundo y sucesivos, siempre se abre.

Os dejo el código (otra vez):

Javascript/jQuery:

Código:
function popup(v)
        {
                        var d = "d" + v;
			var c = "#close" + v;
			var di = "#show" + v;
            
			var dialog = document.getElementById(d);
			var clos = document.getElementById(c);

		  document.querySelector(di).onclick = function() {
			  dialog.showModal();
		  };

		  document.querySelector(c).onclick = function() {
			  dialog.close();
		  };
            }
El php:

Código PHP:
<div id="show1" onclick="popup(1)">
<img src="imagenes/jugadores/<?php echo $row1["nombre"]; ?>.png" alt="<?php echo $row1["nombre"]; ?>" title="<?php echo $row1["nombre"]; ?>" width="50" height="50"><br>
                    <div>
                    <span class="cajaNombre">
                    <?php echo $row1["nombre"]; ?></span>
                    <br>
                    <span class="cajaMail">
                    <?php echo $ro["mail"]; ?></span>
                    </div>
                    </div>
                    <dialog id="d1" class="myDialog">
                        <span id="close1" class="closeX">x</span>
                        <h3 class="headerDialog"><?php echo $row1["nombre"]; ?></h3>
                        <p style="background: black; color: white">Móvil: <?php echo $row["movil"]; ?><br>
                        Dirección: <?php echo $row["dirreccion"]; ?><br>
                        </p>
                        <br>
                    </dialog>
Alguna idea para que el Javascript salte al primer click y no solo a partir del siguiente?

Muchas gracias por anticipado.
  #14 (permalink)  
Antiguo 25/12/2017, 16:00
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 8 años, 9 meses
Puntos: 263
Respuesta: Dialog funciona solo para un elemento y no para el resto

es porque con el onclick inicial llamas a la funcion la que no hace nada, solo activar los observadores, es en el segudo click que se ejecuta la funcion de abrir el modal

Código Javascript:
Ver original
  1. function popup(v)//PRIMER CLICK--------------------------
  2.         {
  3.                         var d = "d" + v;
  4.             var c = "#close" + v;
  5.             var di = "#show" + v;
  6.            
  7.             var dialog = document.getElementById(d);
  8.             var clos = document.getElementById(c);
  9.  
  10. //SEGUNDO CLICK-------------------------------------------------------------
  11.           document.querySelector(di).onclick = function() {
  12.               dialog.showModal();
  13.           };
  14.  
  15.           document.querySelector(c).onclick = function() {
  16.               dialog.close();
  17.           };
  18. //SEGUNDO CLICK HASTA AQUI-----------------------------------------------
  19.             }

prueba eliminando el primer observador y ejecutando de una vez la apertura de tu modal al hacer click, de esa manera el espera en el segundo click es el cierre del modal:

Código Javascript:
Ver original
  1. function popup(v)
  2.         {
  3.                         var d = "d" + v;
  4.             var c = "#close" + v;
  5.             var di = "#show" + v;
  6.            
  7.             var dialog = document.getElementById(d);
  8.             var clos = document.getElementById(c);
  9.  
  10.           dialog.showModal();//PRIMER CLICK ABRO EL MODAL
  11.  
  12. //SEGUNDO CLICK CIERRO EL MODAL
  13.           document.querySelector(c).onclick = function() {
  14.               dialog.close();
  15.           };
  16.             }
__________________
[email protected]
HITCEL
  #15 (permalink)  
Antiguo 26/12/2017, 09:15
 
Fecha de Ingreso: agosto-2009
Mensajes: 216
Antigüedad: 14 años, 7 meses
Puntos: 3
Respuesta: Dialog funciona solo para un elemento y no para el resto

Cita:
Iniciado por xfxstudios Ver Mensaje
es porque con el onclick inicial llamas a la funcion la que no hace nada, solo activar los observadores, es en el segudo click que se ejecuta la funcion de abrir el modal

Código Javascript:
Ver original
  1. function popup(v)//PRIMER CLICK--------------------------
  2.         {
  3.                         var d = "d" + v;
  4.             var c = "#close" + v;
  5.             var di = "#show" + v;
  6.            
  7.             var dialog = document.getElementById(d);
  8.             var clos = document.getElementById(c);
  9.  
  10. //SEGUNDO CLICK-------------------------------------------------------------
  11.           document.querySelector(di).onclick = function() {
  12.               dialog.showModal();
  13.           };
  14.  
  15.           document.querySelector(c).onclick = function() {
  16.               dialog.close();
  17.           };
  18. //SEGUNDO CLICK HASTA AQUI-----------------------------------------------
  19.             }

prueba eliminando el primer observador y ejecutando de una vez la apertura de tu modal al hacer click, de esa manera el espera en el segundo click es el cierre del modal:

Código Javascript:
Ver original
  1. function popup(v)
  2.         {
  3.                         var d = "d" + v;
  4.             var c = "#close" + v;
  5.             var di = "#show" + v;
  6.            
  7.             var dialog = document.getElementById(d);
  8.             var clos = document.getElementById(c);
  9.  
  10.           dialog.showModal();//PRIMER CLICK ABRO EL MODAL
  11.  
  12. //SEGUNDO CLICK CIERRO EL MODAL
  13.           document.querySelector(c).onclick = function() {
  14.               dialog.close();
  15.           };
  16.             }


Muchísimas gracias, funciona perfectamente.

Tema solucionado, lo dicho, gracias nuevamente.

Un saludo!!

Etiquetas: dialog, javascript, modal
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 04:19.