Aller au contenu

Probleme AJAX et Firefox avec innerHTML (bug de Firefox ?)

odl2000

Par odl2000
dans AjaX et JavaScript

 Partager

Sujets conseillés

odl2000

odl2000

Posté
Posté (modifié)

Salut,

Si vous connaissaient la solution ou que ce bug est connu, merci de me le faire savoir. Je vous remercie par avance.

Voici toutes les infos :

Vous pouvez voir la page résultat ici : http://odl2000.ovh.org/configurator/configurator.php

Donc j'ai le problème suivant qui n'apparait qu'avec Firefox (pas avec IE) et on m'a dit que sous Linux, il y a pas le problème.

Je m'explique.

J'ai créé un code qui détecte le système d'exploitation du visiteur, dans le cas où c'est Windows XP, alors je demande au visiteur de m'indiquer quel Service Pack est installé. Si il veut annuler car il c'est trompé sur le service pack ou que le système détecté n'est pas le bon, il peut cliquer sur "Si c'est faux cliquez ici !" et dans ce cas.

Donc normalement il n'y a jamais plus d'un menu déroulant de choix (soit le système, soit le service pack dans le cas où le système est XP)

Et lorsque l'on à choisit le service pack, il ne doit plus y avoir de menu déroulant de choix.

Or avec firefox, le menu déroulant du service pack ne disparait pas.

Vous trouverez ci*dessous des copies d'écran sous firefox et IE (IE étant ce qui doit se passer.)

J'ai beau chercher, je vois pas où mon code est faux.

Précision importante, j'utilise la librairie xajax.

----------------------------------------

Windows XP est bien détecté !

Voici le code source.

configurator.php :

<?php

require("configurator.common.php");

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title></title>

  <?php $xajax->printJavascript('../xajax/'); ?> 

</head>
<body>
	<div class="configurator">
		<div class="configurator_intro">
			<p class="titre_configurator_intro">Configurator</p>
			<p class="texte_configurator_intro">
				La configuration optimale de votre système se fait en 3 à 4 étapes.
			</p>
			<p id="choix_os">
			<?php
			echo get_text_choix_os_html($os);
			?>
			</p>
		</div>

		<div class="configurator_part">
			<p id="titre_configurator_part"></p>
			<p id="texte_configurator_part">
			</p>
			<p id="lien_etape_precedente"></p>
			<p id="lien_etape_suivante"></p>
		</div>
	</div>
</body>
</html>

configurator.server.php :

<?php
/*
configurator.server.php 
*/

function systeme($I_os="", $liste_choix=0)
{
	$objResponse = new xajaxResponse();

	// Construction du code HTML de la réponse
	if ($liste_choix != 0) {
		$reponse_html = get_liste_os_html('');
		$objResponse->addAssign("titre_configurator_part", "innerHTML", "" );
		$objResponse->addAssign("texte_configurator_part", "innerHTML", "" );
		$objResponse->addAssign("lien_etape_precedente", "innerHTML", "" );
		$objResponse->addAssign("lien_etape_suivante", "innerHTML", "" );
	}
	else if ($I_os='Windows XP') {
		$reponse_html = get_text_choix_os_html($I_os);
		$objResponse->addAssign("titre_configurator_part", "innerHTML", "" );
		$objResponse->addAssign("texte_configurator_part", "innerHTML", "" );
		$objResponse->addAssign("lien_etape_precedente", "innerHTML", "" );
		$objResponse->addAssign("lien_etape_suivante", "innerHTML", "" );
	}
	else {
		$reponse_html = get_text_choix_os_html($I_os);
		$objResponse->addAssign("titre_configurator_part", "innerHTML", get_titre_etape_1($I_os) );
		$objResponse->addAssign("texte_configurator_part", "innerHTML", get_text_etape_1($I_os) );
		$objResponse->addAssign("lien_etape_precedente", "innerHTML", "" );
		$objResponse->addAssign("lien_etape_suivante", "innerHTML", get_lien_etape_2($I_os, "") );
	}

	$objResponse->addAssign("choix_os", "innerHTML", $reponse_html);

	return $objResponse;
}

