append() ne fonctionne pas si je saisis du texte !

22 octobre 2016 à 14:00:52

Bonjour, j'ai crée cette fonction :

// Citer un commentaire
function citer_commentaire(commentaire, citation)
{
	var comment = document.getElementById('edite_commentaire_'+commentaire).value;
	var scroll = document.getElementById("scroll_editer").offsetTop;

	$("textarea").append("&lt;citation&gt;"+citation+"\n"+comment+"\n&lt;/citation&gt;\n");
	
	$('html, body').animate({ scrollTop: scroll }, 750);
	$("textarea").focus();
}

Le but c'est d'insérer du texte dans un textarea grâce à un bouton, ça fonctionne très bien, sauf que à partir du moment ou je saisis le moindre texte (un espace, ou même un chiffre) la fonction ne veut plus faire fonctionner le append(), le seul moins pour résoudre ça c'est de recharger la page, je voulais savoir d'ou ça pouvais venir ? j'ai essayer quelques trucs rien n'y fais, j'ai aucune erreur dans la console ..

Merci d'avance

Black_remy

22 octobre 2016 à 15:13:09

Bonjour,

Es que tu peux mettre le code html .

florianlecoconnier

22 octobre 2016 à 17:33:24

<div class="btn_commentaire" style="margin-right:6px;" onclick="citer_commentaire('3212', 'Le 22 octobre 2016 à 16:45:44 Rainbow a écrit :d)');"><i data-toggle="modal" class="fa fa-quote-right"></i></div> 	
							

// Citer un commentaire
function citer_commentaire(commentaire, citation)
{
	var comment = document.getElementById('editer_commentaire_'+commentaire).value;
	var scroll = document.getElementById("scroll_editer").offsetTop;

	$("textarea").append("&lt;citation&gt;"+citation+"\n"+comment+"\n&lt;/citation&gt;\n");
	
	$('html, body').animate({ scrollTop: scroll }, 750);
	$("textarea").focus();
}
</script>

<textarea id="textarea" class="form light" onkeyup="previsu();" style="resize:none;height:140px;" name="message" placeholder="Votre message ici.."></textarea>

Résultat : <citation>Le 22 octobre 2016 à 16:45:44 Rainbow a écrit :d) Ah non mais moi c'est parce que je parlais de l'upload des collections de stickers. Or en uploadant une collec' on gagnait 10 points et là c'est passé à 50 points. ça fait qu'on devrait avoir 40 points en plus x le nombre de collections uploadées. :noel: Donc du coup je me demandais si RedNka allait rajouter les JVCoins aux comptes. :ok: </citation>

Je répètes au cas ou, mais le problème c'est pas le fais que ça fonctionne pas, ça marche très bien, mais à partir du moment que je mes le focus sur le textarea ou que j'insère du texte c'est fini, je dois recharger la page ..

-
Edité par florianlecoconnier 22 octobre 2016 à 17:42:47

Black_remy

22 octobre 2016 à 22:03:01

essai ce code :

$("textarea").html("<citation>"+citation+"\n"+comment+"\n</citation>\n");

florianlecoconnier

23 octobre 2016 à 0:21:34

Ne fonctionne toujours pas, et je viens d'essayer, j'ai également une fonction "editer_commentaire" c'est exactement le même problème, dès que je touches au textarea en ajoutant supprimant un texte, si je recliques sur l'un des boutons ça ne fonctionne plus..

voilà le code au complet !

<script>
function insertTag(startTag, endTag, textareaId, tagType) {
        var field  = document.getElementById(textareaId); 
        var scroll = field.scrollTop;
        field.focus();
        
        if (window.ActiveXObject) 
		{
                var textRange = document.selection.createRange();            
                var currentSelection = textRange.text;
        } 
		else 
		{
                var startSelection   = field.value.substring(0, field.selectionStart);
                var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
                var endSelection     = field.value.substring(field.selectionEnd);               
        }
        
        if (window.ActiveXObject) 
		{
                textRange.text = startTag + currentSelection + endTag;
                textRange.moveStart("character", -endTag.length - currentSelection.length);
                textRange.moveEnd("character", -endTag.length);
                textRange.select();     
        } 
		else 
		{
                field.value = startSelection + startTag + currentSelection + endTag + endSelection;
                field.focus();
                field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
        } 

		field.scrollTop = scroll; 
}

