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 :

Menu accordéon : mémoriser les sections


Sujet :

jQuery

  1. #1
    Membre éclairé Avatar de Angelik
    Profil pro
    Inscrit en
    Août 2006
    Messages
    253
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 253
    Par défaut Menu accordéon : mémoriser les sections
    Bonjour à tous, je ne sais pas si je poste sur le bon forum... Auquel cas je vous prie de m'excuser.

    Mon problème concerne Jquery ui et le menu accordéon.

    J'ai mis en place une petite messagerie - à l'intérieur même du menu accordéon -. J'aimerais mettre en place un update sur la table msg afin de renseigner qu'un message a été lu/vu --> seulement les messages contenus à l'intérieur d'une section ouverte.

    Mais comment savoir qu'une section a été "ouvert" ?

    Voici mon code pour plus de clarté :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $(function() {
        $( "#accordion" ).accordion();
    });


    Code php : 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
    <div id="accordion">
     
    <?php
     
    $req = $bdd->prepare('SELECT * FROM msg');
    $req->execute;
     
    while ($donnees = $req->fetch())
    {
       echo"<h3>".$donnees['objet']."</h3>";
       echo"<div>".$donnees['contenu']."</div>";
    }
    ?>
     
    </div>
     
    <?php   
    $req->closeCursor();
    ?>
     
    </div>

    Merci d'avance de votre aide !

  2. #2
    Membre éclairé Avatar de Angelik
    Profil pro
    Inscrit en
    Août 2006
    Messages
    253
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 253
    Par défaut
    Je poursuis mon investigation ... ce qui s'apparente le plus à mon problème se trouve à : mémoriser-l-etat-des-sections

    Je balance le code en vrac, ci-suit :

    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
    var index = $.cookie('accordion'); // on récupère le cookie, et on le créé s'il n'existe pas
    var section; // variable qui contiendra l'index de l'élément
     
    if(index != null){
        section = $('#accordion').find('h3:eq(' + index + ')'); // on rentre l'index du titre h3 sélectionné
    }
    else{
        section = 0; // si le cookie n'existait pas, on définit la section à 0 (première section ouverte)
    }
     
    $('#accordion').accordion({
        header : 'h3',
        active : section, // la section active est celle spécifiée par l'élément sélectionné
     
        change : function(event, ui){ // au changement de section, on modifie le cookie
            var index = $(this).find('h3').index(ui.newHeader[0]); // on rentre le nouvel élément sélectionné dans une variable
     
    	$.cookie('accordion', index, {
    	    path : '/'
    	}); // on rentre le nouvel index dans le cookie (le chemin doit être la racine, sauf exceptions, afin d'éviter des bugs de cookie)
        }
    });
    A l'ouverture de mes sections - à proprement parlé - aucun cookies n'est enregistré !

  3. #3
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /*
     * Par défaut, les divisions (panels) reçoivent un ID 
     * du type  ui-accordion-accordion-panel-X
     * 
     * Il suffit de récupérer l'index
     */
    $( "#accordion" ).accordion({
        "activate" : function( event, ui ){
            console.log( "new panel index : " , ui.newPanel[0].id.slice( -1 ), "old panel index : ", ui.oldPanel[0].id.slice( - 1 ) );
        }
    });

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  4. #4
    Membre Expert
    Profil pro
    Inscrit en
    Décembre 2003
    Messages
    1 616
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 616
    Par défaut
    Citation Envoyé par Angelik Voir le message

    A l'ouverture de mes sections - à proprement parlé - aucun cookies n'est enregistré !
    Salut

    Si je ne m'abuse, la gestion des cookies passe par un plug-in jquery que tu dois charger au préalable

    je n'ai pas très bien compris ta problématique concernant ces menus accordéons

  5. #5
    Membre éclairé Avatar de Angelik
    Profil pro
    Inscrit en
    Août 2006
    Messages
    253
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 253
    Par défaut
    Merci de vos réponses ! La solution de danielhagnoul me retourne correctement la section ouverte dans la console du navigateur

    1ère question : Comment récupérer cette valeur en php ?

    Sinon :

    Citation Envoyé par fredoche
    je n'ai pas très bien compris ta problématique concernant ces menus accordéons
    Après réflexion, je ne sais pas du tout comment m'organiser pour obtenir ce que je souhaite ... c'est à dire identifier qu'un message (à l'intérieur d'une section) a bien été lu/vu à l'ouverture de celle-ci (la section).

    Il faudrait pouvoir passer un UPDATE dans ma table msg et indiquer vu = oui SI section ouverte

    Mais comment savoir quels messages sont contenus dans la section[0], section[1], section[2] et ainsi de suite ?

    Voici un screen de ma page afin d'y voir plus clair : Nom : msg_vu.png
