AJAX Comment insérer une 'textarea' sur les messages de conversation ?

Messages postés
43
Date d'inscription
samedi 4 janvier 2003
Statut
Membre
Dernière intervention
28 avril 2019
- - Dernière réponse : @karamel
Messages postés
1694
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mai 2019
- 29 avril 2019 à 16:07
Bonjour,
Comment insérer une 'textarea' sur les messages de conversation ?
J'aimerais afficher tous les messages dans une seule textarea.
Voici la BDD

CREATE TABLE IF NOT EXISTS `messages` (
  `message_id` bigint(20) unsigned NOT NULL auto_increment,
  `author` varchar(255) NOT NULL default 'Anonymous',
  `body` text NOT NULL,
  `posted` int(10) unsigned NOT NULL,
  PRIMARY KEY  (`message_id`),
  KEY `posted` (`posted`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=8 ;

--


ET voici la conversation:


<?PHP
$mysqli = mysqli_connect('localhost', 'user', 'password', 'messagerie') or die ("Impossible de se connecter.");

// Servira à générer le html d'un message.
function printMessage($message) {
	print
		'<div class="message">'
		.	'<span class="author">'.$message->author.'</span>'
		.	'<p class="body">'.nl2br($message->body).'</p>'
		.'</div>';
}
echo "";

/*
'<div class="message">'
		.	'<span class="author">'.$message->author.'</span>'
		.	'<p class="body">'.nl2br($message->body).'</p>'
		.'</div>';
*/
// Si un message est envoyé au script PHP en post, on l'ajoute dans la base de donnée.
// On retourne simplement le html du message au client qui sera traité par le javascript
if (isset($_POST['author']) && isset($_POST['body']) && !empty($_POST['author']) && !empty($_POST['body'])) {
	$message = new stdClass();
	$message->author = $_POST['author'];
	$message->body = $_POST['body'];
	$query = "INSERT INTO `messages` (author, body, posted) VALUES ('"
		.mysqli_real_escape_string($mysqli, $message->author)
		."', '"
		.mysqli_real_escape_string($mysqli, $message->body)
		."', ".time().")";
	mysqli_query($mysqli, $query);

	printMessage($message);

	exit;
}
// Sinon, il s'agit uniquement d'une consultation de page, et on affiche la liste.
// Il vaut mieux séparer ces deux tâches en modifiant la cible de l'attribut action du formulaire
else
{
	$messages = array();
	// On boucle sur les 30 derniers messages et on les ajoute au tableau
	$result = mysqli_query($mysqli, "SELECT * FROM messages ORDER BY posted DESC LIMIT 10");
	if($result) {
		while($message = mysqli_fetch_object($result)) {
			$messages[] = $message;
		}
	}
?>
<html>
	<head>

		<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				// Lorsque le formulaire est validé, on intercepte le clic...
				$('#messagerie form').submit(function() {
					// On récupère les données du formulaire
					var author = $('#messagerie #author').val();
					var body = $('#messagerie #body').val();
					// On simule l'envoi des données en AJAX et on récupère la réponse.
					$.ajax({
						type: "POST",
						// Ici, on pourrait utiliser un script spécial pour ne retourner qu'un extrait html.
						// Mais on le fait déjà en supposant que le script fonctionnera toujours.
						url: "ajax.php",
						data: 'author=' + author + '&body=' + body,
						// Une réponse déclenchera l'ajout du html dans la page
						success: function(data) {
							$('#messages').prepend(data);
							$('#nopost').hide(); // peut avoir besoin d'un test avant.
						}
					});
					// On retourne false pour bloquer la soumission normale du formulaire
					return false;
				});
			});
		</script>
		<style type="text/css">
			input, textarea { display:block; }
			#messagerie { }
			#messages { background-color:#FFFFFF;}
			#messages .author { }
			#messages .body { }
		</style>
		<!--<style type="text/css">background-color:#FFFFFF;
			input, textarea { display:block; }
			#messagerie { width: 280px; float:left;}
			#messages { padding-left: 300px;}
			#messages .author { font-weight: bold; }
			#messages .body {font-style: italic; }
		</style>-->
	</head>
	<body>
		<h1></h1>
		<?php print ( empty($messages) ) ? '<p id="nopost">Aucun message !</p>' :''; ?>
		<div id="messages">
			<?php
			// On génère le html des messages.
			foreach($messages as $message) {
				printMessage($message);
			}
			?>
		</div>
		<div id="messagerie">
			<?php // Ici le formulaire sera traité par le même script. ?>
			<form action="ajax.php">
				<label for="author"></label><br><font class="Blanc"><?PHP echo $login;?></font><input type="hidden" id="author" size="20" value=<?PHP echo "".$login."";?> />
				<label for="body"></label><textarea id="body" cols="58" rows="5"></textarea>
				<input type="submit" value="Envoyer" />
			</form>
		</div>
		
	</body>
</html>
<?php
}
// Fermeture de connexion à la BDD
mysqli_close($mysqli);
?>
Afficher la suite 

Votre réponse

3 réponses

Messages postés
1694
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mai 2019
39
0
Merci
bonjour
il faut creer le textarea avec createElement lui donner la valeur du retour ajax puis inserer le textarea


success: function(data) {

var element=document.createElement("textarea")
element.value=data
var el=document.getElementById("messages")
el.insertBefore(element, el.firstChild);

$('#nopost').hide(); // peut avoir besoin d'un test avant.
}



rien ne sert de courir il faut partir a point.
cours Forest cours !
Commenter la réponse de @karamel
Messages postés
43
Date d'inscription
samedi 4 janvier 2003
Statut
Membre
Dernière intervention
28 avril 2019
0
Merci
Bonjour,
Je n'ai pas réussi à le faire fonctionner correctement.
Pourriez-vous me faire le script complet, s'il vous plait ?
Commenter la réponse de SkyCrasher
Messages postés
1694
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
17 mai 2019
39
0
Merci
le code que j'ai mis devrait permettre d'afficher le retour ajax ce que j'ai fait c'est modifier la fonction success qui se trouve dans ton code.
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.