[JQuery] Textarea elastic dans un tableau par Kylia - page 1

Bonjour à tous,

Je rencontre des problèmes avec mes textarea qui sont placés dans un tableau. Ces textarea contiennent des données issuent d'une base de données. La longueur des données pouvant changer, j'ai décidé de faire des textarea "dynamiques". C'est à dire que leur hauteur doit s'allonger en fonction du contenu.
Pour celà j'ai utilisé le JQuery elastic http://www.unwrongest.com/projects/elastic/
et un tutoriel http://www.web-tutoriel.com/2010/02/09 [...] ugin-elastic/
mais je n'arrive pas à le faire fonctionner (je travaille sous IE8 et je dois obligatoirement garder ce navigateur).
Voilà un aperçut de ce que ça me donne : http://img199.imageshack.us/i/sdzs.jpg/
Et voilà mon code en entier :

<?php 
//Sélection et connexion à la base de données commande
include '../connexion.php'; 
session_start();
if ((!isset($_SESSION['user_name'])) || ($_SESSION['user_name'] == ''))
{
// La variable $_SESSION['login'] n'existe pas, ou bien elle est vide
// <=> la personne ne s'est PAS connectée
echo '<p>Vous devez vous <a href="../index.php">connecter</a>.</p>'."\n";
exit();
}
	//Sélection de tous les fournisseurs
	$req_FRS = "SELECT * FROM fournisseur ORDER BY FRS_Nom";
	$FRS = mysql_query($req_FRS, $connect) or die($req_FRS . " - " . mysql_error());
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="tp://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
       <title> Gestion des fournisseurs </title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	 <link rel="stylesheet" media="screen" type="text/css" title="Design" href="../css/conso.css" />
	<a name="ancrehaut"></a> 
</head>

<body>
	<script src="../js/jquery.elastic-1.6.4/dependencies/jquery-1.3.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.elastic.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	// <![CDATA[	
	$(document).ready(function(){				
		$('#mon_textarea').elastic();
	});	
        // ]]>
	</script>
	<table style="width:100%;border:solid 1px black">
	<tr>
		<td>
		<a href="../accueil.php"> <img src="../images/logo-capinov.JPG" name="logo_capinov"/> </a> 
		</td>
		<td> </td>
		<td style="background: url(../images/qui-fond.jpg) right top fixed no-repeat;">
				<h1 class="titre_general"> Gestion des fournisseurs </h1> 
		</td>
		</tr> 
	</table> 
	<br />
	<table>
		<tr>
		<input type="button" style="background:#4B3A9F; color:white; cursor:hand; border:solid 1px black;" value="Nouveau fournisseur"  onclick="self.location.href='nouveauFRS.php'" />
		</tr>
	</table>
		<td>
		<a href="#ancrebas" type="button" style="background:#4B3A9F; color:white; cursor:hand; border:solid 1px black;">Aller en bas de page</a>
		</td>
	</table>
	<br />
	<br />
	<table style="width:100%;border:solid 1px black;">
	<thead>
		<tr>
			<th style="text-align : center;"> CODE 			</th>
			<th style="text-align : center;"> NOM 			</th>
			<th style="text-align : center;"> ADRESSE 		</th>
			<th style="text-align : center;"> CP 			</th>
			<th style="text-align : center;"> VILLE 			</th>
			<th style="text-align : center;"> CONTACT		</th>
			<th style="text-align : center;"> MAIL 			</th>
			<th style="text-align : center;"> TEL 			</th>
			<th style="text-align : center;"> FRAIS ECH. </th> 
			<th style="text-align : center;"> CODE CLT		</th>
			<th style="text-align : center;"> N° DEVIS		</th>
			<th style="text-align : center;"> ACTIF (O/N) 	</th>
			<th style="text-align : center;"> </th>
		</tr>
	</thead>
	<tbody>