Affichages : 340
Taille : 78,5 Ko

    Merci de votre aide

  6. #6
    Membre chevronné
    Avatar de Darkaurora
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2010
    Messages
    382
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2010
    Messages : 382
    Billets dans le blog
    1
    Par défaut
    Je pense qu'a la base tout les messages doivent être marqué comme non lu, lorsque tu charges tes messages l'ensemble des sections seront fermé.

    La condition pour noter un message comme lu est:

    Si le message est non lu et la section ouverte alors mise à jour de l'enregistrement pour signaler le message comme lu.

    Avec la méthode de daniel, tu dois seulement envoyer une information (via AJAX) au serveur sur lequel tu feras ta requête UPDATE

  7. #7
    Membre éclairé Avatar de Angelik
    Profil pro
    Inscrit en
    Août 2006
    Messages
    253
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 253
    Par défaut
    Merci pour les réponses. Je n'ai pas bien saisi le lien entre ajax et php (je débute)... A l'intérieur de la section - ouverte - comment retourner/reconnaître/identifier les messages relatifs ?

    Citation Envoyé par Darkaurora
    Avec la méthode de daniel, tu dois seulement envoyer une information (via AJAX) au serveur sur lequel tu feras ta requête UPDATE
    Comment puis-je récupérer cette valeur en php et l'interpréter ?

    Et comment l'associer aux messages de la section ?

  8. #8
    Membre chevronné
    Avatar de Darkaurora
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2010
    Messages
    382
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2010
    Messages : 382
    Billets dans le blog
    1
    Par défaut
    Si tous tes messages ont un identifiant unique on peut très bien associer cet ID avec chaque élément représentant un message.

    Notamment grâce à $.data()

    Ainsi en liant cette donnée (ou ces données) avec chacune de tes sections. Lorsque tu détecteras l'ouverture d'une section tu n'auras qu'a récupérer les données liées puis les envoyer a un script PHP via AJAX (la doc ici)

  9. #9
    Membre éclairé Avatar de Angelik
    Profil pro
    Inscrit en
    Août 2006
    Messages
    253
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 253
    Par défaut
    Merci Darkaurora, j'ai lu la doc avec attention mais impossible de lier ces éléments (je ne comprends pas la logique)... J'ai passé ma journée dessus et me revoilà et .......

    Par rapport à mon code, tu pourrais me donner un exemple stp ? C'est peut-être un peu trop demander mais je n'y arrive pas.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    $(function() {
        $( "#accordion" ).accordion();
    });
    Code PHP : 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
    <div id="accordion">
    <?php
    $req = $bdd->prepare('SELECT * FROM msg');
    $req->execute;
    while ($donnees = $req->fetch()){
     
    echo"<h3>".$donnees['objet']."</h3>";
    echo"<div>".$donnees['contenu']."</div>";
     
    }
    ?>
    </div>
    <?php   
    $req->closeCursor();
    ?>
    </div>

    Un grand merci d'avance

  10. #10
    Membre chevronné
    Avatar de Darkaurora
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2010
    Messages
    382
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2010
    Messages : 382
    Billets dans le blog
    1
    Par défaut
    Tu charges donc l'ensemble des tes éléments qui forme tes divisions et tes messages en PHP c'est bien ça ?

    Il va falloir modifier un peu ce chargement et prendre en compte les ID de tes messages. Pour cela tu vas ajouter sur tes éléments qui constituent chacune de tes divisions ceci: data-messageID comme attribut d'un élément HTML <div class="MyDivision" data-messageID="ValueOfThisID"> </div>
    Tu modifies ton JS pour savoir quel division a été ouverte:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    $( "#accordion" ).accordion({
        "activate" : function( event, ui ){
            // C'est ici que l'on va faire une requête AJAX
            console.log( "new panel index : " , ui.newPanel[0].id.slice( -1 ), "old panel index : ", ui.oldPanel[0].id.slice( - 1 ) );
        }
    });
    et tu remplace la ligne commenté par:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    $.ajax( {
      type: 'POST',
      url: 'path_of_php_script.php',
      data: ui.newPanel[0].data( ).messageID
    } )
    Attention! Vu que j'ai très peu d'informations sur ton code un copié collé ne fonctionnera pas

    Déjà il faudra absolument tes attributs data-messageID soient sur tes ui.newPanelPour ce qui est du script PHP tu n'auras qu'a récupérer la valeur de l'ID via $_POST (tu peux aussi via $_GET, il suffit de changer la valeur de type) et faire ta requête UPDATE

  11. #11
    Membre éclairé Avatar de Angelik
    Profil pro
    Inscrit en
    Août 2006
    Messages
    253
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 253
    Par défaut
    Merci

    Qu'entends-tu par
    Citation Envoyé par Darkaurora
    Déjà il faudra absolument tes attributs data-messageID soient sur tes ui.newPanel
    Si j'ai bien compris :

    Code php : 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
    <div id="accordion">
    <?php
    $req = $bdd->prepare('SELECT * FROM msg');
    $req->execute;
    while ($donnees = $req->fetch()){
     
    echo"<h3>".$donnees['objet']."</h3>";
    echo"<div class="MyDivision" data-messageID="".$donnees['id']."">".$donnees['contenu']."</div>";
     
    }
    ?>
    </div>
    <?php   
    $req->closeCursor();
    ?>
    </div>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $( "#accordion" ).accordion({
        "activate" : function( event, ui ){
    $.ajax( {
      type: 'POST',
      url: 'path_of_php_script.php',
      data: ui.newPanel[0].data( ).messageID
    } )
            console.log( "new panel index : " , ui.newPanel[0].id.slice( -1 ), "old panel index : ", ui.oldPanel[0].id.slice( - 1 ) );
        }
    });
    Quand tu dis qu'il faut absolument mes attributs data-messageID sur mes ui.newPanel, tu veux dire quoi :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $( "#accordion" ).accordion({
        "activate" : function( event, ui ){
    $.ajax( {
      type: 'POST',
      url: 'path_of_php_script.php',
      data: ui.newPanel[data-messageID].data( ).messageID //Faut que je mette une valeur dans data() ?
    } )
            console.log( "new panel index : " , ui.newPanel[data-messageID].id.slice( -1 ), "old panel index : ", ui.oldPanel[data-messageID].id.slice( - 1 ) );
        }
    });
    Après il me suffit d'appeler ma page path_of_php_script.php et je récupère ma valeur ?

    path_of_php_script.php

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    <?php echo"Résultat == ".$_POST['messageID'].""; ?>

    Vraiment désolé pour ce code mal assemblé!

  12. #12
    Membre chevronné
    Avatar de Darkaurora
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2010
    Messages
    382
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2010
    Messages : 382
    Billets dans le blog
    1
    Par défaut
    Tu as bien compris l'intégration de ta donnée sur ton élément, la ou je disais fait attention, c'est pour l'endroit ou tu vas le mettre. pour qu'il soit au bonne endroit il faut absolument le mettre sur l'élément correspondant a l'objet jQuery que te retourne ui.newPanel

  13. #13
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

    Un exemple montrant la gestion des attributs data-*.

    Pour tester, il suffit de copier-coller.

    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
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0">
        <meta name="author" content="Daniel Hagnoul">
        <title>Forum jQuery</title>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/1.0.3/head.min.js"></script>
        <link rel="stylesheet" href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
        <script>
            "use strict";
     
            var debugBool = true;
     
             /*
              * J'utilise head.js pour charger CSS et JS de manière asynchrone 
              * et parallèle, mais les fichiers sont exécute dans l'ordre.
              * Voir la documentation et l'API : http://headjs.com/
              * Les polices de caractères et le fichier head.js doivent être 
              * inclus manuellement.
              */
            head.load(
                "http://danielhagnoul.developpez.com/styles/dvjhRemBase.css",
                "http://code.jquery.com/ui/1.10.4/themes/sunny/jquery-ui.css",
                "http://code.jquery.com/qunit/qunit-1.13.0.css",
                { "d3" : "http://d3js.org/d3.v3.min.js" },
                { "d3Hello" : "http://danielhagnoul.developpez.com/lib/dvjh/d3Hello.js" },
                { "jquery" : "http://code.jquery.com/jquery-2.1.0.min.js" },
                { "jqueryui" : "http://code.jquery.com/ui/1.10.4/jquery-ui.min.js" },
                { "datefr" : "http://danielhagnoul.developpez.com/lib/dvjh/datefr.js" },
                { "qunit" : "http://code.jquery.com/qunit/qunit-1.13.0.js" },
                { "testsQUnit" : "http://danielhagnoul.developpez.com/lib/dvjh/testsQUnit.js" }
            );      
        </script>
        <style>
            /* Nota bene : ici 1 rem est égal à 10 px, voir dvjhRemBase.css */
     
    /*-- Début code du test --*/
     
    #accordion { display: none; width: 60rem; }
    #accordion p[data-message-id] { height: 1.6rem; overflow: hidden; }
     
    /*-- Fin code du test --*/
     
        </style>
    </head>
    <body>
        <header>
            <h1>Forum jQuery</h1>
            <h2>
                <a href="">Lien</a>
            </h2>
        </header>
        <section class="conteneur">
            <nav>
     
    <!-- Début code du test -->
     
     
    <!-- Fin code du test -->
     
            </nav>
            <article>
     
    <!-- Début code du test -->
     
    <div id="accordion">
        <h3>Section 1</h3>
        <div>
            <p data-message-id="101" data-message-open="non">
                Message 1 de la section 1. Suspendisse potenti. Donec ac justo lacus. Duis aliquet urna nec est egestas, vel laoreet dui ornare. 
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque scelerisque laoreet blandit. 
                Sed laoreet diam non massa iaculis rhoncus.
            </p>
             <p data-message-id="102" data-message-open="non">
                Message 2 de la section 1. Suspendisse potenti. Donec ac justo lacus. Duis aliquet urna nec est egestas, vel laoreet dui ornare. 
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque scelerisque laoreet blandit. 
                Sed laoreet diam non massa iaculis rhoncus.
            </p>
            <p data-message-id="103" data-message-open="non">
                Message 3 de la section 1. Suspendisse potenti. Donec ac justo lacus. Duis aliquet urna nec est egestas, vel laoreet dui ornare. 
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque scelerisque laoreet blandit. 
                Sed laoreet diam non massa iaculis rhoncus.
            </p>
       </div>
        <h3>Section 2</h3>
        <div>
            <p data-message-id="201" data-message-open="non">
                Message 1 de la section 2. Suspendisse potenti. Donec ac justo lacus. Duis aliquet urna nec est egestas, vel laoreet dui ornare. 
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque scelerisque laoreet blandit. 
                Sed laoreet diam non massa iaculis rhoncus.
            </p>
             <p data-message-id="202" data-message-open="non">
                Message 2 de la section 2. Suspendisse potenti. Donec ac justo lacus. Duis aliquet urna nec est egestas, vel laoreet dui ornare. 
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque scelerisque laoreet blandit. 
                Sed laoreet diam non massa iaculis rhoncus.
            </p>
            <p data-message-id="203" data-message-open="non">
                Message 3 de la section 3. Suspendisse potenti. Donec ac justo lacus. Duis aliquet urna nec est egestas, vel laoreet dui ornare. 
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque scelerisque laoreet blandit. 
                Sed laoreet diam non massa iaculis rhoncus.
            </p>
        </div>
        <h3>Section 3</h3>
        <div>
            <p data-message-id="301" data-message-open="non">
                Message 1 de la section 1. Suspendisse potenti. Donec ac justo lacus. Duis aliquet urna nec est egestas, vel laoreet dui ornare. 
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque scelerisque laoreet blandit. 
                Sed laoreet diam non massa iaculis rhoncus.
            </p>
             <p data-message-id="302" data-message-open="non">
                Message 2 de la section 1.Suspendisse potenti. Donec ac justo lacus. Duis aliquet urna nec est egestas, vel laoreet dui ornare. 
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque scelerisque laoreet blandit. 
                Sed laoreet diam non massa iaculis rhoncus.
            </p>
            <p data-message-id="303" data-message-open="non">
                Message 3 de la section 1. Suspendisse potenti. Donec ac justo lacus. Duis aliquet urna nec est egestas, vel laoreet dui ornare. 
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque scelerisque laoreet blandit. 
                Sed laoreet diam non massa iaculis rhoncus.
            </p>
        </div>
    </div>
     
    <!-- Fin code du test -->
     
            </article>
            <article class="qunit">
                <div id="qunit"></div>
                <div id="qunit-fixture"></div>
            </article>
        </section>
        <footer class="h-entry">
            <time class="dt-published" datetime="2014-01-22T10:36:43.443+0100">2014-01-22T10:36:43.443+0100</time>
            <a class="p-author h-card" href="http://www.developpez.net/forums/u285162/danielhagnoul/">Daniel Hagnoul</a>
            <a class="u-url" href="http://danielhagnoul.developpez.com/">Mon cahier d’exercices</a>
            <a class="u-url" href="http://javascript.developpez.com/faq/jquery/">FAQ</a>
            <a class="u-url" href="http://javascript.developpez.com/cours/?page=frameworks#jquery">Tutoriels</a>
        </footer>
        <script>
            "use strict";
     
            /*
             * Chargeur de code head.js, document ready et fichiers chargés.
             */
            head.ready( [ 
                    "d3", "d3Hello", "jquery", "jqueryui", "datefr",
                    "qunit", "testsQUnit"
                ], function(){
     
    /* Début code du test */
     
    $( "#accordion" ).show().accordion({
        "activate" : function( event, ui ){
            console.log( "new panel index : " , ui.newPanel[0].id.slice( -1 ), "old panel index : ", ui.oldPanel[0].id.slice( - 1 ) );
     
            $( "p", ui.oldPanel ).each( function( i, item ){
                console.log( "Le message ", $( item ).data( "messageId" ), " a-t-il été ouvert ? ", $( item ).data( "messageOpen" ) );
            });
        }
    });
     
    $( "p[data-message-id]" ).hover(
        function(){
            $( this ).css( "height", "auto" );
        },
        function(){
            $( this ).css( "height", "1.6rem" );
     
            $( this ).data( "messageOpen", "oui" );
        }
    );
     
    /* Fin code du test */
     
                if ( debugBool ){
                   console.log( ISOformat( new Date() ) );
     
                    $( ".qunit" ).show();
     
                    testQUnitSelector( "App", [ 
                        ".conteneur", "#accordion", "p[data-message-id]"
                    ] );
     
                    testQUnitID( "App", [ 
                        "qunit", "qunit-fixture", "accordion"
                    ] );
                }
     
            });
        </script>
    </body>
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  14. #14
    Membre éclairé Avatar de Angelik
    Profil pro
    Inscrit en
    Août 2006
    Messages
    253
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 253
    Par défaut
    Merci pour toutes ces explications ! C'est vraiment gentil.

    En reprenant l'exemple de danielhagnoul et la démarche de Darkaurora, j'ai à présent :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $( "#accordion" ).show().accordion({
        "activate" : function( event, ui ){
            console.log( "new panel index : " , ui.newPanel[0].id.slice( -1 ), "old panel index : ", ui.oldPanel[0].id.slice( - 1 ) );
            $( "p", ui.oldPanel ).each( function( i, item ){
    			$.ajax( {
      			type: 'POST',
      			url: 'path_of_php_script.php',
      			data: $( item ).data( "messageId" )
    			} )
                console.log( "Le message ", $( item ).data( "messageId" ), " a-t-il été ouvert ? ", $( item ).data( "messageOpen" ) );
            });
        }
    });
    Suis-je dans le vrai du faux ?

    Aussi, pouvez-vous m'expliquer ce code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    $.ajax( {
      type: 'POST',
      url: 'path_of_php_script.php',
      data: $( item ).data( "messageId" )
    } )
    L'appelle de l'url [path_of_php_script.php] se fait-il comme un include ?

    Pour récupérer la valeur de mon data, suffit-il de faire $_POST['data'] --> Quelle valeur dois-je renseigner dans mon $_POST ? data ?

    Merci d'avance

  15. #15
    Membre chevronné
    Avatar de Darkaurora
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mai 2010
    Messages
    382
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Oise (Picardie)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2010
    Messages : 382
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $( "p", ui.oldPanel ).each( function( i, item ){
     
     
    			$.ajax( {
      			type: 'POST',
      			url: 'path_of_php_script.php',
      			data: $( item ).data( "messageId" )
    			} )
     
     
                console.log( "Le message ", $( item ).data( "messageId" ), " a-t-il été ouvert ? ", $( item ).data( "messageOpen" ) );
            });
    Je ne pense pas qu'il soit nécessaire de faire une requête pour chaque division, lorsque tu en actives qu'une seule. De plus fait attention car (sauf erreur de ma part, daniel pourras confirmer je pense), le sélecteur que tu utilises signifie "tout les 'p' et 'ui.oldPanel' hors ce n'est pas ce que tu cherches à faire je pense.

    tu dois juste dire:

    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
     
    $( "#accordion" ).show().accordion({
        "activate" : function( event, ui ){
            console.log( "new panel index : " , ui.newPanel[0].id.slice( -1 ), "old panel index : ", ui.oldPanel[0].id.slice( - 1 ) );
     
     
    	$.ajax( {
      		type: 'POST',
      		url: 'path_of_php_script.php',
      		data: $( ui.newPanel ).data( "messageId" )
    	} )
     
     
            console.log( "Le message ", $( item ).data( "messageId" ), " a-t-il été ouvert ? ", $( item ).data( "messageOpen" ) );
        }
    });
    Pour ce qui est de l'Ajax tu définies le souhait d'envoyer une requête au serveur qui sera du type "POST", pour le script php "path_of_php_script" cette requête aura comme donnée la valeur de $( ui.newPanel ).data( "messageId" )En gros c'est comme si tu faisais un formulaire avec une methode "POST", une action vers "path_of_php_script" et un champs ayant pour valeur: "$( ui.newPanel ).data( "messageId" )", l'avantage c'est que ta page ne se rechargera pas

  16. #16
    Membre éclairé Avatar de Angelik
    Profil pro
    Inscrit en
    Août 2006
    Messages
    253
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 253
    Par défaut
    Bonjour et merci de vos réponses ! Désolée pour le retard ... beaucoup de boulot en ce moment : j'ai dû mettre ce projet en stand-by. Je reviens vers vous très vite! Bonne fin de journée et bon week-end

  17. #17
    Membre éclairé Avatar de Angelik
    Profil pro
    Inscrit en
    Août 2006
    Messages
    253
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 253
    Par défaut
    Me revoilà

    J'ai dû rater une étape parce que rien ne se passe ... J'ai suivi à la lettre vos instructions :

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div id="accordion">
    <?php
    $req = $bdd->prepare('SELECT * FROM msg');
    while ($donnees = $req->fetch()){
    ?>
    <h3>OBJET</h3>
    <div data-messageID="<?php echo"".$donnees['id'].""; ?>">
    <p><?php echo"".$donnees['message'].""; ?></p>
    </div>
    <?php
    }
    ?>
    </div>

    Mon script javascript :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $( "#accordion" ).show().accordion({
        "activate" : function( event, ui ){
            console.log( "new panel index : " , ui.newPanel[0].id.slice( -1 ), "old panel index : ", ui.oldPanel[0].id.slice( - 1 ) );
    	$.ajax( {
      		type: 'POST',
      		url: 'traitement.php',
      		data: $( ui.newPanel ).data( "messageID" )
    	} )
        }
    });

    Et enfin mon script php "traitement.php" dans le même répertoire

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    try{
    	$bdd = new PDO('mysql:host=localhost;dbname=***', '***', '****');
    }
    catch(Exception $e){
            die('Erreur : '.$e->getMessage());
    }
    $req = $bdd->prepare('UPDATE msg SET vue = \'1\' WHERE id = :id');
    $req->execute(array(
    	'id' => $_POST['data'],
    ));

    Citation Envoyé par Darkaurora
    En gros c'est comme si tu faisais un formulaire avec une methode "POST", une action vers "path_of_php_script" et un champs ayant pour valeur: "$( ui.newPanel ).data( "messageId" )", l'avantage c'est que ta page ne se rechargera pas
    Sur le principe, j'ai bien compris mais là, j'ai un encéphalogramme plat ________________________________________^__________________________

    Qu'est-ce que je n'ai pas bien fait ??

    Merci d'avance

  18. #18
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    1. Lire et relire Important : Les règles incontournables d'utilisation de ce forum ! Le code PHP de la page sur laquelle agit jQuery ne nous intéresse pas ! C'est le code HTML généré qui est utile.

    2. data: $( ui.newPanel ).data( "messageID" )... vérifie le format attendu par data et essaye de comprendre pourquoi ce que tu lui passes n'est à priori pas correct.

    3. echo"".$donnees['id']."";...
    Y a-t-il une utilité quelconque à vouloir concaténer des chaines vides ?
    Quand tu manipules un nombre, tu lui additionnes 0 avant de l'utiliser ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  19. #19
    Membre éclairé Avatar de Angelik
    Profil pro
    Inscrit en
    Août 2006
    Messages
    253
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 253
    Par défaut
    Bien le bonjour,

    Citation Envoyé par Bovino
    Le code PHP de la page sur laquelle agit jQuery ne nous intéresse pas ! C'est le code HTML généré qui est utile.
    Désolé. J'ai relu la charte et serai vigilante quant à la formulation et aux détails des difficultés que je rencontre.

    Citation Envoyé par Bovino
    Y a-t-il une utilité quelconque à vouloir concaténer des chaines vides ?
    J'essaye de comprendre pourquoi je ne génère aucune valeur. Aussi, j'ai modifié mon code ci-suit :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
     
    <div id="accordion">
     
    <h3>OBJET</h3>
     
    <div id="test" data-messageID="151515">
     
    <p>bla bla bla</p>
     
    </div>
     
    </div>

    Code javascript : 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
     
    <script>
     
    $("#accordion").show().accordion({
        "activate" : function(event, ui){
            console.log("new panel index : " , ui.newPanel[0].id.slice(-1), "old panel index : ", ui.oldPanel[0].id.slice(- 1));
     
    	$.ajax( {
      		type: 'POST',
      		url: 'traitement.php',
      		data: $(ui.newPanel).data('messageID')
    	} )
     
    	// Lecture d'une valeur
    	 var valeur = $("#test").data("messageID")
    	alert("La valeur : "+valeur);
     
    	//alert($("#test").attr("#data-messageID"));
     
        }
    });
     
    </script>

    Ainsi, à chaque ouverture d'un niveau (dans le menu accordéon), je devrais avoir un message "La valeur : 151515"

    Or j'ai "La valeur : undefined"

    Citation Envoyé par Bovino
    Vérifie le format attendu par data et essaye de comprendre pourquoi ce que tu lui passes n'est à priori pas correct.
    $("#test").attr("#data-messageID") ?

    Merci

  20. #20
    Membre éclairé Avatar de Angelik
    Profil pro
    Inscrit en
    Août 2006
    Messages
    253
    Détails du profil
    Informations personnelles :
    Âge : 42
    Localisation : France

    Informations forums :
    Inscription : Août 2006
    Messages : 253
    Par défaut
    Bien le bonjour,

    Je viens d'apporter une modification au code et dans cet exemple (ci-dessous), je récupère bien la valeur de mon message :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div id="accordion">
    <h3 rel="valeur_de_mon_id">OBJET</h3>
    <div>
    <p>bla bla bla</p>
    </div>

    Mon code javascript :

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    $("#accordion").show().accordion({
        "activate" : function(event, ui){
            console.log("new panel index : " , ui.newPanel[0].id.slice(-1), "old panel index : ", ui.oldPanel[0].id.slice(- 1));
    	$.ajax({
           url : 'traitement.php',
           type : 'POST',
           data : 'trace='+ui.newHeader.attr("rel"),
           dataType : 'html',
        });
    	// Lecture de la valeur
    	alert(ui.newHeader.attr("rel"));
        }
    });

    Le problème à présent se pose avec la fonction $.ajax() ci-dessus. L'envoi des éléments ne s'effectue pas...

    Je me permets de poser mon script php malgré tout (traitement.php), ci-dessous :

    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    try{
    	$bdd = new PDO('mysql:host=localhost;dbname=***', '***', '****');
    }
    catch(Exception $e){
            die('Erreur : '.$e->getMessage());
    }
    $req = $bdd->prepare('UPDATE msg SET vu = \'1\' WHERE id = :id');
    $req->execute(array(
    	'id' => $_POST['trace'],
    ));

    Rien ne se passe malheureusement (...). Mon script php marche pourtant. Quand je le lance indépendamment, j'ai bien une modification des données sur ma table 'msg'

    Je suis bloquée ...

Discussions similaires

  1. Menu accordéon: après dépliement d'une tuile, replier les autres
    Par toto81 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 08/12/2014, 00h48
  2. menu accordéon qui pousse les boutons
    Par joviper dans le forum Flash
    Réponses: 0
    Dernier message: 09/04/2009, 22h10
  3. renvoyer toutes les section d'un fichier .ini
    Par user_steph dans le forum VB 6 et antérieur
    Réponses: 8
    Dernier message: 26/07/2005, 16h06
  4. fichier ini -> recuperer toute les sections
    Par abignon dans le forum MFC
    Réponses: 2
    Dernier message: 08/04/2004, 18h46

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