Probleme quote

par **Babacar** » 13 sept. 2011, 23:03

D'accord je comprend mieux ! merci encore et bonne soirée !
Sujet résolu!

par **Cyrano** » 13 sept. 2011, 22:55

Merci c'est vraiment sympa !

En fait dans la fonction que tu as modifié et qui marche à merveille, j'ai du mal à comprendre pourquoi de cette manière il n' y a plus besoin d'échappement. la seul solution qui me viens à l'esprit et que de cette manière on reste uniquement sur deux niveaux c'est ça?

L'échappement n'est nécessaire que s'il y a conflit entre les caractères d'un code avec les mêmes caractères d'un autre code imbriqué, donc entre JavaScript et HTML, si tu utilises des guillemets ou des apostrophes dans les deux, il faudra forcément échapper celles qui sont dans le code imbriqué sous peine d'avoir un conflit et une erreur d'interprétation du navigateur.

Dans le code que j'ai fait, il y a peu ou pas d'échappements parce que ce n,est que peu ou pas du tout nécessaire. Il faut aussi user de l'alternance entre les guillemets et les apostrophes, ça simplifie souvent la vie en éliminant pas mal d'échappements devenus sans objet.

Et comme je t'ai aussi dit un peu plus tôt, il a fallu séparer parce que la version avec trois imbrications ne fonctionnera probablement jamais. J'ajouterais aussi que de cette manière, le code est beaucoup plus lisible et facile à comprendre.

par **Babacar** » 13 sept. 2011, 22:49

Merci c'est vraiment sympa !

En fait dans la fonction que tu as modifié et qui marche à merveille, j'ai du mal à comprendre pourquoi de cette manière il n' y a plus besoin d'échappement. la seul solution qui me viens à l'esprit et que de cette manière on reste uniquement sur deux niveaux c'est ca?

par **Cyrano** » 13 sept. 2011, 22:28

Pas de soucis, toutes les questions que tu voudras.

En fait tu n'as pas appris que les principes d'échappement de caractères particuliers, tu as commencé à toucher au DOM (Document Object Model) et comme je t'ai dit je n,ai pas fait les tests mais il est à peu près certain que la méthode originale n'aurait jamais fonctionné même avec des échappements corrects.

Et puis l'autre point important, c'est que c'est de la programmation, donc on donne des instructions à une machine que en fin de comptes ne comprend que les zéro et les un : donc il faut une logique à toute épreuve et ce n'est pas forcément évident

par **Babacar** » 13 sept. 2011, 22:03

mille excuse cela fonctionne.
le lien de l'image n'était plus bon. cela te dérange si je te pose quelques question sur ta manière de procéder?

En tous cas merci beaucoup pour le temps que tu m'as accorder, c'est vraiment sympa je comprend déjà un peux mieux les echapements

par **Cyrano** » 13 sept. 2011, 22:00

Ben si tu n'as plus d'erreur, c'est déjà ça. Maintenant, il faudrait vérifier la source générée par JavScript. Pour ça, suos Firefox, il te faudrait la barre Web-Developer qui comporte un bouton exprès pour ça « Voir le code source généré » et tu pourras inspecter l'endroit du code HTML où devrait se trouver ton image : si le code est tel qu'attendu, c'est que c'est le chemin vers ton image qui n'est pas bon.

par **Babacar** » 13 sept. 2011, 21:56

Hum quand je regarde le déroulement de l'opération sur firebug il passe bien dans chaque opération pourtant l'image ne s'affiche pas....étrange.

par **Cyrano** » 13 sept. 2011, 21:32

Ok, comme je vois pas tous les éléments, je vais te suggérer une ré-écriture de ta fonction categorie1 de la manière suivante :

function categorie1()
{
    var img2 = '<a href="#"><img src="Decoupage/revues/revue1.png" alt="" /></a>';
    var maliste = '<a class="rev" id="revue0" href="#">Revue n°1</a><br />';
    if (document.getElementById("cat0")) 
    {
        document.getElementById("liste").innerHTML = maliste;
        document.getElementById('revue0').onclick = function()
        {
            fonction1(img2);
        };
    }
}

Qu'est-ce que j'ai modifié ?
d'abord j'ai viré le gestionnaire d'évènement onclick, ensuite j'ai mis le block à insérer de ce gestionnaire dans une variable. J'ai ensuite ajouté une autre forme de gestionnaire d'évènement après l'insertion de ce bout de code : l'idée, c'est qu'après l'insertion, ce bout de code est partie intégrante du DOM alors qu'avec le système de base, il était à parier que ça n,aurait pas fonctionné. Il devient donc accessible aux manipulations et ce coup ci ça devrait fonctionner correctement.

par **Babacar** » 13 sept. 2011, 21:17

il semble qu'il y ai un problème.
');">Revue n°1

voila ce quil 'affiche comme lien pour le deuxième bouton et quand je passe sous firebug en mettant un point d'arrêt il ne passe pas dans la fonction 1

Edit:visiblement dans la dernière ligne écrite le var il y avais un point virgule je ne sais pas si il était volontaire mais je l'ai retirer.

par **Babacar** » 13 sept. 2011, 21:06

Ok merci j'essaye ca et je te dit le résultat et j'aurais quelques questions si ca ne te dérange pas je ne suis pas certain d'avoir saisi tout ...

par **Cyrano** » 13 sept. 2011, 20:39

Tu y es presque.

Première étape, on va simplifier, reprenons le bout de code à problème de départ :

var maliste ="<a class=\"rev\" id=\"revue0\" href=\"#\" onclick=\"fonction1(<a href='#'><img src='Decoupage/revues/revue1.png'/></a>)\">Revue n°1</a></br>";