<?php
	while ($tab = mysql_fetch_array($FRS)) {
		// Mise en variable
		$FRS_Id 		= $tab['FRS_Id'];
		$FRS_Code 		= $tab['FRS_Code'];
		$FRS_Nom 		= $tab['FRS_Nom'];
		$FRS_Adresse 	= $tab['FRS_Adresse'];
		$FRS_Cp 		= $tab['FRS_Cp'];
		$FRS_Ville 		= $tab['FRS_Ville'];
		$FRS_Contact	= $tab['FRS_Contact'];
		$FRS_Mail 		= $tab['FRS_Mail'];
		$FRS_Tel 		= $tab['FRS_Tel'];
		$FRS_FraisEchantillon = $tab['FRS_FraisEchantillon'];
		$FRS_CodeClt	= $tab['FRS_CodeClt'];
		$FRS_NoDevis 	= $tab['FRS_NoDevis'];
		$FRS_Actif 	= $tab['FRS_Actif'];
		
		//Longueur max du champ FRS_Code
		$req_longFRS_Code = "SELECT MAX(LENGTH(FRS_Code)) FROM fournisseur";
		$res_longFRS_Code = mysql_query($req_longFRS_Code);
		$longFRS_Code = mysql_result($res_longFRS_Code, 0, "MAX(LENGTH(FRS_Code))") or die($req_longFRS_Code . " - " . mysql_error());
		
			//Longueur max du champ FRS_Nom
		$req_longFRS_Nom = "SELECT MAX(LENGTH(FRS_Nom)) FROM fournisseur";
		$res_longFRS_Nom = mysql_query($req_longFRS_Nom);
		$longFRS_Nom = mysql_result($res_longFRS_Nom, 0, "MAX(LENGTH(FRS_Nom))") or die($req_longFRS_Nom . " - " . mysql_error());
		
			//Longueur max du champ FRS_Adresse
		$req_longFRS_Adresse = "SELECT MAX(LENGTH(FRS_Adresse)) FROM fournisseur";
		$res_longFRS_Adresse = mysql_query($req_longFRS_Adresse);
		$longFRS_Adresse = mysql_result($res_longFRS_Adresse, 0, "MAX(LENGTH(FRS_Adresse))") or die($req_longFRS_Adresse . " - " . mysql_error());
		
			//Longueur max du champ FRS_Cp
		$req_longFRS_Cp = "SELECT MAX(LENGTH(FRS_Cp)) FROM fournisseur";
		$res_longFRS_Cp = mysql_query($req_longFRS_Cp);
		$longFRS_Cp = mysql_result($res_longFRS_Cp, 0, "MAX(LENGTH(FRS_Cp))") or die($req_longFRS_Cp . " - " . mysql_error());
		
			//Longueur max du champ FRS_Ville
		$req_longFRS_Ville = "SELECT MAX(LENGTH(FRS_Ville)) FROM fournisseur";
		$res_longFRS_Ville = mysql_query($req_longFRS_Ville);
		$longFRS_Ville = mysql_result($res_longFRS_Ville, 0, "MAX(LENGTH(FRS_Ville))") or die($req_longFRS_Ville . " - " . mysql_error());
		
			//Longueur max du champ FRS_Contact
		$req_longFRS_Contact = "SELECT MAX(LENGTH(FRS_Contact)) FROM fournisseur";
		$res_longFRS_Contact = mysql_query($req_longFRS_Contact);
		$longFRS_Contact = mysql_result($res_longFRS_Contact, 0, "MAX(LENGTH(FRS_Contact))") or die($req_longFRS_Contact . " - " . mysql_error());
		
			//Longueur max du champ FRS_Mail
		$req_longFRS_Mail= "SELECT MAX(LENGTH(FRS_Mail)) FROM fournisseur";
		$res_longFRS_Mail = mysql_query($req_longFRS_Mail);
		$longFRS_Mail = mysql_result($res_longFRS_Mail, 0, "MAX(LENGTH(FRS_Mail))") or die($req_longFRS_Mail . " - " . mysql_error());
		
			//Longueur max du champ FRS_Tel
		$req_longFRS_Tel= "SELECT MAX(LENGTH(FRS_Tel)) FROM fournisseur";
		$res_longFRS_Tel = mysql_query($req_longFRS_Tel);
		$longFRS_Tel = mysql_result($res_longFRS_Tel, 0, "MAX(LENGTH(FRS_Tel))") or die($req_longFRS_Tel . " - " . mysql_error());
		
			//Longueur max du champ FRS_FraisEchantillon
		$req_longFRS_FraisEchantillon = "SELECT MAX(LENGTH(FRS_FraisEchantillon)) FROM fournisseur";
		$res_longFRS_FraisEchantillon = mysql_query($req_longFRS_FraisEchantillon);
		$longFRS_FraisEchantillon = mysql_result($res_longFRS_FraisEchantillon, 0, "MAX(LENGTH(FRS_FraisEchantillon))") or die($req_longFRS_FraisEchantillon. " - " . mysql_error());
		
			//Longueur max du champ FRS_CodeClt
		$req_longFRS_CodeClt = "SELECT MAX(LENGTH(FRS_CodeClt)) FROM fournisseur";
		$res_longFRS_CodeClt = mysql_query($req_longFRS_CodeClt);
		$longFRS_CodeClt = mysql_result($res_longFRS_CodeClt, 0, "MAX(LENGTH(FRS_CodeClt))") or die($req_longFRS_CodeClt . " - " . mysql_error());
		
			//Longueur max du champ FRS_NoDevis
		$req_longFRS_NoDevis = "SELECT MAX(LENGTH(FRS_NoDevis)) FROM fournisseur";
		$res_longFRS_NoDevis= mysql_query($req_longFRS_NoDevis);
		$longFRS_NoDevis = mysql_result($res_longFRS_NoDevis, 0, "MAX(LENGTH(FRS_NoDevis))") or die($req_longFRS_NoDevis . " - " . mysql_error());
		
			//Longueur max du champ FRS_Actif
		$req_longFRS_Actif = "SELECT MAX(LENGTH(FRS_Actif)) FROM fournisseur";
		$res_longFRS_Actif = mysql_query($req_longFRS_Actif);
		$longFRS_Actif = mysql_result($res_longFRS_Actif, 0, "MAX(LENGTH(FRS_Actif))") or die($req_longFRS_Actif . " - " . mysql_error());
						
	if ($FRS_Actif == "O" ) {
?>
		<!-- Mettre en surbrillance la ligne du tableau grâce à la souris -->
		<tr style="border:solid 1px black;" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='white';">
<?php 	
	} 
	if ($FRS_Actif == "N")	{ 
?>
		<tr style="background-color: #CCCCCC; border:solid 1px black;" onmouseover="this.style.backgroundColor='red';" onmouseout="this.style.backgroundColor='white';">
<?php
    } ?>
		<form method="get" action="updateFRS.php" name="gestion_FRS" frame="hsides">
				<input type="hidden" name="FRS_Id" value="<?php echo $FRS_Id ; ?>" />
			<td align=center>
				<input type="text" size="<?php echo $longFRS_Code ;?>" name="FRS_Code" value="<?php echo $FRS_Code ;?>" style="vertical-align:middle;"/>
			</td>
			<td align=center>
				<input type="hidden" name="FRS_Id" value="<?php echo $FRS_Id ; ?>" />
				<textarea name="FRS_Nom" id="FRS_Nom" cols="500px" style="vertical-align:middle;overflow:auto;"><?php echo $FRS_Nom ;?></textarea>
				<!--<textarea name="FRS_Nom" id="FRS_Nom"  rows="1" cols="<?php //echo $longFRS_Nom ;?>" style="overflow:auto;"><?php //echo $FRS_Nom ; ?></textarea>-->
			</td> 
			<td align=center>
				<textarea name="FRS_Adresse" id="FRS_Adresse" cols="500px" style="vertical-align:middle;overflow:auto;"><?php echo $FRS_Adresse ;?></textarea>
				<!--<textarea name="FRS_Adresse" id="FRS_Adresse"  rows="1" cols="<?php //echo $longFRS_Adresse ;?>" style="overflow:auto;"><?php //echo $FRS_Adresse ; ?></textarea>-->			
			</td> 
			<td align=center>  
				<?php 
					if ($FRS_Cp < '10000') { ?>
						<input type="text" size="<?php echo $longFRS_Cp ;?>" name="FRS_Cp" value="<?php echo "0$FRS_Cp" ;?>" style="vertical-align:middle;" />
				<?php } else { ?>
						<input type="text" size="<?php echo $longFRS_Cp ;?>" name="FRS_Cp" value="<?php echo $FRS_Cp ; ?>" style="vertical-align:middle;" />
				<?php } ?>
			</td> 
			<td align=center>
				<textarea name="FRS_Ville" id="FRS_Ville" cols="500px" style="vertical-align:middle;overflow:auto;"><?php echo $FRS_Ville ;?></textarea>
				<!--<textarea name="FRS_Ville" id="FRS_Ville"  rows="1" cols="<?php //echo $longFRS_Ville ;?>" style="overflow:auto;"><?php //echo $FRS_Ville ; ?></textarea>-->
			</td> 
			<td align=center> 
				<input type="text" size="<?php echo $longFRS_Contact;?>" name="FRS_Contact" value="<?php echo $FRS_Contact ;?>" style="vertical-align:middle;" />
			</td> 
			<td align=center> 
				<input type="text" size="<?php echo $longFRS_Mail;?>" name="FRS_Mail" value="<?php echo $FRS_Mail ;?>" style="vertical-align:middle;" />
			</td> 
			<td align=center>
				<input type="text" size="<?php echo $longFRS_Tel ;?>" name="FRS_Tel" value="<?php echo $FRS_Tel ;?>" style="vertical-align:middle;" />
			</td> 
			<td align=center> 
				<input type="text" size="<?php echo $longFRS_FraisEchantillon ;?>" name="FRS_FraisEchantillon" value="<?php echo $FRS_FraisEchantillon ;?>" style="text-align:center;vertical-align:middle;" />
			</td>
			<td align=center> 
				<input type="text" size="<?php echo $longFRS_CodeClt ;?>" name="FRS_CodeClt" value="<?php echo $FRS_CodeClt ;?>" style="vertical-align:middle;" />
			</td> 
			<td align=center>
				<input type="text" size="<?php echo $longFRS_NoDevis ;?>" name="FRS_NoDevis" value="<?php echo $FRS_NoDevis ;?>" style="vertical-align:middle;" />
			</td>
			<td align=center> 
			<?php if ($FRS_Actif == "N") { ?>
				<input type="text" size="<?php echo $longFRS_Actif ;?>" name="FRS_Actif" value="<?php echo $FRS_Actif ;?>" maxlength="1" style="text-align:center;vertical-align:middle;"/>
			<?php } elseif ($FRS_Actif == "O") { ?>
				<input type="text" size="<?php echo $longFRS_Actif ;?>" name="FRS_Actif" value="<?php echo $FRS_Actif ;?>" maxlength="1" style="text-align:center;vertical-align:middle;"/>
			<?php } else {?>
				<input type="text" size="<?php echo $longFRS_Actif ;?>" name="FRS_Actif" value="O" maxlength="1" style="text-align:center;vertical-align:middle;" />
			<?php } ?>
			</td>
			<td align=center>
				<input type="image" size ="16px" name="modifier_FRS" src="../images/modifier.png"/>
			</td>
		</form>
		</tr>
		</tr>
<?php
	} // End while ($tab = mysql_fetch_array($labo))
