Discussion :

[Angelik]

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 !

[Angelik]

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é !

[danielhagnoul]

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 ) );
    }
});

[fredoche]

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

[Angelik]

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 :

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 :

Merci de votre aide

[Darkaurora]

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

[Angelik]

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 ?

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 ?

[Darkaurora]

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)

[Angelik]

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

[Darkaurora]

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

[Angelik]

Merci

Qu'entends-tu par

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é!

[Darkaurora]

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

[danielhagnoul]

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>

[Angelik]

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

[Darkaurora]

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

[Angelik]

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

[Angelik]

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'],
));

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

[Bovino]

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 ?

[Angelik]

Bien le bonjour,

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.

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"

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

[Angelik]

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 ...