Changer une partie de la page: pb firefox

Résolu

dragazor -

Bonjour à tous,
j'essaie de changer uniquement une partie de ma page lorsque l'on clique sur un bouton au lieu d'appeler une autre page. J'ai pu trouver un script permettant de faire cela, le seul problème c'est que firefox n'applique pas ces changements, en revanche et pour une fois il n'y a que IE qui comprenne ce qu'il faut faire.
Je vous laisse le code en espérant que vous pourrez m'aider. le coté qui doit changer est le coté droit(div premier_droit) qui doit devenir cote_droit.php.
Je vous remercie par avance.

jejoue.php:

</head>
<script type="text/javascript">
function envoieRequete(url,id){
var xhr_object = null;
var position = id;
if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
else
if (window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");

// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function(){
if ( xhr_object.readyState == 4 ){
// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
// dans le cas du get
xhr_object.send(null);
}
</script>
<body bgcolor="#7AAFFE">
<div id="all">
<div id="background">
<a href='page_telechargement/telecharger.php?'><img style="margin-top:554px; margin-left:10px; border:none;" src='images/telecharger.png' alt='Telecharger'></a>

</div>
<div id="premier_droit">
<a href='' onclick="envoieRequete('cote_droit.php','premier_droit');"><img style="margin-top:554px; margin-left:25%; border:none; " src=
'images/je_joue.png' alt='Telecharger'></a>
</div>
</div>

</body>
</html>

cote_droit.php:

</head>

<body>
<div id="deuxieme_droit" style="background-image:url(images/cote_changeant2.png); background-repeat:no-repeat; width:250px; height:614px;">
<h2 align="center" style="color:#F00">Questions du Jeu</h1>
<form method="post" action="" style="color:#F00" >
Question 1:<br /> Quelle est la capitale de la martinique?
<input type="text" name="q1" size="25"/><br/><br/>
Question 2: <br/> Quelle est la commune la plus au sud?
<input type="text" name="q2" size="23"/><br/><br/>
Question 2: <br/> Quelle est la commune la plus au nord?
<input type="text" name="q3" size="23"/><br/><br/>
<input type="image" name="send" value="Valider" style="margin-top:210px; margin-left:20%; border:none;" img src="images/valider.png"/><br/><br/>
</form>

Afficher la suite

9 réponses

Réponse 1 / 9
Alain_42
il manque un test pour etre sur que la réponse soit biun reçue completement

remplaces:
f ( xhr_object.readyState == 4 ){
// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}

par
```
 if (xhr_object.readyState == 4) {
		if (xhr_object.status == 200) {

// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;

}
}
```
0
1. dragazor
  
  toujours le meme problème, impossible avec FIREFOX
  
  0
Réponse 2 / 9
dragazor
merci alain,
c'est vrai que je n'ai pas compris tout le script, alors jcomprends pas trop ce que tu m'as fait changer.
En revanche ca ne résoud pas mon problème, le morceau de page sur le coté droit n'apparait toujours pas dans firefox alors que IE si.
0
Réponse 3 / 9
Alain_42
mets une trace:

pour voir si on reçoit bien qq chose
```
if (xhr_object.readyState == 4) {
		if (xhr_object.status == 200) {

//TEST
alert("Donees reçues: "+xhr_object.responseText);
//ca devrait t'afficher une boite avec le texte attendu

// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;

}
}
```
0
1. dragazor
  
  euh j'ai rajouter le teste que tu m'as transmis mais ca ne change rien du tout et ne m'affiche pas d'alerte, ni sur firefox ni sur ie
  
  0
2. dragazor
  
  Autant pour moi, sur IE, il m'affiche une petite page avec mon code sur IE. Mais il n'affiche rien sur FIREFOX
  
  0

Alain_42

change tout ton script javascript par celui çi:

<script type="text/javascript">
function envoieRequete(url,id){
var xhr_object = null;
var position = id;
//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            xhr_object = new XMLHttpRequest();
            if (xhr_object.overrideMimeType) {
                xhr_object.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
            }
        } else if (window.ActiveXObject) { // IE
            try {
                xhr_object = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!xhr_object) {
            alert('Abandon :( Impossible de créer une instance XMLHTTP');
            return false;
        }



// On ouvre la requete vers la page désirée
xhr_object.open("GET", url, true);
xhr_object.onreadystatechange = function(){
if ( xhr_object.readyState == 4 ){
	if (xhr_object.status == 200) {
	//TEST
alert("Donees reçues: "+xhr_object.responseText);
//ca devrait t'afficher une boite avec le texte attendu

// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
document.getElementById(position).innerHTML = xhr_object.responseText;
}
}
}
// dans le cas du get
xhr_object.send(null);
}
</script>

dragazor
je te remercie de prendre ton temps pr m'aider,
tu as testé le script que tu viens de me donner sur FIREFOX? parceque ca ne fonctionne pas pour moi.
Avec IE ca passe mais avec firefox non.
Ce qui m'embète c'est que la personne qui m'a demandé de faire le site veut que l'affichage se fasse ainsi et je n'y connais rien dans ces scripts.
Aussi quand je lance indépendamment la petite partie qui vient après (cote_droit.php) sur firefox ca fonctionne, donc je suis quasi sur que c'est le script qui pose problème à firefox, mais comment faire pour que ca passe?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

La communauté CCM répond en moyenne en moins de 2h.

Posez votre question
Réponse 5 / 9
Alain_42
j'ai bien sur adapté un script qui fonctionne parfaitement chez moi sur IE et FF, pour l'adapter à ton cas

rajoutes une trace juste au début de la fonction
```
function envoieRequete(url,id){

alert("on appelle bien la fonction Ajax !");

etc.....
```
0
1. dragazor
  
  sous Firefox lorsque je clique sur mon bouton, il m'affiche effectivement "on appelle bien la fonction Ajax".
  
  0
2. dragazor
  
  @dragazorg oublié de préciser qu'après avoir affiché "on apelle bien la fonction ajax", la page rester la même. et ma partie ne change pas.
  
  0
Réponse 6 / 9
Alain_42
remplaces la ligne:

xhr_object.open("GET", url, true);

par celles ci:
```
                xhr_object.open('POST', url, true);		
		xhr_object.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
```
0
1. dragazor
  
  toujours rien. Il n'y a que la petite phrase AJax. Je n'y comprends rien.
  Si ca passe pour toi pk ca ne passe pas pr moi?
  
  0
2. dragazor
  
  alo? alain?
  
  0
Réponse 7 / 9
Alain_42
j'ai essayé avec ton script effectivement ça ne passes pas non plus chez moi sur FF

bizarre je n'y comprend rien

j'ai juste vu une anomalie:

les lignes:
// On ouvre la requete vers la page désirée
xhr_object.open('POST', url, true);
xhr_object.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

devraient etre juste avant :

// dans le cas du get
xhr_object.send(null);
0
1. dragazor
  
  Passe toujours pas. Bon bin jc pas cmt jv faire.
  Dernière petite chose tu pourrais m'aiguiller pour savoir ce qu'il faut que je recherche pour avoir un effet de ce genre autre que le script que j'avais trouvé vu qu'il ne fonctionne pas.
  
  0

Alain_42

ça marche comme ça j'ai repris caremnt ma fonction javascript à moi et j'ai modifié le dcotype en debut de page et surtout

<a href ="javascript:

<!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" lang="fr"><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />>
</head>
<script type="text/javascript">

function envoieRequete(url,id){
//alert("on appelle bien la fonction Ajax !");

var http_request = false;
		//créer une instance (un objet) de la classe désirée fonctionnant sur plusieurs navigateurs
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');//un appel de fonction supplémentaire pour écraser l'en-tête envoyé par le serveur, juste au cas où il ne s'agit pas de text/xml, pour certaines versions de navigateurs Mozilla
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert('Abandon :( Impossible de créer une instance XMLHTTP');
            return false;
        }
        http_request.onreadystatechange = function() { traitementReponse(http_request,id); } //affectation fonction appelée qd on recevra la reponse
		// lancement de la requete
		http_request.open('POST', url, true);
		http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	data="";
        http_request.send(data);


}
function traitementReponse(http_request,id) {
	
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
					//TEST
			//alert("Donees reçues: "+http_request.responseText);
			//ca devrait t'afficher une boite avec le texte attendu

			// j'affiche dans la DIV spécifiées le contenu retourné par le fichier
			document.getElementById(id).innerHTML = http_request.responseText;
				
		} 
		else {
                alert('Un problème est survenu avec la requête.');
        }
    }
}

</script>
<body bgcolor="#7AAFFE">
<div id="all">
<div id="background">
<a href='page_telechargement/telecharger.php?'><img style="margin-top:554px; margin-left:10px; border:none;" src='images/telecharger.png' alt='Telecharger'></a>

</div>
<div id="premier_droit">
<a href="javascript:envoieRequete('cote_droit.php','premier_droit');"><img style="margin-top:554px; margin-left:25%; border:none; " src=
'images/je_joue.png' alt='Telecharger'></a>
</div>
</div>

</body>
</html>

Réponse 9 / 9
Alain_42
en fait après réflexion le pb doit venir de tes liens <a href

il ne faut pas mettre <a href='' onclick=

mais <a href="javascript:envoie..... et ne pas mettre onclick

Firefox fait l'opération du href qui apele la meme page et l'opération onclick et il doit y avoir conflit à un moment
0
1. dragazor
  
  alors la moi je dis chapo!
  sincèrement je te remercie alain! ca fonctionne parfaitement.
  Je n'aurais pas pu trouver tout seul.
  Merci encore.
  
  0

Changer une partie de la page: pb firefox

9 réponses

Discussions similaires

Newsletters