function getXMLHttpRequest() {
	var xhr = null;
	
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest();
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
	
	return xhr;
}

// Editer un commentaire
function edite_commentaire(commentaire)
{
	var comment = document.getElementById('edite_commentaire_'+commentaire).value;
	var scroll = document.getElementById("scroll_editer").offsetTop;

	document.getElementById("info_editer").innerHTML = '<div class="titre_actualite" style="text-align:center;font-size:1.2em;">Édition du commentaire ('+commentaire+')</div><div class="saut_ligne"></div>';

	$("textarea").html('');
	$("textarea").append(comment);
	document.getElementById("statut_edit").value = 1;
	document.getElementById("message_id").value = commentaire;	
	
	$('html, body').animate({ scrollTop: scroll }, 750);
	$("textarea").focus();
}

// Citer un commentaire
function citer_commentaire(commentaire, citation)
{
	var comment = document.getElementById('edite_commentaire_'+commentaire).value;
	var scroll = document.getElementById("scroll_editer").offsetTop;

	$("textarea").append("&lt;citation&gt;"+citation+"\n"+comment+"\n&lt;/citation&gt;\n");
	$("textarea").focus();
	
	$('html, body').animate({ scrollTop: scroll }, 750);
}

// Nouveau sujet
function nouveau_sujet()
{
	var scroll = document.getElementById("scroll_nouveau_sujet").offsetTop;
	$('html, body').animate({ scrollTop: scroll }, 750);
	document.getElementById("titre_sujet").focus();
}	

