Fenêtre modale : Array Json vers un format html

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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 :

Citation:

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

30/01/2014, 13h15
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:

dataType: 'json',

ensuite dans le succès tu pourras exploiter ton json

Code:

$('#dialog').html(data['0']);
30/01/2014, 14h32
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 ?
30/01/2014, 14h34
SpaceFrog

data['0'] ... data['projet1Desc'] ....
30/01/2014, 15h30
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.... :roll:

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 :)
30/01/2014, 16h09
wpast

Ce point c'est bon ! :D

Code:

$('#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 !
31/01/2014, 08h35
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 ...