Comment afficher l'aperçu d'un message dans un pop-up avant l'envoi
Hors ligneClicky Le 16/03/2008 à 12:42 Profil de Clicky Configuration de Clicky

lélàménan
Bonjour,

J'aimerais pouvoir afficher l'aperçu d'un message dans un pop-up.
J'ai un formulaire avec un bouton type submit qui envoit les données dans une base de données. J'y ai aussi un textarea dont j'aimerais récupérer le contenu via un bouton, avec la method post sur une page pop-up, qui contient le code de traitement de ce contenu et une fonction code() qui permet d'appliquer un bbcode sur le texte récupéré.

Je ne m'y connais pas trop en javascript, on m'a conseillé de faire ça avec AJAX et j'ai découvert un procédé avec les objets XMLHttpRequest mais c'est encore trop flou pour moi. J'ai fait d'autres recherches et j'ai essayé d'adapter une fonction javascript trouvé sur un forum.

Voici mon formulaire (épuré ici pour éviter d'en mettre trop long) :


<form method="post" action="postok.php?action=repondre&amp;t=<?php echo $topic ?>" name="formulaire">
<p>
<fieldset>
<legend><strong>Mise en forme</strong></legend>
<input type="button" id="gras" name="gras" value="Gras" onClick="javascript:bbcode('[g]', '[/g]');return(false)" />
<br /><br />
<img src="../images/forum/smileys_bbcode/smile.gif" title="heureux" alt="heureux" onClick="javascript:smilies(' :huhu: ');return(false)" />
</fieldset>
<br />
<br />
<fieldset><legend><strong>Message</strong></legend><textarea cols=95 rows=10 id="message" name="message"></textarea></fieldset>
<br />
<script language="javascript">
function previsu()
{
Message=document.formulaire.message.value;
document.forms["formulaire"].method='POST';
document.forms["formulaire"].target='previsu';
document.forms["formulaire"].action='previsu_post?message=' + Message;
document.forms["formulaire"].submit();
window.open('previsu_post.php', 'previsu' 'height=400,width=600,toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no')
}
</script>
<input type="button" name="previsu" value="Prévisualiser" onClick="previsu();return false;" />

<input type="submit" name="submit" value="Envoyer" />
<input type="reset" name="Effacer" value = "Effacer" />
</p></form>


Puis le code de traitement censé récupérer le texte :


<?php
include("bbcode.php");
 
if 
(isset($_POST['previsu']))
{
        if (!empty($_POST['message']))
        {
                $message = htmlentities($_POST['message']);
                echo '<div id="previsu">'.code($message).'</div>';
        }
        else
        
{
                echo '<div id="previsu">Le champ est resté vide.</div>';
        }
}
?>


Mais rien ne se passe, le pop-up ne s'ouvre même pas et si je fait des modif dans la fonction javascript, le pop-up s'ouvre mais le traitement ne se fait pas.

Quelqu'un saurait m'aiguiller sur un bon procédé s'il vous plaît ?

Merci !

Clicky
--

Clicky infographiste freelance

Hors ligneAnthony Le 16/03/2008 à 15:12 Profil de Anthony Configuration de Anthony

Admin
Salut Clicky

En fait je n'ai pas très bien compris ce que tu souhaites, mais ton code PHP m'aide peut-être :

Tu souhaites par exemple taper un message dans une textarea, et lorsque tu cliques sur un bouton "prévisualisation" voir un traitement sur ce message effectué dans une Popup, tout en mettant à jour le contenu principal ?

Si je prends exemple de ce forum, en gros ça consisterait à avoir un bouton "prévisualisation" et lorsque je cliquerai dessus, il y aurait une popup avec le message final affiché (et le bbcode transformé en HTML) et de l'autre j'aurais soumis le formulaire comme si j'avais cliqué sur "envoyer le message" ? (je ne pense pas que ce soit totalement ça car dans ce cas la prévisualisation serait inutile m'enfin je dois pas en être loin)

Tu peux nous éclairer stp ?

merci
--

