Affichage de données de haut en bas

**vinil** · 09/11/2016, 15h12

Bonjour,

j'ai créer un chat en javascript ajax mais mes message ne s'affiche pas dans l'ordre :
Nom : Capturer.JPG
Affichages : 114
Taille : 23,0 Ko

j'aimerai que le premier message apparaissent en bas et non en haut, dans ma requête sql dans le fichier charger.php j'ai bien ceci :

Code sql :

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

SELECT * FROM conversation WHERE id > :id ORDER BY id DESC LIMIT 5

et voici ma fonction qui charge les messages :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function charger(){
            setTimeout(function(){
                 var premierID = $('#conversation p:first').attr('id');
                $.ajax({
                    url : "charger.php?id=" + premierID,
                    type: "GET",
                    success : function(html){
                $('#conversation').prepend(html);}
                });
                charger();
            }, 1000);}

je ne comprend pas pourquoi il s'affiche dans ce sens et quand j'essaye de mettre ASC dans la rêquete sa m'affiche plusieurs fois le même message.

Merci
Cordialement

**SpaceFrog** · 09/11/2016, 15h18

prepend, = avant
append = après

**vinil** · 09/11/2016, 15h46

Bonjour,

oui je m'en sert également mais justement si je change que je passe de avant à après il charge plusieurs fois les même messages voici mon code de la page principale :

Code html :

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
<html>
    <head>
        <p>T'chat anonyme</p>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
     var blaze = prompt('Choisissez un pseudo');
     
        function charger(){
            setTimeout(function(){
                 var premierID = $('#conversation p:first').attr('id');
                $.ajax({
                    url : "charger.php?id=" + premierID,
                    type: "GET",
                    success : function(html){
                $('#conversation').prepend(html);}
                });
                charger();
            }, 1000);}
            
                charger();
                
                function envoie(form1){
                var message = document.form1.message.value;
                $.ajax({
        url : "envoie.php", 
        type : "POST", 
        data : "blaze=" + blaze + "&message=" + message,
        success : function(html){
        $('#conversation').apend(html);
                $('#message').val('');}
    });      
                }
        
        </script>
 
    </head>
 
    <body>
 
        <div style="overflow:auto;
    	border: 1px black solid; 
        resize:both;
        overflow:auto;	
        display:block;  
        width: 200px !important;
        height: 200px !important;" 
	id="conversation" name="conversation"></div>
	</br>
 
  <form name="form1">
            <script>
            $('#conversation').append('<p><em>' + blaze + ' a rejoint le Chat !</em></p>');
            
            </script>
            <textarea type="text" id="message" placeholder="Votre message..." ></textarea>
            <input type="button" value="envoyer" onclick="envoie();"/>
 
        </form>
   </body>
 
 
</html>

et voici celui de la page charger.php :

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
<?php
 
// ...
 try
                {
                    $bdd = new PDO('mysql:host=localhost;dbname=tchatjs', 'cohen', '');
                }
                catch (Exception $e)
                {
                    die('Erreur : ' . $e->getMessage());
                }
// on se connecte à notre base de données
 
if(!empty($_GET['id'])){ // on vérifie que l'id est bien présent et pas vide
 
    $id = (int) $_GET['id']; // on s'assure que c'est un nombre entier
 
    // on récupère les messages ayant un id plus grand que celui donné
    $requete = $bdd->prepare('SELECT * FROM conversation WHERE id > :id ORDER BY id DESC');
    $requete->execute(array("id" => $id));
 
    $conversation = null;
 
    // on inscrit tous les nouveaux messages dans une variable
    while($donnees = $requete->fetch()){
        $conversation .= "<p id=\"" . $donnees['id'] . "\">" . $donnees['blaze'] . " dit : " . $donnees['message'] . "</p>";
    }
 
    echo $conversation; // enfin, on retourne les messages à notre script JS
 
}
 
?>