Bonjour à tous!

J'aimerais comme le titre l'indique, afficher un message en utilisant la fonction .Dialog() de JQuery.

J'utilise une boucle PHP qui me génère une liste de paragraphes <p> ayant pour classe "obj_descr".
Cependant, chaque paragraphe <p> est un enfant de l'image <img> de classe "obj" qui le précède .

Le but final est d'afficher une fenêtre utilisant Dialog() à la place de la fonction alert(); de javascript lorsque l'on clique sur l'image concernée.

Seulement voilà, lorsque je clique sur une image, il ne se passe rien, et la console ne m'indique rien non plus... En tant que débutant en JQuery, je suis un peu perdu.

Voici mon code:

La boucle php qui génère chaque élément:

<div class="inventaire">
			<?php 

			while($result = $req->fetch()) {?>
					<img src="./css/images/icon/<?=$result['categorie']?>/<?=$result['rare']?>" alt="<?=$result['objet']?>" title="<?=$result['objet']?>" class="obj">
					<p class="descr_obj">
						Nom : <?=$result['objet']?><br><br>
						Rareté : <?=str_replace(".png", "", $result['rare'])?><br><br>
						Description :<br>
						<?=$result['description']?>
					</p>

			<?php }?>
			</div>

Voici le code JQuery qui génère la fenêtre de dialogue:

$(function () {
       $(".descr_obj").dialog({
			modal: true,
            autoOpen: false,
            title: "jQuery Dialog",
		})
    });

	$(".obj").click(function() {
		$(this).next(".descr_obj").dialog('open');
    });

A savoir que lorsque j'utilise la fonction .alert(); comme ce qui suit, le code fonctionne mais la popup est évidement moche...

var text;
	$(".obj").click(function() {
		text = $(this).next(".descr_obj").dialog();
		alert(text);
    });

Merci d'avance pour votre aide!

Essaye d'inclure ton paragraphe dans une div

 <div id="descr_obj" title="Titre">
   <p>
      Nom : <?=$result['objet']?>
      Rareté : <?=str_replace(".png", "", $result['rare'])?>
      Description : <?=$result['description']?>
   </p>
</div>

$(".obj").click(function() {
        $("#descr_obj").dialog('open');
});

Cela ne sert à rien de rajouter une <div> en plus étant donné que <p> sert déjà de "conteneur".

De plus, <p> se trouve dans une boucle, mettre un id à la place d'une classe est incorrecte (pour rappel, un id doit être unique dans une page tandis qu'une classe peut être répété autant de fois que l'on veut dans une même page).

Merci quand-même de ta réponse!

Non l’élément p n'est pas un conteneur dans le sens html.

Oui tu as raison, c'est juste une habitude de mettre un id quand il s'agit de javascript.

Remplace dans mon exemple, id par class

-
Edité par DevMercenaire 17 juillet 2018 à 11:08:20

J'ai essayé de mettre une <div> comme tu me l'as proposé. Cependant le résultat reste hélas le même.

J'ai donc opté  pour mettre des paramètres "data" pour chacune de mes images et sortir la balise <p> de ma boucle.

Celle-ci affiche les paramètres data de l'image dans une fenêtre Dialog() lorsque l'on clique sur l'image concernée.

Voici donc finalement mon petit bidouillage. Je doute que cette solution soit optimale mais c'est déjà ça.

PHP :

<?php 

			while($result = $req->fetch()) {?>
					<img src="./css/images/icon/<?=$result['categorie']?>/<?=$result['rare']?>" alt="<?=$result['objet']?>" title="<?=$result['objet']?>" class="obj" data-name="<?=$result['objet']?>" data-rarity="<?=str_replace(".png", "", $result['rare'])?>"  data-desc="<?=$result['description']?>">
			<?php }?>
				<p class="descr_obj">
						Nom : <span class="name"><?=$result['objet']?></span><br><br>
						Rareté : <span class="rarity"><?=str_replace(".png", "", $result['rare'])?></span><br><br>
						Description :<br>
						<span class="desc"><?=$result['description']?></span>
				</p> 

JQuery/Javascript :

$(function() {
    let dialog = $(".descr_obj").dialog({
        autoOpen: false
    });

    $(".obj").click(function() {
        for(let prop of Object.keys(this.dataset)) {
            dialog.find(`span.${prop}`).html(this.dataset[prop]);
        }
        dialog.dialog("open")
    	});
	});

Merci pour tes réponses et pour t'être intéressé à mon problème!

J'ai copié ton code pour voir pourquoi ça ne fonctionnait pas

Le problème provient de cette ligne

$(this).next(".descr_obj").dialog('open');

L’élément p ne se trouve pas à la suite de l’élément img mais dans une autre div que la fonction dialog crée et les index les un à la suite des autres.

Donc pour pourvoir retrouver cette élément dans le DOM, j'ai pensé à cette solution

J'ai mis while pour pouvoir simulé le fetch. Comme tu peux le voir j'ai attribué le même data-id. Tu peux utiliser le même champs de la db.

  <?php $id = 0 ?>
            <?php while ($id < 5) { ?>
                <img src="chili-pepper.ico" alt="" title="" class="obj" data-id="<?php echo $id; ?>">
                <p class="descr_obj" data-id="<?php echo $id; ?>">
                    Nom : TestN
                    Rarete : TestR
                    Description : TestP
                </p>
                <?php
                $id++;
  } ?>

Et dans le fonction, il ne reste plus cas trouver l’élément.

$(".obj").click(function () {
        let id = $(this).data('id');        
        $(".descr_obj[data-id='"+id+"']").dialog('open');

});

-
Edité par DevMercenaire 18 juillet 2018 à 10:33:12