Changer une partie de la page: pb firefox

Résolu

dragazor -
dragazor - 30 juil. 2009 à 23:58

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

A voir également:

Changer une partie de la page: pb firefox
Changer dns - Guide
Supprimer une page word - Guide
Changer de carte graphique - Guide
Imprimer tableau excel sur une page - Guide
Changer l'orientation d'une seule page word - Guide

9 réponses

Réponse 1 / 9

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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;

}
}

dragazor

toujours le meme problème, impossible avec FIREFOX

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.

Réponse 3 / 9

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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;

}
}

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

dragazor

Autant pour moi, sur IE, il m'affiche une petite page avec mon code sur IE. Mais il n'affiche rien sur FIREFOX

Réponse 4 / 9

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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?

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

Posez votre question

Réponse 5 / 9

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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.....

dragazor

sous Firefox lorsque je clique sur mon bouton, il m'affiche effectivement "on appelle bien la fonction Ajax".

dragazor > dragazor

g 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.

Réponse 6 / 9

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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');

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?

dragazor

alo? alain?

Réponse 7 / 9

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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);

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.

Réponse 8 / 9

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

ç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 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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

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.

Votre réponse