Previsualisation jquery

Résolu/Fermé

novice - 14 mai 2018 à 23:57
novice - 16 mai 2018 à 16:50

Bonjour,

j'ai ce code

<button class="icon-button-previsualiser" type="submit">prévisualiser</button>

<textarea data-autoresize spellcheck="false" placeholder="nouveau message" ></textarea>

j'aimerais quand on met un message dans le texterea et ensuite on clique sur prévisualiser ca s'affiche

merci

A voir également:

Previsualisation jquery
Prévisualisation impossible - Forum Webmastering
Erreur de prévisualisation imprimante ✓ - Forum Mozilla Firefox
Tampermonkey jquery - Forum Javascript
Jquery regex ✓ - Forum Javascript
Elementor la prévisualisation n'a pas pu être chargée - Forum Wordpress

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025 4 741
15 mai 2018 à 00:30

Bonjour
Tu veux le prévisualiser où ?
Il nous manque un peu de ton code html non ?

novice
15 mai 2018 à 09:30

voilà le code

      <!--début du titre-->
	  <h1 id="titre-nouveau-formulaire">nouveau</h1>
	  <!--fin du titre-->

	  <!--début du global du formulaire-->
	  <form id="global-nouveau" action="toto.php" method="post" >
	  <fieldset>
	  <!-- par exemple on peut le mettre par là le contenue du mesage du texterea-->

	  <legend>prévisualiser</legend>
	  <div class="global-nouveau-formulaire">ici on met le contenue du texterea dés qu'on appuie sur le boutton prévisualiser</div>
	  
	  <legend>nouveau mesage</legend>
	  <div class="global-nouveau-formulaire"><label>titre du sujet :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" placeholder="titre du sujet" name="titresujet" id="titresujet" required /></div></div>
	  <div class="global-nouveau-formulaire"><label>Icône :</label><?php include "../../select/formulaire/nouveau/icone/index.php";?></div>
	  <div class="global-nouveau-corp-message"><label>Corps du message</label><div class="global-corp-message"><div class="global-nouveau-boutton-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/button.php";?></div><div class="global-nouveau-select-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/select.php";?></div><textarea data-autoresize spellcheck="false" placeholder="nouveau message" ></textarea></div></div>

	  <legend>options supplémentaires</legend>

	  <div class="global-nouveau-formulaire"><label>piéces jointes :</label><label for="file" class="label-file">gérer les pièces jointes</label><input id="file" class="input-file" type="file"></div>
	  <div class="global-nouveau-formulaire"><label>motif :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" id="motif" name="motif"  placeholder="motif"  /></div></div>
	  <div class="global-nouveau-formulaire"><label>type :</label><?php include "../../select/formulaire/nouveau/type/index.php";?></div>

   	  <!--début du boutton de formulaire-->
      <nav id="global-button-nouveau-formulaire"><ul><li><button class="icon-button-previsualiser" type="submit">prévisualiser</button></li><li><button class="icon-button-ajouter" type="submit">envoyer</button></li></ul></nav>
	  <!--fin du boutton de formulaire-->

	  </fieldset>
	  </form>
	  <!--fin du global du formulaire-->

merci

jordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025 4 741
15 mai 2018 à 11:35

Déjà, faudrait mieux mettre un élément facile à cibler pour identifier la div à manipuler

<legend>prévisualiser</legend>
	  <div class="global-nouveau-formulaire" id="zone_previ">ici on met le contenue du texterea dés qu'on appuie sur le boutton prévisualiser</div>

idem pour le textarea

<textarea  id="nouv_msg" data-autoresize spellcheck="false" placeholder="nouveau message" ></textarea>

Vu que tu veux le faire en JS, il faut retirer le "submit" du bouton

<button class="icon-button-previsualiser" type="button" onclick="previsualiser();">prévisualiser</button>

Ensuite, côté JS, tu peux faire

function previsualiser(){
  var contenuTextArea = $("#nouv_msg").val();
  console.log(contenuTextArea); // pour voir dans la console du navigateur
  $("#zone_previ").html(contenuTextArea);
}

novice
15 mai 2018 à 12:05

merci, ca marche,
mais

 <legend>prévisualiser</legend>
	  <div class="global-nouveau-formulaire" id="zone_previ">ici on met le contenue du texterea dés qu'on appuie sur le boutton prévisualiser</div>

j'aimeras qu'on ne vois pas ce code et des qu'on appuie sur le bouitton previsualiser ca apparaît

je crois qu'il faut faire un display none pour cacher le cadre et des qu'on clique sur previsualiser ca se met un dysplay blok

merci

jordane45 Messages postés 38469 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 22 avril 2025 4 741 > novice
Modifié le 15 mai 2018 à 12:08

Oui. Tu peux jouer avec le style display
par exemple, pour masquer

$("#zone_previ").css("display","none");

Sinon en jquery il existe les fonctions hide() et show()