function previsu()
{
	var content = encodeURIComponent(document.getElementById('textarea').value);
	
	var xhr = getXMLHttpRequest();
	
	if (xhr && xhr.readyState != 0) 
	{
		xhr.abort();
		delete xhr;
	}
	
	xhr.onreadystatechange = function() 
	{
		if (xhr.readyState == 4 && xhr.status == 200)
		{
			document.getElementById('preview').innerHTML = xhr.responseText;
		} 
		else if (xhr.readyState == 3)
		{
			document.getElementById('preview').innerHTML = "";
		}
	}
	
	xhr.open("POST", "preview_msg.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send("string="+content);
}
</script>


<?php if(isset($user)) { ?>
	<div class="conteneur_bbcode">
		<span class="addon">
			<b class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-font pointerbbcode zoom"></i></a>
				<ul class="dropdown-menu">
					<li><a class="pointer" onclick="insertTag('<p1>','</p1>','textarea');"><p class="p1 light">Très Petit</p></a></li>
					<li><a class="pointer" onclick="insertTag('<p2>','</p2>','textarea');"><p class="p2 light">Petit</p></a></li>
					<li><a class="pointer" onclick="insertTag('<p3>','</p3>','textarea');"><p class="p3 light">Normal</p></a></li>
					<li><a class="pointer" onclick="insertTag('<p4>','</p4>','textarea');"><p class="p4 light">Gros</p></a></li>
					<li><a class="pointer" onclick="insertTag('<p5>','</p5>','textarea');"><p class="p5 light">Très Gros</p></a></li>
				</ul>
			</b>
			<i onclick="insertTag('<b>','</b>','textarea');" class="fa fa-bold pointerbbcode zoom"></i>
			<i onclick="insertTag('<i>','</i>','textarea');" class="fa fa-italic pointerbbcode zoom"></i>
			<i onclick="insertTag('<u>','</u>','textarea');" class="fa fa-underline pointerbbcode zoom"></i>
			<i onclick="insertTag('<s>','</s>','textarea');" class="fa fa-strikethrough pointerbbcode zoom"></i>
			<i data-toggle="modal" data-target="#modal_couleur" class="fa fa-adjust pointerbbcode zoom bbcode_couleur"></i>	
			<i onclick="insertTag('<gauche>','</gauche>','textarea');" class="fa fa-align-left pointerbbcode zoom"></i>
			<?php if($mobile == 1) { echo '</span><span class="addon" style="opacity:0;"></span><div class="saut_ligne_little"></div><span class="addon">'; } ?>
			<i onclick="insertTag('<centre>','</centre>','textarea');" class="fa fa-align-center pointerbbcode zoom"></i>
			<i onclick="insertTag('<droite>','</droite>','textarea');" class="fa fa-align-right pointerbbcode zoom"></i>
			<i onclick="insertTag('<spoiler>','</spoiler>','textarea');" style="color:#B40404;" class="fa fa-bomb pointerbbcode zoom"></i>
			<i data-toggle="modal" data-target="#modal_smileys" style="color:#DBA901;" class="fa fa-smile-o pointerbbcode zoom"></i>
			<?php if(!isset($disable_upload)) { ?>
			<i data-toggle="modal" data-target="#modal_upload" style="color:#00A3D9;" class="fa fa-image pointerbbcode zoom"></i>
			<?php } ?>
			<b class="dropdown">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-twitch pointerbbcode zoom" style="color:#BF00FF;"></i></a>
				<ul class="dropdown-menu">
					<li><a class="pointer" onclick="insertTag('<twitch_live>','</twitch_live>','textarea');" style="color:#BF00FF;">Live</a></li>
					<li><a class="pointer" onclick="insertTag('<twitch_video>','</twitch_video>','textarea');" style="color:#BF00FF;">Rediffusion</a></li>
					<li><a class="pointer" onclick="insertTag('<twitch_discussion>','</twitch_discussion>','textarea');" style="color:#BF00FF;">Tchat</a></li>
				</ul>
			</b>
		</span>
		
		<?php if($mobile == 0) { echo '<div style="float:right;">'; } else { echo '<div class="saut_ligne_little"></div><div style="text-align:center;">'; } ?>
			<label class="switch" style="<?php if($mobile == 0) { echo 'margin-left:15px;'; } ?>">
				<input type="checkbox" id="checkbox_previsu" onClick="gBox2('');" <?php if($user['default_previsu'] == 1) { echo 'checked'; } ?>>
				<div class="slider round"></div>
			</label><br />
		</div>	
		
		<?php if($mobile == 0) { echo '<div style="float:right;">'; } else { echo '<div class="saut_ligne_little"></div><div style="text-align:center;">'; } ?>
			<label class="switch">
				<input type="checkbox" id="checkbox_sticker" onClick="gBox('');" <?php if($user['default_sticker'] == 1) { echo 'checked'; } ?>>
				<div class="slider round"></div>
			</label><br />
		</div>
		
		<div id="contenu_stickers">
		
			<div class="saut_ligne_little"></div>
			
			<?php if($mobile == 0) { echo '<div style="float:right;">'; } else { echo '<div style="text-align:center;">'; } ?>
				<span class="addon" style="margin-right:5px;padding:4px;">
				<?php 			
				$search_cb_collection = $sql->q("SELECT COUNT(*) AS cb FROM Collection_Sticker WHERE validation=1");
				$cb_collection = $search_cb_collection->fetch_array();
				
				$search_collection = $sql->q("SELECT * FROM Collection_Sticker WHERE validation=1 ORDER BY id ASC");
				$boucle_collection = 1;
				while($boucle_collection <= $cb_collection['cb'])
				{
					$collection = $search_collection->fetch_array();
						
					echo '<img id="img_collection_'.$collection['id'].'" class="pointer_collection" style="margin-right:3px;" onclick="filtre_sticker(\''.$collection['id'].'\');" src="images/stickers/'.$collection['image'].'"/>';
					$boucle_collection++;
				}	
				?>
				</span>
				<div class="saut_ligne_little"></div>
			</div>
			
			
			<div class="addon_stickers" <?php if($user['default_sticker'] == 0) { echo 'style="display:none;"'; } ?>>
				
				<?php 			
				$search_cb_stickers = $sql->q("SELECT COUNT(*) AS cb FROM Stickers");
				$cb_stickers = $search_cb_stickers->fetch_array();
				
				if($cb_stickers['cb'] != 0)
				{
					$search_sticker = $sql->q("SELECT * FROM Stickers ORDER BY collection DESC");
					$boucle_sticker = 1;
					while($boucle_sticker <= $cb_stickers['cb'])
					{
						$sticker = $search_sticker->fetch_array();
							
						$search_collection = $sql->q("SELECT * FROM Collection_Sticker WHERE id='".$sticker['collection']."'");
						if($search_collection->num_rows != 0)
						{
							$collection = $search_collection->fetch_array();
							
							if($collection['validation'] == 1)
							{
								echo '<img class="an_stick pointer collection_'.$collection['id'].'" style="display:inline-block;border:0;" onclick="insertTag(\'<sticker>'.$sticker['source'].'</sticker>\', \'\',\'textarea\');"  src="images/stickers/'.$sticker['source'].'"/>';
							}
						}
						$boucle_sticker++;
					}	
				}
				else
				{
					echo 'Aucun sticker disponible.';
				}
				?>
			</div>
		</div>
	</div>
	<?php if(isset($profil_signature)) { ?>
	<textarea id="textarea" class="form light" onkeyup="previsu();"  style="resize:none;height:140px;" name="signature" placeholder="Votre signature ici"><?php echo $user['signature']; ?></textarea>						
	<?php } elseif(isset($tchat)) { ?>
	<input type="text" id="textarea" class="form light" onkeyup="previsu();" style="resize:none;max-height:34px;" placeholder="Entrez votre message ici.."/>			
	<?php } else { ?>
	<textarea id="textarea" class="form light" onkeyup="previsu();" style="resize:none;height:140px;" name="message" placeholder="Votre message ici.."></textarea>						
	<?php } ?>
	
	<div id="preview" class="form light readonly previsu" <?php if($user['default_previsu'] == 0) { echo 'style="display:none;"'; } ?>></div>
	<div class="saut_ligne_little"></div>
<?php } else { if(isset($cree_sujet)) { $msg_erreur = "créer un sujet"; } else { $msg_erreur = "poster un message"; } ?>
<div class="e404">
	<?php if(!isset($erreur_bbcode)) { ?>
	<b> Oops, je dois être connecté pour <?php echo $msg_erreur; ?> .. <?php echo show(':banzai:'); ?>
	<?php } else { ?>
	<b> <?php echo $erreur_bbcode; ?>
	<?php } ?>
	<div class="saut_ligne_little"></div>
	<input type="button" class="btn_orange" data-toggle="modal" data-target="#modal_login" value="Je veux me connecter !">
</div>
<?php } ?>

Black_remy

23 octobre 2016 à 19:34:20

Je n'ai pas d' appelle a cette fonction .

-
Edité par Black_remy 23 octobre 2016 à 19:36:12

florianlecoconnier

24 octobre 2016 à 1:13:51

$tag_citation = 'Le '.strftime("%d %B %G à %H:%M:%S", $commentaire['active']).' '.$auteur_commentaire['username'].' a écrit :d)';
$btn_citation = '<div class="btn_commentaire" style="margin-right:6px;" onclick="citer_commentaire(\''.$commentaire['id'].'\', \''.$tag_citation.'\');"><i data-toggle="modal" class="fa fa-quote-right"></i></div>';

C'est grâce à ce bouton que j'appel la fonction, mais j'ai crée un "tableau" qui m'évite de recrée 30 fois le même code sur chaque page, en gros ce tableau sert à afficher un commentaire, le code que j'ai mis plus haut c'est la page bbcode qui affiche le textarea, les divers fonctionnalités etc.

florianlecoconnier

25 octobre 2016 à 14:30:35

Toujours aucune idée ? ça viens vraiment pas de mon code, si ça fonctionnes avant l'insertion d'un texte .. et via javascript j'ai fais différents tests c'est toujours pareil, les var sont bien défini comme quand ça fonctionne..

Sanatorium

26 octobre 2016 à 21:54:08

Salut,

Au lieu d'apeller ta fonction directement dans le html essaies avec un événement Jquery comme ceci

$(document).delegate("textarea",keyup",function(){
 previsu();
});

