Jquery et xAjax

fadeIn

19 août 2011 à 20:27:26

Bonsoir à tous les zéros,

J'aurais une question à vous poser :
J'ai suivi le tuto sur le chat en xAjax que j'ai modifié pour qu'il interagisse avec ma BDD au lieu d'un fichier, jusque la pas de souci.
Lorsque j'ai voulu intégrer un effet de fadeIn grâce à jquery sur le div block qui affiche les messages, j'ai eu un petit problème, l'effet ne fonctionne que si on effectue un rafraîchissement manuel (F5), pas lors du rafraîchissement effectué par xAjax.

Voici mon code :

<?php
session_start();
//
//Notre fonction PHP pour afficher les messages
//
date_default_timezone_set('Europe/Paris');

function afficher()
{
        $reponse = new xajaxResponse();//Création d'une instance de xajaxResponse pour traiter les réponses serveur
		
		//Connexion à la base de données
		mysql_connect("localhost", "root", "")or die(mysql_error());
		mysql_select_db("test")or die(mysql_error());

        $chat = '';//Initialisation de la variable $chat
		
        $req = mysql_query("SELECT posteur, message, DATE_FORMAT(date, '%d/%m/%Y') AS time FROM chat ORDER BY ID DESC")or exit(mysql_error()); // ici voit les colonnes que tu souhaite selectionner
		
        while($dat = mysql_fetch_assoc($req))
		{
			$chat .= '<strong style = "color : red; font-size : 19px;">'.$dat['posteur'].'</strong> <span style ="color : #3b5998; font-size : 12px; margin-left: 20px;">post&eacute le '.$dat['time'].'</span> : <br /><br /> '.$dat['message'].'<br /><br /><br />'; // ici voit pour la mise en forme
		
		}
  
        $reponse->assign('block', 'innerHTML', $chat);//Enfin, on change le contenu du div block par le contenu de $chat
        return $reponse;
}

//
//Notre fonction PHP envoyer pour envoyer un message
//
function envoyer($posteur, $message)
{
        $reponse = new xajaxResponse();//Création d'une instance de xajaxResponse pour traiter les réponses serveur
		
        mysql_connect("localhost", "root", "")or exit(mysql_error());
	mysql_select_db("test")or exit(mysql_error());
		
	$req = mysql_query('INSERT INTO chat (posteur, message, date) VALUES ("'.$posteur.'", "'.$message.'", NOW())')or exit(mysql_error()); // ici voit les colonnes que tu souhaite selectionner

        $reponse->clear('message', 'value');//On vide le champ contenant le message du posteur
        $reponse->call('xajax_afficher');//On appelle la fonction afficher pour afficher les messages et aussi pour que le posteur voit son message à l'écran

        return $reponse;
}

//
//Ouverture de la librairie xajax
//Instanciation d'un objet de la classe xajax, puis déclaration de nos fonctions php
//
require_once('./xajax_core/xajax.inc.php');
$xajax = new xajax(); //On initialise l'objet xajax
$xajax->register(XAJAX_FUNCTION, 'afficher');//on enregistre nos fonctions
$xajax->register(XAJAX_FUNCTION, 'envoyer');
$xajax->processRequest();//Fonction qui va se charger de générer le Javascript, à partir des données que l'on a fournies à xAjax APRES AVOIR DECLARE NOS FONCTIONS

// Ici on peut inclure le haut.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" >
        <head>
                <title>Chat</title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
			   
                <?php $xajax->printJavascript(); /* Affiche le Javascript */?>
		<script type="text/javascript" src="jquery.js"></script>
                <script type="text/javascript">
                function refresh()//script javascript qui va appeler le fonction afficher toutes les 5 secondes
                {
                        xajax_afficher();
                        setTimeout(refresh, 5000);
                }
                </script>
        </head>
        <body>
                <form action="">
                        <fieldset>
                         <legend>Entrer ici votre message :</legend>
                         <div>
                          <label for="posteur">Pseudo : </label><input type="text" name = "posteur" size="15" id="posteur"/><br /><br />
                          <label for="message">Message : </label><input type="text" name = "message" size="40" id="message" /><br /><br />
                          <input type="submit" value="Envoyer" onclick="xajax_envoyer(document.getElementById('posteur').value, document.getElementById('message').value); return false;" />
                         </div>
                        </fieldset>
                </form><br /><br />
				<div id="block" class="block" style="text-align : center; display : none;"></div>
                <script type="text/javascript">
                        refresh();//On appelle la fonction refresh() pour lancer le script
			$("#block").fadeIn("slow");
                </script>

