onclick et Firefox3

Question

Bonjour,

Le renard argenté m'énerve depuis qq temps, surtout que je n'ai trouvé pas de réponse sur le web.

J'ai un bouton avec un onclick
Code : HTML
<button type="button" style="border:solid 0px #FFFFFF; width= 70px; height= 33px; background:transparent; cursor:pointer; " onclick="insertEvent('ValiderDonnees.php', 'Donnee', '', 'Valider')"><img src="../Images/Valider.png" alt="Valider" width="70" height="33" border="0">
</button>

Le script est
Code : JavaScript
function insertEvent(FichierAMD, Source, Cible, ParentNoeud){
var source = Source;
alert(source);
var conteneur = ParentNoeud;
alert(conteneur);
}

Ceci fonctionne très bien avec IE, Safari, Opéra mais pas sous FF quelque soient les OS (Mac ou Window).

Avec un onclick alert("Bonjour") tout fonctionne correctement.

la page ou se situe le bouton est chargée via une routine ajax! Ceci peut)il expliquez cela.

Comment faire? merci pour votre aide

Afficher la suite

Mimiste · Answer

Salut

<button 

je pense que tu voulai mettre input comme balise et pas button ^^

<input type="button" style="border:solid 0px #FFFFFF; width= 70px; height= 33px; background:transparent; cursor:pointer; " onclick="insertEvent('ValiderDonnees.php', 'Donnee', '', 'Valider')"><img src="../Images/Valider.png" alt="Valider" width="70" height="33" border="0">
</input> 

Firefox est trés strict il ne laisse pas passer les erreurs et c'est tant mieu

(et aussi etonnant que cela puisse paraitre, un Firefox est un panda et pas un renard ^^)

Mimiste · Answer

Test avec ça

j'utilise un lien plutôt qu'un bouton caché, la balise input normalement tu ne peux pas t'en servir pour inclure une image a l'intérieur de cette manière ça fonctionne pour moi

Mimiste · Answer

Bizarre ça fonctionne très bien chez moi... ça me fait un alert avec écrit "Donnee" et un autre avec écrit "Valider"

Et le return false fonctionne aussi il empêche que le curseur remonte.. C'est l'écriture valide avec le lien pourtant

Tu a quand même re essayé avec ma version ?

Ton script JS tu l'a écrit de quelle manière, dans quelle balise et a quel endroit exactement ? 

tu avais des problème avec ton css aussi width= 70px; height= 33px, il faut mettre les :

Mimiste · Answer

La j'ai firefox 3.0.1 avec comme seul addon Firebug pour vérifier mon code, d'ailleurs si ce n'est pas déjà fais tu devrai tester cet addon il permet de déboguer le javascript et indique les erreurs de façon lisible

PhP · Answer

Brj Ceci fonctionne sur IE 7 et FF 2 sous XP
















code>--

PhP  
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...

PhP · Answer

Bah moi ce qui m'étonne c'est que ça puisse fonctionner avec un autre navigateur !
Lorsque tu récupères ta page via AJAX son contenu n'est pas interprété : ni le code HTML ni le JS

De plus si tu supprimes <head> .... </head> tu supprimes du coup les code JS non ? A moins que tu aies placé ton code JS entre <body> ... </body> ce que je ne fais évidemment jamais : pas de mélange HTML / JS

Donc place tous tes codes JS dans ta page principale qui appelle ton autre page via AJAX quite à faire un fichier externe .js

Ensuite que fais-tu du code HTML retourné par ta requête AJAX ? Tu l'ajoute directement via un node DOM ou via innerHTML à ta page principale ?

PhP · Answer

bjr Normalement ta page PHP retourne soit du texte soit du XML Si c'est du texte alors il s'agit soit de code HTML dont on force l'interprétation en l'ajoute à l'arbre DOM via innerHTML par ex , si c'est du Javascript on doit passer par eval() mais c'est lourd surtout avec le problème des guillemets : en général on retourne uniquement des données Javascript rarement du code et on utilise JSON Ex de code page demo.htm page data.php (note que le code JS se trouve dans le page demo.htm !!!!)

bronson3 · Answer

Merci pour ta patience à m'aider, c'est super sympa!

Ton exemple édité est super

