Discussion :

[wpast]

Bonjour,

J'aurai besoin de votre aide, je suis bloquée... Je cherche à faire une fenêtre modale comme c-joint.

Le contexte :
J'ai une galerie d'image sur ma page index.php qui représente des projets.
Quand l'utilisateur clique sur l'image d'un projet, une fenêtre modale s'ouvre ( comme ci-joint ) et affiche la description du projet ainsi que plusieurs images lié à ce projet précisément.

Pour cela, j'ai une fonction ajax ( ouvreModale(IdProjet) ) et un fichier test.php qui exécute une requête suivant l'ID du projet passé en paramètre.

la fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function ouvreModale(pId){  
        jQuery.ajax({
                    type: "GET",
                    url: "test.php?ID="+pId,
                    dataType: 'html',
                     contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                    beforeSend: function(xhr) {
                    xhr.overrideMimeType('text/html; charset=UTF-8');
                },
                    success: function(data){
                        $(function(){
                                $('#dialog').dialog({
                                        bgiframe: true,
                                        resizable: true,
                                        width: 800,
                                        title: 'Ma fenêtre'
                                });
                                //Je remplis ma DIV avec les infos
                                $('#dialog').html(data);
 
                                 return false;
                        });
                },
                    error: function (xhr, ajaxOptions, thrownError){
                        jAlert("Erreur de traitement Ajax");
                }
           });
}

Test.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function modale(){
        $lId = $_GET['ID'];
          $lSql = 'SELECT projet.lib_projet, projet.desc_projet, galerie.url_galerie, galerie.urlg_galerie  FROM galerie, projet  WHERE projet.id_projet="'.$lId.'" and galerie.fk_projet = "'.$lId .'" LIMIT 0 , 30' ;
 
        $lRequete = mysql_query($lSql);
        $lFetch = mysql_fetch_array($lRequete);
 
          return json_encode($lFetch);
}

La fenêtre modale actuellement affiche :

{"0":"projet1","lib_projet":"projet1","1":"projet1Desc","desc_projet":"projet1Desc","2":"img\/galerie1.jpg","url_galerie":"img\/galerie1.jpg","3":"img\/galerie1g.jpg","urlg_galerie":"img\/galerie1g.jpg"}

Donc, si mon code vous semble bon déjà ( ?? ) comment puis-je faire pour exploiter le retour du tableau afin de réaliser l'affichage de la fenêtre modale ( image jointe ).

Merci d'avance !

[SpaceFrog]

ce n'est pas un array mais un json, ne pas confondre

pourquoi dont mettr eun dataType html si tu attends un json en retour ???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 dataType: 'json',

ensuite dans le succès tu pourras exploiter ton json

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $('#dialog').html(data['0']);

[wpast]

Ok j'ai fais ces modifs, effectivement ça me retourne bien " Projet1" mais la où je bloque surtout c'est comme exploiter cette chaine :/

Comment faire sortir le libellé et la description par exemple ?

[SpaceFrog]

data['0'] ... data['projet1Desc'] ....

[wpast]

oui évidement mais c'est la syntaxe concaténée que je ne connais pas et que je ne trouve pas sur le net....

Comment faire pour récupérer le libellé et la description du json pour afficher dans la fenêtre modal " <h1> Libellé </h1> <p>description</p>" si simplement

[wpast]

Ce point c'est bon !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

  $('#dialog').html( '<h1>' + data[0] + '</h1> <p>'+ data[1] +'</p>'+ '<img src="'+data[2] +'" />' );

Mais je me demande si ce que je souhaite réaliser est possible.
Cliquer sur une des petite image pour la faire apparaitre dans la zone " grande image " sachant que je suis dans la fenetre modale... (cf jpg joint )
que je ne m'embarque pas vers l'impossible... merci d'avance !

[SpaceFrog]

il te suffit de recupérer le path de la grande l'image. et de l'attribuer en src à une image que tu fais apparaitre ...