$("#zone_previ").hide();

novice
15 mai 2018 à 13:23

merci ca cache bien le cadre mais des qu'on clique ca n'apparaît plus

je te met tout mon code

le code html

	  <!--début du global du formulaire-->
	  <form id="global-nouveau" action="toto.php" method="post" >
	  <fieldset>
	  <!--début de cette parti sera caché-->
	  <div id="zone-previ">

	  <legend>prévisualiser</legend>
	  <div class="global-nouveau-formulaire" id="zone-previ"></div>
	  </div>
	  <!--fin de cette parti sera caché-->
	  <legend>nouveau mesage</legend>
	  <div class="global-nouveau-formulaire"><label>titre du sujet :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" placeholder="titre du sujet" name="titresujet" id="titresujet" required /></div></div>
	  <div class="global-nouveau-formulaire"><label>Icône :</label><?php include "../../select/formulaire/nouveau/icone/index.php";?></div>
	  <div class="global-nouveau-corp-message"><label>Corps du message</label><div class="global-corp-message"><div class="global-nouveau-boutton-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/button.php";?></div><div class="global-nouveau-select-formulaire"><?php include "../../select/formulaire/nouveau/miseenforme/select.php";?></div><textarea  id="nouv_msg champtexte" name="texte" data-autoresize spellcheck="false" placeholder="nouveau message" onclick="view('textarea','viewDiv');"></textarea></div></div>

	  <legend>options supplémentaires</legend>

	  <div class="global-nouveau-formulaire"><label>piéces jointes :</label><label for="file" class="label-file">gérer les pièces jointes</label><input id="file" class="input-file" type="file"></div>
	  <div class="global-nouveau-formulaire"><label>motif :</label><div class="global-nouveau-formulaire-input icon-titre-news"><input type="text" id="motif" name="motif"  placeholder="motif"  /></div></div>
	  <div class="global-nouveau-formulaire"><label>type :</label><?php include "../../select/formulaire/nouveau/type/index.php";?></div>

   	  <!--début du boutton de formulaire-->
      <nav id="global-button-nouveau-formulaire"><ul><li><button class="icon-button-previsualiser" type="button" onclick="previsualiser();">prévisualiser</button></li><li><button class="icon-button-ajouter" type="submit">envoyer</button></li></ul></nav>
	  <!--fin du boutton de formulaire-->

	  </fieldset>
	  </form>
	  <!--fin du global du formulaire-->

mon code prévisualisation.js

$("#zone-previ").hide();

function previsualiser(){
  var contenuTextArea = $("#nouv_msg").val();
  console.log(contenuTextArea); // pour voir dans la console du navigateur
  $("#zone-previ").html(contenuTextArea);
}

et j'ai rajouter dans id champtexte et name="texte" dans le texterea afin de mettre des bbcode
j'ai mis

<input type="button" class="submit" value="Gras" onClick="balises('gras')" />

et ds bbcode.js

function balises(typebal){
switch (typebal){
case "gras":
var textoper = document.getElementById('champtexte').value;
document.getElementById('champtexte').value = textoper + '[b][/b]'
break;
case "italique":
var textoper = document.getElementById('champtexte').value;
document.getElementById('champtexte').value = textoper + '[i][/i]'
break
case "souligné":
var textoper = document.getElementById('champtexte').value;
document.getElementById('champtexte').value = textoper + '[u][/u]'
break
case "url":
var textoper = document.getElementById('champtexte').value;
document.getElementById('champtexte').value = textoper + '[url=votre lien]nom du lien[/url]'
break}
}

j'ai refais les bouttons j'ai mis