Dernier point: comment activées les fonctions chargées dans la partie ajaxée via un script genre :
<script src="../aaaaaa.js" ....>aaaaaaaaa</script> les fonction se trouvant, évidemment dans aaaaa.js ?
Ceci dans le but de mutualiser des fonctions communes.
Encore 1 000 mercis pour ton aide
Cordialement

PhP · Answer

Tu mets tous les codes de toutes tes pages AJAX dans une ou plusieurs librairies que tu charges dans la page principale : tant pis si ça alourdit un peu la taille et le temps de chargement on est pas à 30ko près non plus

Ex

demo.js (la librairie)

function ajax_request()
{
	var request = false;

	if (window.XMLHttpRequest)
	{
		request = new window.XMLHttpRequest(); 
	}
	else 
	{
		if (window.ActiveXObject)
		{
			request = new ActiveXObject("Msxml2.XMLHTTP");

			if (!request)
			{
				request = new ActiveXObject("Microsoft.XMLHTTP");
	
			}
		}
	}

	return request;
}

function ajax_onReadyStateChange()
{
	switch (xhr.readyState)
	{
		case 4 :
			if (xhr.status==200) 
			{
				var elt=document.getElementById("resultat");
				elt.value= xhr.responseText;
				
				
				var elt=document.getElementById("code");
				elt.innerHTML= xhr.responseText;
			}
			break;
	}	
}




var xhr=null;

function ajax()
{	
	xhr = ajax_request();

	if (xhr) 
	{
		xhr.onreadystatechange = ajax_onReadyStateChange;
		var asynchrone = true;
		var method = "POST";
		var user = "";
		var password = "";
		var url = "data.php";
		xhr.open(method, url, asynchrone, user, password);
		
		if (method == "POST") 
		{
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		}
		var query="";
		xhr.send(query);
	}
}


function charger()
{
	ajax();
}


function insertEvent(FichierAMD, Source, Cible, ParentNoeud){ 
var source = Source; 
alert(source); 
}

la page principale : demo.htm

<html>
<head>
<style>

*
{
	font-family : arial;
	font-size : 10pt;

}


.bouton
{
	border-style:none;
	border-width:0px;
	width:70px; 
	height:33px; 	
	cursor: pointer;
	padding : 0px;
	margin: 0px;
	background:transparent; 
}
</style>
<script src="demo.js" type="text/javascript"></script>
</head>
<body >
<form>
<input type="button" onclick="charger()" value="Charger via AJAX">
<p>Résultat retourné par la requête AJAX</p>
<textarea id="resultat" rows="15" cols="80"></textarea>
<p>Code HTML interprété</p>
<div id="code">
</div>
</form>
</body>
</html>

la page data.php reste inchangée

Par soucis de clarification tu peux aussi utiliser une librairie (donc plusieurs fichiers .js) et les inclures dans la page principale en répétant l'instruction <script src="demo.js" type="text/javascript"></script> et en changeant le nom du fichier js of course !

Voilà c'est comme ça que je ferais car je trouve que c'est simple, de plus ton code est centralisé.

Après si tu as des données purement Javascript (par ex des paramètres, des varibales à initialiser, des tableaux, des enregistements issus d'un base de données) alors faut passer par JSON et eval() mais ceci est une autre histoire ...

PhP · Answer

Bjr

j'ai retesté mon ex et il marche sur IE et FF

Tu es sûr que ton serveur web est bien démarré ?

bronson3 · Answer

Bonjour je reviens vers toi poutr te remercier de ton aide.

J'ai été obligé de changer d'occupation pendant qq jours, ce qui explique mon silence.

Pour revenir à nos moutons, j'ai résolu le pb grâce à tes remarques, en fait FF ne chargeait pas tous les scripts ou pour le moins ce mélangeait les pédales.

Donc notamment la fonction "charger", ce qui provoquait l'inexécution de la fonction évidement.

Les raisons profonde de dysfonctionnement ne sot pas clairement définies, mais je pense qu'ayant une grosse 20 taine de JS en téléchargement  au chargement initiale, j'ai fait quasiment un JS pour chaque fonction importante...

Donc j'ai fait un gros nettoyage d'automne et tout est rentré dans l'ordre.

Encore merci pour tes conseils et bonne journée
Cdlt

PB Resolu mais je sais pas trop comment l'indiquez sur ce forum.

Onclick et Firefox3

11 réponses

Votre réponse

Discussions similaires

Newsletters