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

[bienpiyao]

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!

[sustentio]

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.

[bienpiyao]

Iniciado por sustentio

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!!

[jsstoni]

los id deben ser unicos a cambio puedes utilizar clases que puedan aplicar a todos.

[bienpiyao]

Iniciado por jsstoni

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?

[jsstoni]

Iniciado por bienpiyao

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:

<div class="abrir">1</div>
<div class="abrir">2</div>
<div class="abrir">3</div>
<div class="abrir">4</div>
 

Código Javascript:

var dialog = document.querySelector('dialog');
var abrirDom = document.querySelectorAll('.abrir');
for (var i = 0; i < abrirDom.length; i++) {
    abrirDom[i].addEventListener('click', function() {
        dialog.showModal();
    });
}
 

[bienpiyao]

Iniciado por jsstoni

Los id de tu html deben ser unicos sin repetir.

Las clases si pueden ser repetidas.

Código HTML:

<div class="abrir">1</div>
<div class="abrir">2</div>
<div class="abrir">3</div>
<div class="abrir">4</div>
 

Código Javascript:

var dialog = document.querySelector('dialog');
var abrirDom = document.querySelectorAll('.abrir');
for (var i = 0; i < abrirDom.length; i++) {
    abrirDom[i].addEventListener('click', function() {
        dialog.showModal();
    });
}
 

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!!

[xfxstudios]

Código PHP:

<?php while($row1 = $query->fetch_array()){ $con=1; ?>
 
<div class="show" id="<?php echo $con; ?>"> 
      <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="<?php echo $con; ?>"> 
     <span id="<?php echo $con; ?>" class="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>
 
<?php $con++; } ?>
 

Código Javascript:

$(".show").click(function(){
    var id = $(this).attr('id');
    $("#"+id).showModal();
})
$(".close").click(function(){
    var id = $(this).attr('id');
    $("#"+id).close();
})
 

prueba asi a ver

[bienpiyao]

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!

[xfxstudios]

carga la libreria de los modales antes de colocar tu codigo

[bienpiyao]

Iniciado por xfxstudios

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).

[ArturoGallegos]

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.

[bienpiyao]

Iniciado por ArturoGallegos

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.

[xfxstudios]

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:

function popup(v)//PRIMER CLICK--------------------------
        {
                        var d = "d" + v;
            var c = "#close" + v;
            var di = "#show" + v;
            
            var dialog = document.getElementById(d);
            var clos = document.getElementById(c);
 
//SEGUNDO CLICK-------------------------------------------------------------
          document.querySelector(di).onclick = function() {
              dialog.showModal();
          };
 
          document.querySelector(c).onclick = function() {
              dialog.close();
          };
//SEGUNDO CLICK HASTA AQUI-----------------------------------------------
            }
 

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:

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);
 
          dialog.showModal();//PRIMER CLICK ABRO EL MODAL
 
//SEGUNDO CLICK CIERRO EL MODAL
          document.querySelector(c).onclick = function() {
              dialog.close();
          };
            }
 

[bienpiyao]

Iniciado por xfxstudios

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:

function popup(v)//PRIMER CLICK--------------------------
        {
                        var d = "d" + v;
            var c = "#close" + v;
            var di = "#show" + v;
            
            var dialog = document.getElementById(d);
            var clos = document.getElementById(c);
 
//SEGUNDO CLICK-------------------------------------------------------------
          document.querySelector(di).onclick = function() {
              dialog.showModal();
          };
 
          document.querySelector(c).onclick = function() {
              dialog.close();
          };
//SEGUNDO CLICK HASTA AQUI-----------------------------------------------
            }
 

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:

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);
 
          dialog.showModal();//PRIMER CLICK ABRO EL MODAL
 
//SEGUNDO CLICK CIERRO EL MODAL
          document.querySelector(c).onclick = function() {
              dialog.close();
          };
            }
 

Muchísimas gracias, funciona perfectamente.

Tema solucionado, lo dicho, gracias nuevamente.

Un saludo!!