Sujet Précédent Sujet Suivant

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

SkyCrasher Messages postés 45 Date d'inscription samedi 4 janvier 2003 Statut Membre Dernière intervention 6 janvier 2022 - 27 avril 2019 à 12:53
@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 - 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);
?>

3 réponses

Réponse 1 / 3
@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
Modifié le 27 avril 2019 à 19:24
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 !
0
Réponse 2 / 3
SkyCrasher Messages postés 45 Date d'inscription samedi 4 janvier 2003 Statut Membre Dernière intervention 6 janvier 2022
28 avril 2019 à 19:06
Bonjour,
Je n'ai pas réussi à le faire fonctionner correctement.
Pourriez-vous me faire le script complet, s'il vous plait ?
0
Réponse 3 / 3
@karamel Messages postés 1838 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 19 août 2023 148
29 avril 2019 à 16:07
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.
0

Discussions similaires

ecrire dans un TextArea
monoom -
gouessej -

6 réponses
onclick dans createElement s'exécute automatiquement
cousinlol -
cousinlol -

3 réponses
Problème pour récupérer le contenu d'un TextArea et le replacer URGENT !
Hopal -
Hopal -

12 réponses
Ajouter un valeur de type int dans un TextArea
psyckan -
psyckan -

2 réponses
textarea=>String : saut de ligne?
hluder -
hluder -

7 réponses
Rejoignez-nous