Le Javascript prend le dessus sur mon HTML

Fermé

jrm.car - 10 mars 2016 à 16:59
readonly - 14 mars 2016 à 23:14

Bonjour,

Je souhaite afficher sur la moitié gauche de ma page un textarea avec mon code HTML et sur la moitié droite un iframe avec le rendu du code HTML (c'est à dire la page en elle même).

Je ne suis pas très à l'aise avec Javascript/Jquery et je ne comprends pas pourquoi mon textarea ne s'affiche pas.

Voici mon code:


<?php
//supprime les retours à la ligne et ajoute des slashs (" \ ") avant les simple quotes (" ' ") pour le Js
$HTML_JS = $HTML;
$HTML_JS = str_replace(CHR(10),"",$HTML_JS);
$HTML_JS = str_replace(CHR(13),"",$HTML_JS);
$HTML_JS = addslashes($HTML_JS);
?>

<html xmlns="http://www.w3.org/1999/xhtml"><head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Création Newsletter FHG</title>
		<style>
			textarea {
				display: block;
                                float: left;
				margin-left: auto;
				margin-right: auto;
			}
			iframe {
                                display: block;
                                float: right;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
                <script type="text/javascript">
                    $(function() {
                            var $frame = $('<iframe style="width:50%;height:100%;">');
                            $('body').html( $frame );
                            setTimeout( function() {
                                    var doc = $frame[0].contentWindow.document;
                                    var $body = $('body',doc);
                                    var var_html = '<?php echo $HTML_JS; ?>';
                                    $body.html(var_html);
                            }, 1 );
                    });
                </script>
		</head>
		<body>
		
		<iframe srcdoc="" style="width:50%;height:100%;"></iframe>
                
                <textarea id="html_var" name="html_var" style="width:80%;height:50%;">
			<?php 
			echo $HTML; 
			?>
		</textarea>
		
		</body>
</html>

merci :)

A voir également:

Le Javascript prend le dessus sur mon HTML
Telecharger javascript - Télécharger - Langages
Editeur html - Télécharger - HTML
Html download - Télécharger - HTML
Br html ✓ - Forum Webmastering
Instagram prend trop de place - Forum Instagram

1 réponse

Réponse 1 / 1

readonly
10 mars 2016 à 18:30

Salut,
commencer par afficher vos erreurs et il y en a!

Si certaines sont des erreurs de codes ou des oublis il y a une grave faute de conception:

var var_html = '<?php echo $HTML_JS; ?>';

glups... PHP fonctionne sur serveur et javascript sur le client et ne peuvent pas être utilisés l'un dans l'autre. Pour ça il faut AJAX qui permet de se mettre des informations utiles au programmes sous le coude(comme les variables obtenues de SQL par PHP) pour les utiliser plus tard(méta-données) par exemple quand l'ordinateur de l'internaute en a besoin(côté HTML et javascript qui sont interprétés par le navigateur eux).

Le but de javascript et dans un autre mesure PHP est de manipuler HTML donc c'est là aussi que ça pêche.

 <textarea id="html_var" name="html_var" style="width:80%;height:50%;">
			<?php 
			echo $HTML; 
			?>
		</textarea>

Affichez vos erreurs vous verrez que la variable que vous essayez d'afficher n'existe tout simplement pas, donc normal qu'il n'affiche qu'un textarea vide. textarea d'ailleurs complètement faux puisque un textearea est fait pour être inclus dans un formulaire que vous avez omis et qui ne pourra jamais être validé en tel que tel(c.à.d. envoyer des informations à un script).

Pourquoi?
<html xmlns="http://www.w3.org/1999/xhtml">
Depuis 1999 de l'eau à coulé sous les ponts, enfin c'est un détail si vous voulez des pages qui ne sont pas faites pour les navigateurs actuels...

Le mieux serait pour vous de commencer par les bases dont vous manquez cruellement, bref d'apprendre plutôt que de faire du pifomètre qui comme pour tout langage à fortiori outil technique ne supporte pas la moindre imprécision.

readonly
Modifié par readonly le 10/03/2016 à 18:37

En javascript on utilise la notation objet pointée(avec le symbole ".") pour faire références à des éléments(DOM javascript).

Voici un exemple concret:
http://www.w3schools.com/jsref/met_document_getelementbyid.asp

Je vous laisse chercher par vous même les formulaires HTML(voire ce qu'est HTML tout court, préférez la version 5 qui est plus simple et plus performante à tout point de vue), AJAX éventuellement si vous passez le cap du blocage javascript et seul permet de pouvoir utiliser PHP(serveur) et javascript (client) ensemble si ça le nécessite(de manière asynchrone bien que le X de AJAX ne soit plus toujours justifié puisqu'il existe d'autres langages plus pratique que XML comme json ).

jrm.car
11 mars 2016 à 11:03

Bonjour, merci de votre réponse,

Je vais ici faire un résumé de ce que je cherche à faire et pourquoi je l'ai fais ainsi:

Tout d'abord cette page n'est pas destinée à être publiée. Ce sera une page perso accessible que pour moi en local ou sur une partie admin.
En bref j'ai un formulaire avec des champs à remplir (lien vers images, textes, ect..) pour créer une newsletter, une fois le formulaire validé, les données sont transmise à cette page via $_POST.
Je les récupèrent, je les inclus dans mon HTML de newsletter de base (le squelette de ma newsletter).
Et ensuite se pose mon soucis. J'aimerais d'un coté de la page afficher le code HTML et dans l'autre afficher l'aperçu du HTML.

1/ Je ne l'ai pas précisé car cela me semblait évident, mais oui il y a bien quelque chose dans la variable $HTML, je ne l'ai juste pas mis dans le code ici. Vous pouvez mettre ce qu'il vous chantent à l'intérieur.

2/ Vous avez raison pour le textarea ce n'est pas ce qu'il y a de plus adapté, j'ai pris cela par défaut sans trop y réfléchir. Je modifierais. Mais ça ne change pas la nature de mon problème.

3/ <html xmlns="http://www.w3.org/1999/xhtml"> : J'ai fais un copié/collé d'un vieux html qui trainait. En ce qui concerne la navigation dessus, je le répète ma page n'est pas destiné a être en ligne. Je vais tout de même changer ça.

4/ Enfin concernant la partie javascript, mon problème était que je voulais afficher du html dans l'iframe, ce qui est nativement pas implémenté. J'ai pris le code ici: http://stackoverflow.com/questions/620881/putting-html-inside-an-iframe-using-javascript
Ne connaissant pas trop le Javascript, je ne suis pas en mesure débugger cette partie tout seul.

Voilà j'espère que maintenant vous comprenez mieux mes choix.

Cordialement.

jrm.car
11 mars 2016 à 11:26

Ps: Mon problème est ici. Pas ailleurs.

Capture firebug de la page:
http://image.noelshack.com/fichiers/2016/10/1457691794-bug-js-html.jpg

Comme vous pouvez le constater tout autre code que le iframe ne s'affiche pas.

readonly
Modifié par readonly le 14/03/2016 à 23:12

Salut,
pour déboguer javascript commencez par afficher les erreurs(en utilisant la sortie console dans votre code, sinon pour voir les erreurs de code il faut ouvrir la fonctionnalité(console javascript) dans Chrome, installer Firebug si vous utilisez Firefox.

Pour le reste tout est dit dans le sujet précédent. Ce n'est pas la peine de vous référer au code quand votre façon de faire celui ci est incohérente.

Correction aussi(attention tout les domaines techniques sont sujet à la précision, encore plus quand il s'agit de langages informatiques) je n'ai pas dit que
textarea est mal adapté, au contraire.
C'est surtout qu'un textarea est une balise qui doit être incluse dans une balise formulaire, balise formulaire un des seules(en tout cas la meilleure) façon d'envoyer des onformations à un programme par le biais de http..

Je vous ait aussi fournit le lien pour la fonction getElementBy qui permet de cibler un élément du DOM par javascript seulement vous n'avez pas compris je suppose. En jquery la syntaxe est un peu différente(simplifiée) mais le but est la même chose: notation objet pointée qui permet d'accéder à un objet(les éléments HTML par exemple) et ses propriétés(comme la valeur que doit afficher une balise de texte, voir exemple).

1/ apprenez à lire, je parle de la variable session PHP surtuot.
2/ si c'est pour un formulaire utilisez une balise de formulaire, si c'est pour un texte utilisez une balise de texte. Je vous renvoit à nouveau sur getElementById et son équivalent jquery, si je met un lien c'était pour vous répondre, apprenez à lire!
3/Vous répétez que la page n'est pas destiné à être en ligne. La sécurité est d'autant plus importante alors. Commencez par pas faire des copié collé bêtement et utiliser votre cerveau. L'un des principes des évolutions des technologies est de contrer les menaces de sécurité qui sont trouvées, l'un des autres est de proposer des nouvelles fonctionnalités. Que vous publiez sur Internet ou utilisez en réseau intranet si vous écrivez quelque chose de faux et de périmé ça reste faux et périmé, dans le cas de l'évolutions des technologies des failles pour la sécurité.
4/ On en reviens à du grand n'importe quoi: copier collé sans réfléchir. Le code me semble très clair pour moi et ne correspond pas du tout à ce que vous voulez fair puisque vous voulez écrire de façon dynamique dans la page. Renseignez vous avant tout sur les iframes et les raisons pour lesquelles cette technologie peut poser problème.
Le code de stactoverflow concerne le changement d'une page (HTML/PHP)entière affichée dans une autre page... donc me semble très éloignée de votre problématique.

...facile de dire je ne sais pas , mais commencez pas vous retrousser les manches, si vous ne savez pas apprenez, si vous avez un problème remédiez y... où vous êtes un émir du pétrole et comptez sur les autres pour faire tout à votre place?
Ou alors 'je ne sais pas, continuez à pleurer dans votre coin" mais vous n'arriverez à rien... sans rien faire et un minimum de travail.

"Voilà j'espère que maintenant vous comprenez mieux mes choix. "

Faire des trucs incohérent en voulant que le monde change plutôt que de regarder les erreurs que l'on a ce n'est pas un choix, c'est de la bêtise, au mieux de l'obstination dans l'ignorance mais ça ne changera pas le fait que javascript est exécute chez le client et PHP sur le serveur donc impossible à utiliser ensemble(PHP est toujours avant javascript) , ni ne change que si vous utilisez une variable session vous devez vous conformer à ses règles(voir manuel) or dans votre code vous faites appel à une variable session avant que celle ci ne soit crée... donc C'EST FAUX.. ce n'est pas un choix technique c'est de l'incompétence de votre part!!!

Quant à la solution (afficher une valeur dans un champ texte)elle est bien présente et je vous en ait montré un exemple simple que vous pouvez copier/coller(opuisque ça vuos plaît) mais qui est assez simple à comprendre.
C'est un début mais il faudra utiliser PHP si vous faites appel à une base de données et AJAX si vous voulez de l'interactivité sans avoir à envoyer de nouveau le programme au serveur(et recharger la page)...

vraiment.. les boulets incapable de lire et qui font du copié collé et disant qu'ils ont raison alors qu'ils savent rien... je vois pas comment on pourra les sauver... de la peine pour eux!!!

readonly
Modifié par readonly le 14/03/2016 à 23:18

Et ensuite se pose mon soucis. J'aimerais d'un coté de la page afficher le code HTML et dans l'autre afficher l'aperçu du HTML.

Vous devez écrire (sans les espaces)
& lt ;
et
& gt ;

pour afficher une balise qui ne sera pas interprété par le navigateur.

par exemple:

& gt;balise& lt;
<!-- pour greater too et lower too en supprimant les espaces entre & et lt; et gt;-->

affiche
<balise>

et de l'autre côté afficher le HTML correspondant.

Discussions similaires

&nbsp ; Quelle Fonction ?

Espace en HTML

la balise <br> ou <br />

Image cliquable dans html

Javascript Arrondi à 2 chiffres après la virgule

Discussions similaires

Newsletters