?>
	</table>
	</tbody>
	<table>
		<td>
			<a href="#ancrehaut" style="background:#4B3A9F; color:white; cursor:hand; border:solid 1px black;"> Aller en haut de page </a>
		</td>
	</table>
	<a name="ancrebas"></a>
</body>
</html>

Avez-vous une solution pour que ça fonctionne ou alors une autre méthode pour que le contenu de mes textarea s'affichent en entier ? Je dois limiter la longueur de mes textarea pour que le contenu de mon tableau s'affiche correctement sur une même page.
Et est-ce normal que mes textarea n'affichent que 2 lignes ?

Merci d'avance pour votre aide.

Kylia

11 janvier 2011 à 9:37:55

Tillertan

11 janvier 2011 à 11:01:55

Personnellement je ferais un simple :

window.onload = function() {
	var txs = ['monTextarea1', 'monTextarea2', 'monTextarea3'];
	
	for (var i = 0, tmp; i < txs.length; i++) {
		tmp = document.getElementById(txs[i]);
		tmp.style.height = tmp.scrollHeight;
	}
};

Sans plugin ni rien

11 janvier 2011 à 11:17:38

Merci de t'être intéréssé à mon problème

j'ai quelques question par contre.
Pourrais-tu m'expliquer le fonctionnement de ce code ? Je suis une débutante en JS :euh:

