11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] InnerHTML, <select> et W3C

Bonjour à tous

Voilà je viens à vous aujourd'hui parce que je prend un soin particulier à ce que mes pages respectent le standard W3C XHTML 1.0 Transitional, et débutant en JavaScript, je me rend compte qu'un script que je crée ne passe pas cette validation.

Le but de ce bout de code est d'afficher une combo (<select>) de sélection de page si JavaScript est activé, et d'afficher en texte la page actuelle en cas de JavaScript désactivé, sachant qu'il y a un autre moyen de naviguer dans le script complet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>test</title>
	</head>

  <body>
    <?php
    echo "Contenu de la page ".($_GET['darQ_nb'] + 1)."
    <br />
    <br />
    Page
    <span id=\"darQ_tableau_page\">".($_GET['darQ_nb'] + 1)."</span>";

    $darQ_tableau_page_select = "<select onchange=\"document.location.href='?darQ_ord={$_GET['darQ_ord']}&amp;darQ_nb='+this.selectedIndex\">";
      for ($i=1;$i<=35;$i++)
        {
        $selected = "";
        if (($i - 1) == $_GET["darQ_nb"])
          {
          $selected = " selected=\"selected\"";
          }
        $darQ_tableau_page_select .= "<option{$selected}>{$i}</option>";
        }
      $darQ_tableau_page_select .= "</select>";
    echo "
    <script type=\"text/javascript\">
      document.getElementById('darQ_tableau_page').innerHTML = '".str_replace("'","\'",$darQ_tableau_page_select)."';
    </script>
     sur 35";
    ?>
  </body>
</html>


Ce script fonctionne sur IE 5.5+ - Firefox 3.0 (testé que celui là). En essayant de le valider sur W3C, je me retrouve avec ceci:

Line 15, Column 152: document type does not allow element "select" here.
…d=&amp;darQ_nb=\'+this.selectedIndex"><option>1</option><option>2</option><op...

Cependant, si je remplace le contenu du <span id="darQ_tableau_page"> par un <select> et désactiver le script, la page devient valide. J'en conclu donc que c'est le innerHTML qui me cause un soucis. Je m'en remet à vous pour m'aider à trouver une solution à mon problème.

Merci par avance.
Modifié par D@rkSn@ke (03 Jul 2008 - 14:54)
Le testeur W3C ne teste pas le JavaScript, ça m'étonnerait donc que ça vienne de innerHTML.

Le problème semble plus d'un problème de placement de "select" dans le document. As-tu essayé de la placer dans un <form> ?

Mais ça m'étonnerait car la documentation précise bien qu'un SELECT peut être placé en dehors d'un FORM : "The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces."
Salut,

Pour résoudre ton problème, ton code PHP ne nous intéresse pas. Seul le code HTML généré, ou encore mieux une page en ligne peut nous aider.

A mon avis, ton problème de validation est dû au code HTML contenu dans ton élément script. Voir ce sujet par exemple : "Google map et XHTML 1.0 strict"
Modifié par Julien Royer (03 Jul 2008 - 14:33)
versgui, merci pour ta réponse, mais des balises form n'ont pas corrigé le problème. De plus, si je met le <select> "en dur" dans le code, et non pas intégré par JavaScript, la page est rendue valide.

En revanche, un grand merci à Julien Royer qui a trouvé d'où vient le problème Smiley ravi . L'encadrer de balise commentaire a réglé le problème, et a rendu la page valide... ce qui entraine une autre question de ma part: "Pourquoi le fait de mettre en commentaire le code à validé la page ?"
Tu peux jeter un coup d'oeil à l'article de la FAQ à ce sujet (Comment encadrer les blocs de code JavaScript et CSS ?) si tu veux en savoir plus. Le problème est qu'il n'est pas très pédagogique (je peux le dire, c'est moi qui l'ai écrit Smiley cligne ).

Soit dit en passant, pour éviter des soucis avec certains navigateurs, il faut échapper la chaîne "</" dans ton code JS :
el.innerHTML = "<option>Bleu</option>"; // à éviter
el.innerHTML = "<option>Bleu<\/option>"; // préférer ça
Merci pour tes réponses courtes et précises, je tacherai de mettre ça en œuvre à présent Smiley cligne . Merci encore.
Sujet clos
Aller à