On a quoi une variable JavaScript qui vaut un bout de code HTML contenant lui-même un appel JavScript dans un gestionnaire d'évènement, lui-même contenant un paramètre qui est un bout de code HTML. Range les aspirines, on va dés-emboiter les poupées russes pour éclaircir tout ça.

Premier bout de code, le paramètre :

<a href="#"><img src="Decoupage/revues/revue1.png" alt=""/></a>

Comme on l'envoie en paramètre, JavaScript doit le traiter comme une chaine de caractères, passons donc à l'appel de la fonction :

fonction1();

C'est une chaine de caractère, donc le paramètre sera entre quotes simples :

fonction1('<a href="#"><img src="Decoupage/revues/revue1.png" alt=""/></a>');

La chaine HTML ne contenant elle-même pas de quotes simples, pas de conflit, tout va bien. Maintenant, cet appel de fonction est dans un gestionnaire d'évènement dans une balise HTML, ça se corse un peu :

<a class="rev" id="revue0" href="#" onclick="fonction1('<a href="#"><img src="Decoupage/revues/revue1.png" alt=""/></a>');">Revue n°1</a><br />

Là, on a un problème puisqu'on est en HTML et qu'il y a des guillemets dans la valeur de l'attribut onclick : on va les échapper :

<a class="rev" id="revue0" href="#" onclick="fonction1('<a href=\"#\"><img src=\"Decoupage/revues/revue1.png\" alt=\"\"/></a>');">Revue n°1</a><br />

On y arrive, dernière étape : tout ça doit former la valeur de ma variable JavaScript maliste : Comme on affecte une chaine à cette variable, on va l'encadrer de quotes simples : ça veut dire que toutes les quotes simples contenues dans cette chaine doivent impérativement être échappées, ce qui devrait donner ceci :

var maliste = '<a class="rev" id="revue0" href="#" onclick="fonction1(\'<a href=\"#\"><img src=\"Decoupage/revues/revue1.png\" alt=\"\"/></a>\');">Revue n°1</a><br />';

Essaye déjà comme ça et reviens avec le résultat, j'ai pas testé, mais tu devrais déjà avoir un résultat homogène avec tous les navigateurs.

par **Babacar** » 13 sept. 2011, 20:08

Donc si je comprend bien ce que tu veux que je fasse ca donnerais ca?

Etape 1:

je veux afficher une certaine image:

<div id="col3">
<img src="revue1.png"/>
</div>

Etape deux je veux que cette image sois afficher en fonction d'un bouton choisis:

<div id="col3">

</div>

<div id="col2">
<a id="btn0" href="#" onclick="afficheimage(<img src=\"revue1.png\"/>)">Revue n°1</a>
</div>

function afficheimage() 
   {
	 if (document.getElementById("btn0"))
     {
     document.getElementById("col3" ).innerHTML  =  toThis;
     }
   }

Et déjà la ca bloque...... je pige pas du tout l'échappement a croire ...

par **Cyrano** » 13 sept. 2011, 06:51

Non, ça ne fonctionne sous Firefox que par surprise à mon avis parce que ça ne devrait pas fonctionner plus que sur les autres.

Je t'ai suggéré d'avancer avec logique en partant du plus profond des imbrications de code jusqu'à l'extérieur. Montre-moi donc les trois étapes, code original et comment tu l'insères dans le niveau au dessus. N'oublie pas que chaque niveau de code doit être valide pour fonctionner. Et un autre indice : comme il y a imbrication multiple, il ne serait pas surprenant de devoir échapper certains échappements.

par **Babacar** » 13 sept. 2011, 00:43

Bon voila il semblerait que j'ai avancé dans mon problème hélas d'autres sont arrivés et avec des questions ...

Voila le code qui fonctionne sur firefox :

<script type="text/javascript"><!--
 function categorie1() 
   {
var maliste ="<a class=\"rev\" id=\"revue0\" href=\"#\" onclick=\"fonction1(<a href='#'><img src='Decoupage/revues/revue1.png'/></a>)\">Revue n°1</a></br>";
	
	 if (document.getElementById("cat0"))
     {
     document.getElementById("liste" ).innerHTML  =  maliste;
     }
   }

   
   
   
   function fonction1(toThis) 
   {
	 if (document.getElementById("revue0"))
     {
     document.getElementById("textDiv" ).innerHTML  =  toThis;
     }

   else if (document.all) 
     {
     document.getElementById("textDiv" ).innerHTML  = "erreur";
     }
   }

                                   <div class="categorie">
                                         <a class="cat" id="cat0" href="#" onclick="categorie1()">Revue n°1 à n°10</a></br>
                                  </div>
                                  <div class="revue" id="liste"></div>
                                  <div id="textDiv"></div>

Premier problème c'est que ce code ne fonctionne QUE SOUS firefox toutes versions confondus.
Donc ma premiere question serais qu'est ce qui cloche avec chrome opera et bien sur le maitre IE ....

Deuxième question je ne comprend pas pourquoi sous firefox cette ligne de code fonctionne

var maliste ="<a class=\"rev\" id=\"revue0\" href=\"#\" onclick=\"fonction1(<a href='#'><img src='Decoupage/revues/revue1.png'/></a>)\">Revue n°1</a></br>";

Alors que cette ligne ne fonctionne pas :

var maliste ="<a class=\"rev\" id=\"revue0\" href=\"#\" onclick=\"fonction1(<img src='Decoupage/revues/revue1.png'/>)\">Revue n°1</a></br>";

Corrigé moi si je me trompe mais l'image sans le lien devrait fonctionné aussi non?
Si vous pouvez me donné un coup de main ce serais vraiment sympa j'en deviens chauve

par **Babacar** » 12 sept. 2011, 19:39

ok je vais essayé ca

Probleme quote

Répondre

Étendre la vue Revue du sujet : Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote

Re: Probleme quote