Et comment dois-je faire appel à ce code ?

11 janvier 2011 à 11:30:20

Au chargement de la page, il redimensionne tous les textareas que tu as précisé à la taille de leur scrollBar, donc la taille totale.

11 janvier 2011 à 12:05:37

Je viens d'essayer de le mettre en place et il ne fonctionne pas, c'est à dire que lorsque mon texte dans mon textarea dépasse 2 lignes, j'ai la scrollbar qui s'affiche alors que je voudrais que mon textarea affiche une ligne de plus.

Voilà mon code avec ton script :
Déclaration du JS au début de mon scrip

<script>
	window.onload = function() {
	var txs = ['FRS_Nom', 'FRS_Adresse', 'FRS_Ville'];	
	for (var i = 0, tmp; i < txs.length; i++) {
		tmp = document.getElementById(txs[i]);
		tmp.style.height = tmp.scrollHeight;
		}
	};
</script>

Mon tableau contenant formulaire HTML contenant mes textarea

<table>
<form method="get" action="updateFRS.php" name="gestion_FRS" frame="hsides">
				<input type="hidden" name="FRS_Id" value="<?php echo $FRS_Id ; ?>" />
			<td align=center>
				<input type="text" size="<?php echo $longFRS_Code ;?>" name="FRS_Code" value="<?php echo $FRS_Code ;?>" style="vertical-align:middle;"/>
			</td>
			<td align=center>
				<input type="hidden" name="FRS_Id" value="<?php echo $FRS_Id ; ?>" />
				<textarea name="FRS_Nom" id="FRS_Nom" cols="500px" style="vertical-align:middle;overflow:auto;"><?php echo $FRS_Nom ; ?></textarea>
			</td> 
			<td align=center>
				<textarea name="FRS_Adresse" id="FRS_Adresse" cols="500px" style="vertical-align:middle;overflow:auto;" ><?php echo $FRS_Adresse ;?></textarea>
			</td> 
			<td align=center>  
				<?php 
					if ($FRS_Cp < '10000') { ?>
						<input type="text" size="<?php echo $longFRS_Cp ;?>" name="FRS_Cp" value="<?php echo "0$FRS_Cp" ;?>" style="vertical-align:middle;" />
				<?php } else { ?>
						<input type="text" size="<?php echo $longFRS_Cp ;?>" name="FRS_Cp" value="<?php echo $FRS_Cp ; ?>" style="vertical-align:middle;" />
				<?php } ?>
			</td> 
			<td align=center>
				<textarea name="FRS_Ville" id="FRS_Ville" cols="500px" style="vertical-align:middle;overflow:auto;"><?php echo $FRS_Ville ;?></textarea>
			</td> 
