11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour a tous.
J'ai un problème dans mon script avec IE6, j'utilise de l'AJAX mais je ne suis pas sur que ce soit utile (newbiee oblige) d'où mon post en section Javascript.
J'explique le soucis :
J'utilise un formulaire avec divers choix dont voici juste le debut pour illustrer
<form>
	<select name="ListUrl" size="1" onChange="ChangeUrl(this.form)">
		<option selected value="">&ndash; Liste animations &ndash;</option>
			<optgroup label="Video Flash">
				<option value="animation1">Animation1</option>
				<option value="animation2">Animation2</option> ...

Ensuite dans mon fichier script :
// JavaScript Document
function XmlRequest(){
	if(window.XMLHttpRequest) // If IE7, Mozilla, Safari, etc : Use native object
		return new XMLHttpRequest()
	else if(window.ActiveXObject) // ...otherwise, use the ActiveX control for IE5.x and IE6
		return new ActiveXObject("Microsoft.XMLHTTP")
	else { // XMLHttpRequest unsupported or javascript disable
		alert("XMLHttpRequest unsupported or javascript disable, check your browser.")
		return
	}
}

function ChangeUrl(Play)
{
	AnimList = Play.ListUrl.value; // Retrieve form value
	AnimLink = '../anims/'+AnimList+'.swf' // Add form value
	Play = XmlRequest()
	Play.open("GET", AnimLink, true)
	Play.onreadystatechange = function() {
anim_screen ='<object type="application/x-shockwave-flash" data="'+AnimLink+'" width="640" height="480">\n'+
'<param name="movie" value="'+AnimLink+'" />\n'+
'<param name="pluginspage" value="http://www.adobe.com/go/getflashplayer" />\n'+
'<param name="quality" value="high" />\n'+
'Install or update your flash plugin.\n'+
'</object>\n'
			{
			document.getElementById("anim_screen").innerHTML=anim_screen;
			}
	 	}
	Play.send(null);
	}

Donc le but du jeu est de recup la valeur de <option> du form qui n'est d'autre que le nom du fichier flash, lui ajouter l'adresse et l'extention .swf, mettre tous ça dans une balise <object> et <param> et envoyer le tout dans la bonne div.
Ça marche nickel sans aucune erreurs dans Firefox, mais dans IE6 j'ai un message d'erreur "Object doesn't support this property or method" à la ligne 22 car1 qui correspond a la ligne : '<param name="movie" value="'+AnimLink+'" />\n'+
J'ai chercher le pourquoi, un ami m'à dit que pour faire ce que je veux je n'aurai peux etre même pas besoin de AJAX. L'erreur en question a l'air de faire reference a Object de activeX et non de la balise <object> car j'ai essayer en la remplaçant par du simple texte et l'erreur reste. Vu que je suis debutant, je n'arrive pas a m'en sortir, quelqu'un aurait un idée svp ?
Modifié par Akeela (29 Jul 2007 - 18:03)
Modérateur
Salut, Smiley smile

Je te renvoie sur ce tuto où il est précisé qu'il faut éviter de soumettre un formulaire via onchange car cela pose quelques problèmes.

Le mieux serait que tu fasses le choix d'une option puis que tu soumettes le formulaire via un bouton de soumission. De là, tout ton traitement en Javascript, tu le fais en PHP et tu renvoies une nouvelle page contenant l'animation. Ainsi, ton application fonctionne JS désactivé.

En surplus, et s'il n'y a que le select dans ton formulaire, tu peux, si vraiment tu le souhaites, supprimer le bouton de soumission via JS et faire une requête Ajax dès le choix de l'option. Il faudra alors modifier ton programme PHP en ajoutant un paramètre supplémentaire pour dire que la requête s'effectue via Ajax.

Le principe est le suivant lors du traitement :

- Requête normale : on envoie une nouvelle page,
- Requête Ajax : on n'envoie que l'animation (qu'on prendra soin d'insérer correctement via JS à l'endroit de son choix).

Si tu ajoutes la partie Ajax, il faut ensuite rétablir les fonctionnalités de base du navigateur (boutons de navigation et bookmark)
Modifié par koala64 (29 Jul 2007 - 11:46)
Merci pour la réponse, j'ai bidouiller un peu et effectivement je n'est pas besoin d'utiliser l'AJAX. Juste en JS j'arrive a ce que je veux mais bien sur ça ne marche bien que dans Firefox, IE6 me met toujours la même erreure "Object doesn't support this property or method".
Voilà a quoi ressemble le script a présent :
// JavaScript Document
function ChangeUrl(Play)
{
	AnimList = Play.ListUrl.value; // Retrieve form value
	AnimLink = '../anims/'+AnimList+'.swf' // Add form value
anim_screen ='<object type="application/x-shockwave-flash" data="'+AnimLink+'" width="640" height="480">\n'+
'<param name="movie" value="'+AnimLink+'" />\n'+
'<param name="pluginspage" value="http://www.adobe.com/go/getflashplayer" />\n'+
'<param name="quality" value="high" />\n'+
'Install or update your flash plugin.\n'+
'</object>\n'
			{
	document.getElementById("anim_screen").innerHTML=anim_screen;
			}
	}

L'erreure est a la ligne 7 car 2. J'ai essayer aussi en mettant un bouton <input> mais ça ne change rien. Je ne vois vraiment pas ce qui dérange IE...
Modifié par Akeela (29 Jul 2007 - 17:21)
Modérateur
Akeela a écrit :
(...) effectivement je n'est pas besoin d'utiliser l'AJAX.
... ni JS qui ne t'apporte que des problèmes :

- Risque d'incompatibilité plus élevé que PHP
- Inaccessibilité pour ceux qui ne disposent pas du langage
Alors finalement j'ai résolut le problème de cette façon :
// JavaScript Document
function ChangeUrl(Play)
{
	AnimList = Play.ListUrl.value; // Retrieve form value
	AnimLink = '../anims/'+AnimList+'.swf' // Add form value
Result ='<object type="application/x-shockwave-flash" data="'+AnimLink+'" width="640" height="480">\n'+
'<param name="movie" value="'+AnimLink+'" />\n'+
'<param name="pluginspage" value="http://www.adobe.com/go/getflashplayer" />\n'+
'<param name="quality" value="high" />\n'+
'Install or update your flash plugin.\n'+
'</object>\n'
			{
	document.getElementById("anim_screen").innerHTML=Result;
			}
	}

Uniquement en changeant anim_screen par Result ça marche parfaitement soit dans ie6 que firefox.
Pour répondre a koala64, ce petit script en JS est exactement l'effet que je voulais avoir, faire une page php par anim et recharger la page a chaque fois ne me plait guère mais ceci dit c'est une technique que je garde de coter car je pense en avoir besoin dans un futur non lointain. Merci quand même Smiley cligne
Modérateur
Pour répondre à Akeela......

Le problème n'est pas de le faire en JS mais de ne pas le faire en PHP pour les problèmes cités plus haut ; on peut parfaitement combiner les deux techniques et donc obtenir l'effet souhaité.

... mais je comprend, il faut aller vite au risque de mettre des utilisateurs à la porte. Smiley ohwell