function sp($I_sp="", $reset=0)
{
	$objResponse = new xajaxResponse();

	// Construction du code HTML de la réponse
	if ($reset != 0) {
		$reponse_html = get_text_choix_os_html('Windows XP');
		$objResponse->addAssign("titre_configurator_part", "innerHTML", "" );
		$objResponse->addAssign("texte_configurator_part", "innerHTML", "" );
		$objResponse->addAssign("lien_etape_precedente", "innerHTML", "" );
		$objResponse->addAssign("lien_etape_suivante", "innerHTML", "" );
	}
	else {
		$reponse_html = get_text_choix_os_html('Windows XP', $I_sp);
		$objResponse->addAssign("titre_configurator_part", "innerHTML", get_titre_etape_1('Windows XP', $I_sp) );
		$objResponse->addAssign("texte_configurator_part", "innerHTML", get_text_etape_1('Windows XP', $I_sp) );
		$objResponse->addAssign("lien_etape_precedente", "innerHTML", "" );
		$objResponse->addAssign("lien_etape_suivante", "innerHTML", get_lien_etape_2('Windows XP', $I_sp) );
	}

	$objResponse->addAssign("choix_os", "innerHTML", $reponse_html);

	return $objResponse;
}

require("configurator.common.php");
$xajax->processRequests();
?>[/code]

[b]configurator.common.php :[/b]

[code]<?php
/*
configurator.common.php

*/

require_once ("../xajax/xajax.inc.php");

$xajax = new xajax("configurator.server.php");
$xajax->registerFunction("systeme");
$xajax->registerFunction("sp");

function get_os() {
$user_agent = $_SERVER['HTTP_USER_AGENT'];
$user_agents = array(
'Windows NT 5.1',
'Windows NT 5.0',
'Windows 2000',
'Windows 98',
'Windows NT 4.0',
'inux',
'Mac OS X',
'SunOS',
'FreeBSD',
''
);
$os = array(
'Windows XP',
'Windows 2000',
'Windows 2000',
'Windows 98',
'Windows NT 4.0',
'Linux',
'Mac OS X',
'Solaris',
'FreeBSD',
'Inconnu');

foreach ($user_agents as $i => $value)
if(@strpos($user_agent, $value))
break;

$user_os = $os[$i];

return $user_os;
}

function get_liste_os_html($I_os="") {
$tab_os = array(
'Inconnu',
'Windows XP',
'Windows 2000',
'Windows 95',
'Windows 98',
'Windows Me',
'Windows NT 4.0',
'Linux',
'Mac OS X',
'Solaris',
'FreeBSD');

$reponse_html = 'Veuillez nous indiquer votre sytème d\'exploitation : ';
$reponse_html .= '<form>';
$reponse_html .= '<select name="select_menu_deroulant_os" id="select_menu_deroulant_os" onChange="xajax_systeme(document.getElementById(\'select_menu_deroulant_os\').value);return false;">';
foreach ($tab_os as $i => $os) {
if ($os == $I_os) $ajout = ' selected="selected" ';
$reponse_html .= '<option'.$ajout.' value="'.$os.'">'.$os.'</option>';
}
$reponse_html .= '</select></form>';
return $reponse_html;
}

function get_text_choix_os_html($I_os="", $I_sp ="") {
if ($I_os == "") {
$texte = "Nous n'avons pas pu déterminer votre système d'exploitation, merçi de nous l'indiquer : ";
$texte .= get_liste_os_html($I_os);
}
else {
if ( $I_os == "Windows XP" && $I_sp != '' && $I_sp != 'Inconnu')
{
$texte = "Votre système d'exploitation est : ".$I_os." ".$I_sp;
$texte .= " (<a href=\"#\" onclick=\"xajax_systeme('','1');return false;\">Si c'est faux cliquez içi !</a>)";
}
else {
$texte = "Votre système d'exploitation est : ".$I_os;
$texte .= " (<a href=\"#\" onclick=\"xajax_systeme('','1');return false;\">Si c'est faux cliquez içi !</a>)";
if ( $I_os == "Windows XP" && ($I_sp == '' || $I_sp == 'Inconnu') ) {
$texte .= '<form>';
$texte .= '<select name="select_menu_deroulant_choix_sp" id="select_menu_deroulant_choix_sp" onChange="xajax_sp(document.getElementById(\'select_menu_deroulant_choix_sp\').value);return false;">';
$texte .= '<option value="Inconnu">Inconnu</option>';
$texte .= '<option value="Service Pack 1">Service Pack 1</option>';
$texte .= '<option value="Service Pack 2">Service Pack 2</option>';
$texte .= '</select></form>';
}
}

}
return utf8_encode($texte);
}

// ---------
// Etape 1
// ---------
function get_titre_etape_1($I_os="", $I_sp ="") {
$texte .= 'Etape 1 : Optimisation du système d\'exploitation';

return utf8_encode($texte);
}