</form>
</table>

Il faudrait que mon textarea augmente d'une ligne lorsque le contenu prend 2 lignes mais je ne sais pas du tout comment faire ça :/.

11 janvier 2011 à 17:27:34

Ah mais tu veux que l'extension se fasse pendant que l'utilisateur tape ? J'ai cru que tu ne voulais que au début.

window.onload = function() {
	var txs = ['FRS_Nom', 'FRS_Adresse', 'FRS_Ville'];	
	for (var i = 0, tmp; i < txs.length; i++) {
		tmp = document.getElementById(txs[i]);
		tmp.onkeyup = function() {
			this.style.height = this.scrollHeight;
		};
		tmp.style.height = tmp.scrollHeight;
	}
};

12 janvier 2011 à 9:21:43

Je voudrais que l'extension se fasse automatiquement quand on arrive sur la page et quand l'utilisateur tape.
Je teste de suite ton code et je modifie ce message pour te dire comment c'est.

EDIT : Je viens de tester ton code et il ne fonctionne pas. C'est à dire qu'il n'y a pas de changement de taille de mes textarea. Je pense que le problème vient du fait que je ne précise pas combien de lignes mes textara doivent prendre.

[JQuery] Textarea elastic dans un tableau

[JQuery] Textarea elastic dans un tableau

Supprimer

Modérer

Signaler le message aux modérateurs