<nav id="global-nouveau-formulaire-button"><ul>
	  <li><button class="icon-button-gras" type="button" onclick="insertTag('<gras>', '</gras>', 'textarea')"></button></li>
	  <li><button class="icon-button-souligner" type="button" onclick="insertTag('<souligner>', '</souligner>', 'textarea')"></button></li>
	  <li><button class="icon-button-italique" type="button" onclick="insertTag('<italique>', '</italique>', 'textarea')"></button></li>
	  <li><button class="icon-button-barrer" type="button" onclick="insertTag('<barrer>', '</barrer>', 'textarea')"></button></li>
	  <li><button class="icon-button-gauche" type="button" onclick="insertTag('<gauche>', '</gauche>', 'textarea')"></button></li>
	  <li><button class="icon-button-centrer" type="button" onclick="insertTag('<centrer>', '</centrer>', 'textarea')"></button></li>
	  <li><button class="icon-button-droite" type="button" onclick="insertTag('<droite>', '</droite>', 'textarea')"></button></li>
	  <li><button class="icon-button-justifier" type="button" onclick="insertTag('<justifier>', '</justifier>', 'textarea')"></button></li>
	  <li><button class="icon-button-puce" type="button" onclick="insertTag('<puce>', '</puce>', 'textarea')"></button></li>
	  <li><button class="icon-button-numero" type="button" onclick="insertTag('<numero>', '</numero>', 'textarea')"></button></li>
	  <li><button class="icon-button-lien" type="button" onclick="insertTag('<lien>', '</lien>', 'textarea')"></button></li>
	  <li><button class="icon-button-arobase" type="button" onclick="insertTag('<mail>', '</mail>', 'textarea')"></button></li>
	  <li><button class="icon-button-secret" type="button" onclick="insertTag('<secret>', '</secret>', 'textarea')"></button></li>
	  <li><button class="icon-button-tableau" type="button"></button></li>
	  <li><button class="icon-button-video" type="button" onclick="insertTag('<video>', '</video>', 'textarea')"></button></li>
	  <li><button class="icon-button-image" type="button" onclick="insertTag('<image>', '</image>', 'textarea')"></button></li>
	  <li><button class="icon-button-attention" type="button" onclick="insertTag('<attention>', '</attention>', 'textarea')"></button></li>
	  <li><button class="icon-button-question" type="button" onclick="insertTag('<question>', '</question>', 'textarea')"></button></li>
	  <li><button class="icon-button-information" type="button" onclick="insertTag('<information>', '</information>', 'textarea')"></button></li>
	  <li><button class="icon-button-erreur" type="button" onclick="insertTag('<erreur>', '</erreur>', 'textarea')"></button></li>
	  </ul></nav>

a causse de tout ca ne veux pas fonctionné

j'aimerais cacher la zone prévisualisation

ensuite cliquer sur gras et italique etc....

ca se met dans le texterea ensuite on clique sur prévisualisation le boutton

et là ca fera apparaître le cadre de la prévisualisation

je sais que c'est un truc tout bête mais là je ne vois pas ou est le soucy

merci

Discussions similaires

PROBLÈME DE PREVISUALISATION PREMIERE PRO

Bonjour,

J’ai un problème avec première pro vous êtes ma seul aide.
J’ai monté une grande partie de ma vidéo, déjà sur Première pro. Mais après plusieurs heures de travail, la prévisualisation du montage a commencer à buger (image ce stop et le son continue).
Je ne comprends pas tout allais bien pourtant.
J’enregistre mon projet sur mon 1er SSD qui arrive au bout (200go libre sur 1TO) (J’en est un deuxième qui est pas trop entamé)

J’ai déjà baisser la qualité de la prévisualisation, j’ai aussi changer les rams que les autres application peuvent prendre dans —> préférences —> mémoire mais ne change

Si quelqu’un a déjà eu ce pr...

volet de visualisation dans explorateur et pdf

Bonjour,
Depuis mi décembre, la prévisualisation pdf dans l'explorateur ne fonctionne plus correctement.
J'avais un affichage qui se dimensionnait automatiquement à la largeur du volet, qui m'indiquait le nombre de pages du document et qui me permettait de passer d'une page à l'autre.
Depuis, que je configure Edge ou AR DC comme application par défaut pdf, je n'ai plus accès qu'à une image figée (qui ne se dimensionne pas avec la largeur du volet donc la plupart du temps pratiquement illisible) ni aux différentes pages du document - sans compter que Egde ne fonctionne que de manière très aléatoire ....
Avez-vous rencontré ce problème ?
Avez-vous une soluti...

Redirection Jquery onclick

Bonjour,

J'ai besoin d'utiliser jQuery pour faire une redirection lors d'un clic sur un lien.

L'idée est de faire exactement comme on pourrait le faire en javascript :
window.onload=function() { document.getElementById("lien").onclick = function() { document.location.href="https://www.toto.com/"; }; }

Sachant que mon lien a un id="lien", comment faire la même chose en jQuery ?

Je ne connais pas trop jquery donc j'ai d'abord mis ça dans le head :

Ensuite j'ai essayé avec un code de type :
$("#lien").click(function() { window.location="https://www.toto.com/"; });

Mais ç...

jquery: refresh element enfant après ajax

Bonjour à tous! :)

voilà, j'ai un élément span avec une classe "outfavori" que je remplis dés la fin du chargement du dom avec un élément img avec une classe "masterTooltip"... jusque là, tout se passe bien, mon js "masterTooltip.js" qui se trouve à la fin fonctionne sans souci...

Le problème vient quand je clique sur cet élément span avec la classe "outfavori", j'ai mon élément img qui est bien remplacée après ajax par ce qu'il me faut mais la classe "masterTooltip" ne fonctionne plus sur cet élément nouvellement chargé... avez vous une idée comment cet élément qui suit ajax et inséré dans la span pourrait continuer de fonctionner avec la classe "masterTooltip...

Impression

Bonjour,

impossible d'imprimer une page web (mail sous yahoo), message d'erreur "Une erreur inconnue est survenue pendant l'impression."
Vérifié l'imprimante (Brother), mis à jour Firefox..
Si quelqu'un a déjà solutionné ce problème, merci d'avance