Pouvez vous m'aiguiller pour que mon fadeIn se charge sur le div id="block" à chaque appel de la fonction refresh() (toutes les 5 secondes) ?

Merci

quentindu16

21 août 2011 à 10:06:38

quentindu16

23 août 2011 à 10:59:06

Merwin

23 août 2011 à 11:50:02

<script type="text/javascript">
function refresh()//script javascript qui va appeler le fonction afficher toutes les 5 secondes
{
    xajax_afficher();
    setTimeout(refresh, 5000);
    $("#block").fadeIn("slow");
}
</script>


<script type="text/javascript">
$(refresh);//On appelle la fonction refresh() pour lancer le script

</script>

Comme ça ca ne marcherai pas ?

quentindu16

23 août 2011 à 12:07:15

Non, j'avais déjà essayé, l'effet se lance une seul fois au 1er chargement de la page, mais c'est tout.

ninlock

23 août 2011 à 12:56:40

Salut, je pense que c'est normal, car fadeIn ne fait que afficher un div caché, donc vu qu'il s'affiche la 1ere fois, le fadeIn ne sert plus. Pour vérifier ce que je dit, fait un $("#block").hide() au debut de ta fonction refresh().

quentindu16

23 août 2011 à 13:31:31

Hum hum, je n'y avait pas pensé, merci beaucoup, aurait tu également une solution pour que l'effet ne s'applique qu'aux nouveau messages postés, et pas à tout le block ?

ninlock

23 août 2011 à 14:12:57

Oui, j peut te donner une manière de faire, mais à toi de voir s'il y en pas une autre que tu préfère :

function refresh()//script javascript qui va appeler le fonction afficher toutes les 5 secondes
{
    xajax_afficher();
    setTimeout(refresh, 5000);
    $("#block").fadeIn("slow");
    $("#block").remove("block");
}

quentindu16

23 août 2011 à 14:59:07

Cela ne fonctionne pas.
Ce n'est pas grave, j'ai l'essentiel quand même merci beaucoup !

ninlock

23 août 2011 à 15:01:47

désolé, c'est pas remove, c'est removeClass

quentindu16

23 août 2011 à 15:04:15

Le fadeIn n'est pas exécuté apparemment, ou l'effet n’apparaît pas.

ninlock

23 août 2011 à 15:10:06

Euh, oui par contre il faut que le block que renvoi xajax_afficher() est la classe "block", sinon tu n'as plus de classe "block", donc fadeIn ne s'applique à aucun élément.

quentindu16

23 août 2011 à 15:14:10

Comme ceci tu veut dire ?

<div id="block" class="block" style="text-align : center; display : none;"></div>

Déjà fait, si c'est ce que tu voulait dire, le problème ne vient pas de là..

ninlock

23 août 2011 à 15:52:13

C'est ce que rajoute xajax_afficher(); à ton DOM? Si c'est le cas retire id="block", car ça veut dire que t'as autant d'element avec le meme id unique que de retour ajax, et ça c'est pas terrible, le principe de l'id unique c'estr d'être unique.
Donc tu garde class="block", tu retir id="block" et tu écrit :
$(".block").fadeIn("slow");
$(".block").removeClass("block");

quentindu16

23 août 2011 à 18:42:41

Avec ce code, les messages ne sont plus affichés :

xajax_afficher();
setTimeout(refresh, 5000);
$(".block").fadeIn("slow");
$(".block").removeClass("block");

avec un class="block" sur le div

ninlock

23 août 2011 à 19:17:21

Vérifie bien que t'as pas fait d'erreur! moi ça réagit exactement pareil qu'avec id.
Pour le test essaye de garder $(".block").hide();

Jquery et xAjax

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

Jquery et xAjax

fadeIn

Jquery et xAjax

Supprimer

Modérer

Signaler le message aux modérateurs