function get_text_etape_1($I_os="", $I_sp ="") {
$texte = "";

if ($I_os == 'Windows 98') {
$texte .= "<span>1) Commencez par sauvegarder votre base de registre.</span>";
$texte .= "Allez dans le menu <span>Démarrer</span> -> <span>Programmes</span> -> <span>Accessoires</span> -> <span>Outils système</span> -> <span>Informations système</span>";
$texte .= "Dans le menu <span>Outils</span> sélectionnez <span>Vérification du registre</span>";
$texte .= "Répondre <span>Oui à la question <span>Voulez-vous faire une nouvelle sauvegarde ?</span>";

$texte .= "<span>2) Téléchargez le patch.</span>";
$texte .= "<a href=\"\">Cliquez ici pour télécharger le patch";
$texte .= "<span>3) Installez le patch.</span>";
$texte .= "Pour intaller le patch, il vous suffit de le <a href='http://www.7-zip.org/fr/'>décompresser</a>, puis vous allez trouver un fichier <span>Patch_registre_Win9xMe.inf</span>, il vous suffira de faire un click droit dessus et de choisir <span>Installer</span> dans le menu.";
$texte .= "<span>4) A suivre.</span>";
$texte .= "";
}
else if ($I_os == 'Windows XP' && $I_sp =='Service Pack 2') {
$texte .= "<span>1) Commencez par sauvegarder votre base de registre.</span>";
$texte .= "A SUIVRE";
}
else {
$texte .= "Rien à faire à l'étape 1, passez à l'étape 2";
}
return utf8_encode($texte);
}

// ---------
// Etape 2
// ---------
function get_lien_etape_2($I_os="", $I_sp ="") {
$texte = "";
$texte .= " (<a href=\"#\" onclick=\"xajax_etape2('','1');return false;\">Vers étape 2</a>)";
return utf8_encode($texte);
}


$os = get_os();

?>

Modifié par Dan
TheRec

TheRec

Posté
Posté

Bonsoir,

Il suffit de remplacer, dans "configurator.php" :

	  <p id="choix_os">
	  <?php
	  echo get_text_choix_os_html($os);
	  ?>
	  </p>

par

	  <div id="choix_os">
	  <?php
	  echo get_text_choix_os_html($os);
	  ?>
	  </div>

Et ton script fonctionnera ;) En fait il ne s'agit pas d'un "bug" Firefox (franchement... IE est plus souvent coupable que FF dans ces cas-là, je sais que ce n'est pas une raison pour condamner IE avant investigations, mais je me pose d'abord des questions sur IE avant de mettre en doute FF (ou Gecko en général)). Simplement, Firefox n'autorise pas une balise "<form>" à l'intérieur d'un "<p>", ceci car c'est ce qui est recommandé par le W3C (et parce que c'est logique, un paragraphe, sémantiquement ne doit pas contenir un formulaire) !

Donc Gecko (le moteur d'affichage de Firefox), s'occupe de fermer ton <p id="choix_os"> (à ta place, parce que c'est son boulot d'avoir quelque chose d'interprétable) juste après que toi tu décides d'y mettre un formulaire (par Javascript). Un "<div>" en revanche n'a pas cette limitation, donc ton problème disparait si tu en utilise un... D'ailleurs tu peux faire de même avec tous ces paragraphes qui sont destiné à contenir des formulaires (ou autres balises prohibées dans un "<p>"), à toi de voir ce que tu prévois d'y mettre et d'utiliser les bonnes balises en conséquences.

Au passage, et cela n'affecte en rien le fonctionnement de ton script, des lignes comme :

$objResponse->addAssign("titre_configurator_part", "innerHTML", "" );

peuvent tout à fait être remplacées par ceci :

$objResponse->addClear("titre_configurator_part", "innerHTML");

Pas que ce soit une faute grave, mais vu qu'une méthode existe, autant l'utiliser ;)

Bonne continuation.

odl2000

odl2000

Posté
  • Auteur
Posté

Je te remercie grandement !

De plus tes autres conseils sont tout à fait judicieux !

Encore merci, mon script est en réalité, bien plus long et plus complexe, je me voyait mal jeter 2 jours de travail à cause de ca !

rapide + correct + bonus bon conseils = parfait

:)

TheRec

TheRec

Posté
Posté

De rien ! Je ne suis pas un AJAX-convaincu (enfin s'il est implémenté en tenant compte de l'accessibilité, pourquoi pas), mais c'est toujours intéressant de faire des incursions dans des domaines que je connais moins (les framework AJAX/PHP)... enfin ton problème au final se trouvait plutôt sur un terrain que je connais (xHTML et sémantique) ;)

À bientôt.

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...