Mysteries are revealed in the light of reason

florianlecoconnier

26 octobre 2016 à 21:55:53

J'ai pas compris le rapport avec la fonction previsu ?

Sanatorium

26 octobre 2016 à 21:58:55

Si j'ai bien compris, c'est ta fonction qui est appelé au onkeyup= dans

<textarea id="textarea" class="form light" onkeyup="previsu();" style="resize:none;height:140px;" name="message" placeholder="Votre message ici.."></textarea>

Le but est de d'appeler ta fonction sans utiliser d'attribut en html.

-
Edité par Sanatorium 26 octobre 2016 à 22:00:26

Mysteries are revealed in the light of reason

florianlecoconnier

27 octobre 2016 à 1:49:40

Oui mais ça ne change strictement rien je viens de faire l'essai ..

C'est la fonction éditer/cité qui ne fonctionne pas à partir du moment ou je mes le focus sur le textarea et/ou que j'insert du texte dans ce même text area ..

// Editer un commentaire
function edite_commentaire(commentaire)
{
	var comment = document.getElementById('edite_commentaire_'+commentaire).value;
	var scroll = document.getElementById("scroll_editer").offsetTop;

	document.getElementById("info_editer").innerHTML = '<div class="titre_actualite" style="text-align:center;font-size:1.2em;">Édition du commentaire ('+commentaire+')</div><div class="saut_ligne"></div>';

	$("textarea").html('');
	$("textarea").append(comment);
	document.getElementById("statut_edit").value = 1;
	document.getElementById("message_id").value = commentaire;	
	
	$('html, body').animate({ scrollTop: scroll }, 750);
	$("textarea").focus();
}

