IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Fenêtre modale : Array Json vers un format html


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre habitué
    Inscrit en
    Octobre 2013
    Messages
    11
    Détails du profil
    Informations forums :
    Inscription : Octobre 2013
    Messages : 11
    Par défaut Fenêtre modale : Array Json vers un format html
    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 !
    Images attachées Images attachées  

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    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 ???


    ensuite dans le succès tu pourras exploiter ton json

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     $('#dialog').html(data['0']);
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre habitué
    Inscrit en
    Octobre 2013
    Messages
    11
    Détails du profil
    Informations forums :
    Inscription : Octobre 2013
    Messages : 11
    Par défaut
    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 ?

  4. #4
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    data['0'] ... data['projet1Desc'] ....
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre habitué
    Inscrit en
    Octobre 2013
    Messages
    11
    Détails du profil
    Informations forums :
    Inscription : Octobre 2013
    Messages : 11
    Par défaut
    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

  6. #6
    Membre habitué
    Inscrit en
    Octobre 2013
    Messages
    11
    Détails du profil
    Informations forums :
    Inscription : Octobre 2013
    Messages : 11
    Par défaut
    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 !

Discussions similaires

  1. [PHP 5.3] Parser Json vers MySQL arrays & objects
    Par jack77b dans le forum Langage
    Réponses: 3
    Dernier message: 16/07/2012, 15h08
  2. Réponses: 3
    Dernier message: 11/04/2011, 15h17
  3. Array Php vers Json
    Par okoweb dans le forum Langage
    Réponses: 2
    Dernier message: 18/01/2011, 13h18
  4. Réponses: 2
    Dernier message: 05/10/2007, 15h03
  5. Réponses: 1
    Dernier message: 30/05/2006, 22h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo