Problème tuto tchat ajax/php

HeadShot
PHP

Bonjour,
J'ai un problème avec le tuto pour créer un tchat en ajax/php.
http://www.grafikart.fr/tutoriels/php/tchat-jquery-ajax-php-82
J'en suis au moment de testé le loader. Le loader ne s'affiche pas et après le ".php" dans l'url vient s'ajouter "#".
Le problème peux venir d'où ?

Merci de votre aide.

11 réponses

Vallyan

Sans code ca va pas etre simple de t'aider -__-'.

Enfin a priori le # a la fin c'est qu'on click sur un lien avec un href="#" sans faire de e.preventDefault() dans la fonction SJ qui détecte le clique ...

HeadShot
Auteur

Désoler j'ai oublier, j'étais un peu presser..
tchat.js

$(function(){
    $("#tchatForm form").submit(function(){
        showLoader("#tchatForm");
        return false;
    })
});

function showLoader(div){
    $(div).append('<div class="loader"></div>');
    $(".loader").fadeTo(500,0.6);
}

tchat.php 

<?php
session_start();
if(!isset($_SESSION"pseudo"]) || empty($_SESSION"pseudo"])){
    header("location:index.php");
}
include "connect.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="tchat.js"></script>
</head>
<body>
    <div id="conteneur" style="width:94%;">
        <h1>Mon tchat, connectez en tant que <?php echo $_SESSION"pseudo"]; ?></h1>
        <div id="tchat">
            <?php
            $sql = "SELECT * FROM messages ORDER BY date DESC LIMIT 15";
            $req = mysql_query($sql) or die(mysql_error());
            $d = array();
            while($data = mysql_fetch_assoc($req)){
                $d] = $data;
            }
            for($i=count($d)-1;$i>=0;$i--){
            ?>
                <p><strong><?php echo $d$i]"pseudo"]; ?></strong> : <?php echo htmlentities($d$i]"message"]); ?></p>
            <?php
            }
            ?>
        </div>
    </div>
    <div class="tchatForm" style="position:fixed;bottom:0;width:100%;">
        <form action="#" method="post">
            <div style="margin-right:110px;">
                <textarea name="message" style="width:100%;"></textarea>
            </div>
            <div style="position:absolute; top:0; right:12px;">
            <input type="submit" value="Envoyer"/>
            </div>
        </form>
    </div>
</body>
</html>
Vallyan

Du coup tu as essayé en ajoutant le e.preventDefault() ?

$("#tchatForm form").submit(function(e){
    e.preventDefault();
    showLoader("#tchatForm");
})
Vallyan

D'autre part tu n'as pas de div #tchatForm (cf. ton showLoader() ...), c'est .tchatForm, non ?

HeadShot
Auteur

J'ai pas essayé avec le "e.preventDefault()".
L'erreur venais de ma div, erreur de débutant quel nul je suis.
Désoler d'avoir déranger pour sa.

Maintenant quand je veux envoyer le message dans ma bdd j'ai ceci dans firebug.
POST http://monsite/tchatAjax.php 500 Internal Server Error jquery.js (ligne 8556)
"NetworkError: 500 Internal Server Error - http://monsite/tchatAjax.php" tchatAjax.php

tchatAjax.php

<?php
session_start();
require("connect.php");
$d= =array();
if(!isset($_SESSION"pseudo"]) || empty($_SESSION"pseudo"]) || !isset($_POST"action"])){
    $d"erreur"] = "vous devez être connecté pour utiliser le tchat";
}
else{

    extract($_POST);
    $pseudo = mysql_escape_string($_SESSION"pseudo"]);

    /**
     * Action : addMessage
     * Permet l'ajout d'un message
     **/
    if($_POST"action"]=="addMessage"){
        $message = mysql_escape_string($message);
        $sql = "INSERT INTO messages(pseudo,message,date) VALUES('$pseudo','$message',".time().")";
        mysql_query($sql) or die(mysql_error());
        $d"erreur"] ="ok";
    }
}

echo json_encode($d);
?>
HeadShot
Auteur

UP

HeadShot
Auteur

Je passe pour un ***.
Merci de ton aide :p.
J'ai vérifier tout mes autres pages et corriger aussi 2/3 fautes :/
Tout fonctionne jusqu'au timer..
Le timer marche pas, aucune requete n'est envoyer.

var timer=setInterval(getMessages,5000);
HeadShot
Auteur

Non marche pas :/

HeadShot
Auteur

J'ai édité mon message car le problème de message qui s'afficher en décaler je l'ai résolue en remettant ma table de donné a 0.
J'utilise firefox et j'ai essaye aussi avec chrome.

tchat.js

var url="tchatAjax.php";
var lastid=0;
var timer=setInterval("getMessages()",5000);
$(function(){
    $("#tchatForm form").submit(function(){
        showLoader("#tchatForm");
        var message = $("#tchatForm form textarea").val();
        $.post(url,{action:"addMessage",message:message},function(data){
            if(data.erreur=="ok"){
                alert("ok");
            }
            else{
                alert(data.erreur);
            }
            hideLoader();
        },"json");
        return false;
    })
});

function getMessages(){
    $.post(url,{action:"getMessages",lastid:lastid},function(data){
            if(data.erreur=="ok"){
                $("#tchat").append(data.result)
            }
            else{
                alert(data.erreur);
            }
            hideLoader();
        },"json");
        return false;
}

function showLoader(div){
    $(div).append('<div class="loader"></div>');
    $(".loader").fadeTo(500,0.6);
}

function hideLoader(){
    $(".loader").fadeOut(500,function(){
        $(".loader").remove();
    });
}

tchatAjax.php 

<?php
session_start();
require("connect.php");
$d =array();
if(!isset($_SESSION"pseudo"]) || empty($_SESSION"pseudo"]) || !isset($_POST"action"])){
    $d"erreur"] = "Vous devez être connecté pour utiliser le tchat";
}
else{

    extract($_POST);
    $pseudo = mysql_escape_string($_SESSION"pseudo"]);
    /**
     * Action : addMessage
     * Permet l'ajout d'un message
     **/
    if($_POST"action"]=="addMessage"){
        $message = mysql_escape_string($message);
        $sql = "INSERT INTO messages(pseudo,message,date) VALUES('$pseudo','$message',".time().")";
        mysql_query($sql) or die(mysql_error());
        $d"erreur"] ="ok";
    }

    /**
     * Action : getMessages
     * Permet l'affichage des dernier messages
     **/
    if($_POST"action"]=="getMessages"){
        $lastid =floor($lastid);
        $sql ="SELECT * FROM messages WHERE id>$lastid ORDER BY date ASC";
        $req=mysql_query($sql) or die(mysql_error());
        $d"result"]="";
        while($data=mysql_fetch_assoc($req)){
            $d"result"].='<p><strong>'.$data"pseudo"].'</strong> : '.htmlentities($data"message"]).'</p>';
        }
        $d"erreur"]="ok";
    }

}

echo json_encode($d);
?>
HeadShot
Auteur

Bah dans le tutoriel c'est écris sa.. et sa marche pour lui.
L'alerte s'affiche quand le message a bien étais envoyer à la base de donné.

tchat.php

<?php
session_start();
if(!isset($_SESSION"pseudo"]) || empty($_SESSION"pseudo"])){
    header("location:index.php");
}
include "connect.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="tchat.js"></script>
    <script type="text/javascript">
        <?php
        $sql = "SELECT id FROM messages ORDER BY id DESC LIMIT 1";
        $req = mysql_query($sql) or die(mysql_error());
        $data=mysql_fetch_assoc($req);
        ?>
        var lastid = <?php echo $data"id"]; ?>
    </script>
</head>
<body>
    <div id="conteneur" style="width:94%;">
      <h1>Mon tchat, connectez en tant que <?php echo $_SESSION"pseudo"]; ?></h1>
        <div id="tchat">
            <?php
            $sql = "SELECT * FROM messages ORDER BY date DESC LIMIT 15";
            $req = mysql_query($sql) or die(mysql_error());
            $d = array();
            while($data = mysql_fetch_assoc($req)){
                $d] = $data;
            }
            for($i=count($d)-1;$i>=0;$i--){ 
            ?>
                <p><strong><?php echo $d$i]"pseudo"]; ?></strong> : <?php echo htmlentities($d$i]"message"]); ?></p>
            <?php
            }
            ?>
        </div>
    </div>

  <div id="tchatForm" style="position:fixed; bottom:0;width:100%;">
    <form method="POST" action="#">
        <div style="margin-right:110px;">
            <textarea name="message" style="width:100%;"></textarea>
        </div>
        <div style="position:absolute; top:0; right:12px;">
        <input type="submit" value="Envoyer"/>
        </div>
    </form>
  </div>
</body>
</html>
HeadShot
Auteur

J'ai vraiment un problème avec se tuto je bloque toute les 5min pour des erreurs vraiment bête que je vois même pas.
J'ai vérifier plusieurs fois mon code et il est identique a celui du tuto mais il veut pas afficher les membres connectés. Le timer connected fonctionne. Les pseudo sont bien envoyer dans la table "connected".
tchatAjax.php

...
/**
     * Action : getConnected
     * Permet l'affichage des derniers connectés
     **/
    if($_POST"action"]=="getConnected"){
        $now=time();
        $sql="SELECT pseudo FROM connected WHERE $now-date<3600";
        $req=mysql_query($sql) or die(mysql_error());
        $d"result"]="Connectés : ";
        while($data=mysql_fetch_assoc($req)){
            $d"result"].=$data"pseudo"].",";
        }
        $d"result"]=substr($d"result"],0,-1);
        $d"erreur"]="ok";
    }
...

tchat.js 

...
function getConnected(){
    $.post(url,{action:"getConnected"},function(data){
            if(data.erreur=="ok"){
                $("#connected").append(data.result);
            }
            else{
                alert(data.erreur);
            }
        },"json");
        return false;
}
...

index.php 

<?php
include "connect.php";
if(!empty($_POST) && isset($_POST"pseudo"]) && !empty($_POST"pseudo"])){
    session_start();
    $pseudo = $_POST"pseudo"];
    $pseudo=mysql_escape_string($pseudo);
    $sql="SELECT * FROM connected WHERE pseudo LIKE '$pseudo' LIMIT 1";
    $req=mysql_query($sql);
    $data = mysql_fetch_assoc($req);
    if(empty($data)){
        $ip= $_SERVER"REMOTE_ADDR"];
        $sql="INSERT INTO connected(pseudo,ip,date) VALUES('$pseudo','$ip',".time().")";
        $req=mysql_query($sql) or die (mysql_error());
        $idTchat=mysql_insert_id();
    }
    else{
        if($data"ip"]==$_SERVER"REMOTE_ADDR"] && time()-$data"date"]<3600){
            $idTchat=mysql_insert_id();
        }
        else if(time()-$data"date"]>3600){
            $idTchat=mysql_insert_id();            
        }
        else{
            $erreur="Ce pseudo est déjà en cours d'utilisation";
        }
    }
    if(!isset($erreur)){
        $_SESSION"pseudo"]=$_POST"pseudo"];
        $_SESSION"idTchat"] = $idTchat;
        header("location:tchat.php");
    }
}
?>

...

dans tchat.php 

<div id="connected">

</div>

Merci de votre aide