// Citer un commentaire
function citer_commentaire(commentaire, citation)
{
	var comment = document.getElementById('edite_commentaire_'+commentaire).value;
	var scroll = document.getElementById("scroll_editer").offsetTop;

	$("textarea").append("&lt;citation&gt;"+citation+"\n"+comment+"\n&lt;/citation&gt;\n");
	$("textarea").focus();
	
	$('html, body').animate({ scrollTop: scroll }, 750);
}

Je vois vraiment pas d'ou ça peut venir, j'ai vérifier en direct le bouton qui me permet d'appeler la fonction fonctionne bien, j'ai mis des alertes etc, toute les variables sont renseigner, la fonction continue de ce lancer mais le $("textarea").append ce bloque comme j'ai dis plus haut dès que je mes le focus ou que j'insert du texte, j'ai également essayer en utilisant cette fonction :

// Citer un commentaire
function citer_commentaire()
{
	$("textarea").append("test");
}

ça ne change strictement rien, aucune erreur dans la console, coté html j'ai toujours ce résultat (un exemple)

<div class="btn_commentaire" style="margin-right:6px;" onclick="citer_commentaire('3959', 'Le 26 octobre 2016 à 19:47:07 RedNka a écrit :d)');"><i data-toggle="modal" class="fa fa-quote-right"></i></div>

Mais ça continue de ne pas vouloir insérer le texte, sinon le focus et le scroll continue à ce faire comme-ci que tout fonctionner normalement ..