Hors ligneClicky Le 16/03/2008 à 16:08 Profil de Clicky Configuration de Clicky

lélàménan
Bonjour Anthony, merci de t'intéresser à mon problème

En fait, j'aimerais un peu le même système qu'il y a sur ce forum ou comme sur celui de phpbb mais l'affichage de l'aperçu se ferait dans un pop-up avec la fonction du bbcode appliquée dessus, ce dernier resterait ouvert et se mettrait à jour à chaque fois qu'on clique sur prévisualiser quand on modifie le texte.

Le fichier bbcode.php inclu dans le code de traitement, contient la fonction code() qui est appliquée sur le texte reçu. Il y a aussi une fonction à part pour la coloration syntaxique de code php dans les posts qui utilise la fonction php highlight_string(), et des options comme mettre du texte en couleur ou l'insertion d'image, il m'est donc impossible d'appliquer l'équivalent de ce bbcode php en javascript..

J'aimerais que ça se passe dans un pop-up pour éviter d'avoir à réactualiser la page où la saisie du texte se fait pour y garder le texte déjà saisi, à moins qu'il existe un procédé qui permette de mettre à jour l'aperçu sans avoir à recharger la page du formulaire..

J'espère que j'ai été un peu plus claire pour que ça puisse t'aider à comprendre ce que j'aimerais faire

Merci !
--

Clicky infographiste freelance

Hors ligneAnthony Le 18/03/2008 à 13:40 Profil de Anthony Configuration de Anthony

Admin
Ce soir je regarde pour essayer de faire ton script, car j'ai un doute sur la faisabilité de certaines choses (c'est la popup qui me pose problème en fait)
--

Hors ligneClicky Le 18/03/2008 à 14:40 Profil de Clicky Configuration de Clicky

lélàménan
Bonjour,

En fait j'avais essayé de passer les infos par l'url, donc en method get avec cette fonction trouvée je ne sais plus où.. :

<script language="javascript">
function previsu()
{
Message=document.formulaire.message.value;
Adresse='affichage.php?message=' + Message;
window.open(Adresse,'previsu', 'height=400, width=600, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=no, directories=no, status=no');
}
</script>


Mais la method get limite le nombre de caractère à passer, et avec cette fonction, le pop-up s'ouvre bien avec le texte sur lequel le bbcode s'applique bien, mais les retours à la ligne n'y sont plus, c'est pour ça que j'essais maintenant de passer le texte par post, mais je ne sais pas comment faire.
J'ai essayé de mettre le bouton prévisualiser dans le formulaire principal et à part, dans un autre formulaire avec une fonction qui récupère le champ textarea du formulaire principal.
J'essais plein de choses mais je manque visiblement de connaissance en javascript..

Je te remercie beaucoup en tout cas, d'essayer de m'aider
--

Clicky infographiste freelance

Hors ligneAnthony Le 18/03/2008 à 23:34 Profil de Anthony Configuration de Anthony

Admin
En JS le post je sais pas si c'est possible, par contre pour les caractères utilise la fonction escape() en javascript . Personnellement pour la prévisualisation j'utise des XML HTTP Requests (AJAX) en méthode post histoire de passer outre la limitation. Regarde de ce côté-là : http://toutjavascript.com/savoir/xmlhttprequest.php3
--

Hors ligneClicky Le 20/03/2008 à 00:26 Profil de Clicky Configuration de Clicky

lélàménan
J'avais découvert  un tuto sur le XML HTTP Requests avec peut-être de quoi résoudre mon problème mais je ne comprends encore pas bien le fonctionnement, il faut que je regarde ça mieux et que je fasse des tests.
Je pensais qu'il existait une méthode plus simple mais visiblement ce n'est pas le cas..

Merci pour ton lien, il apportera peut-être un complément d'explications au tuto que j'ai :)

Merci pour tout !
--

Clicky infographiste freelance

Vous avez résolu votre problème avec VIC ? Faites-le savoir sur les réseaux sociaux !
Vulgarisation-informatique.com
Cours en informatique & tutoriels