Execution Javascript Fermé

Question

Bonjour, Je travaille sur une carte sur laquelle on déplace un bonhomme. Afin d'éviter les bourrinage de lien sur une des flèches de déplacement je donne la fonction javascript suivante sur la

qui contient l'image onclick=deplacement(). function deplacement() { document.GetElementById('test').style.backgroundColor = "gold"; SetInnerHTML(.....); --> actualise la carte document.GetElementById('test').style.backgroundColor = "green"; } La fonction SetInnerHTML est assez lente à executer d'ou mon changement de couleur pour montrer un avant et un après. Le problème reste que je clique, j'attends (surement le chargement de setinnerhtml) et paf! il m'execute les 3 fonctions... Je souhaiteria qu'il fasse la chose suivante sur clic: - passage en "gold" - chargement et affichage de la carte - passage en "green" Actuellement il fait: - chargement - passage en "gold", affichage de la carte, passage en "green" Merci d'avance de votre aide.

kij_82 · Answer

Bonjour,

Si je comprends bien ton chargement et l'affichage se font dans la fonction SetInnertHTML c'est ca ?
Pour te répondre plus facilement, il faudrait que l'on sache ce qu'il est fait (point de vue exécution) dans ta fonction innerHTML.
Peux-tu nous montrer le code de cette fonction ?

aragornatm · Answer

[code]setInnerHTML = function(divContent, HTML) {
divContent.innerHTML=HTML;
var All=divContent.getElementsByTagName("*");
for (var i=0; i<All.length; i++) {
All[i].id=All[i].getAttribute("id")
All[i].name=All[i].getAttribute("name")
All[i].className=All[i].getAttribute("class")
}
var AllScripts=divContent.getElementsByTagName("script")
for (var i=0; i<AllScripts.length; i++) {
var s=AllScripts[i];
if (s.src && s.src!="") {
// Précédement asynchrone, mis en synchrone pour éviter des probl&#269;mes de dépendances de scripts
eval(getFileContent(s.src))
}
else {
eval(s.innerHTML)
}
}
}

var pickRecentProgID = function (idList){

var bFound = false;
for(var i=0; i < idList.length && !bFound; i++){
try{
var oDoc = new ActiveXObject(idList[i]);
o2Store = idList[i];
bFound = true;
}catch (objException){

};
};

if (!bFound)
throw ("Aucun ActiveXObject n'est valide sur votre ordinateur, pensez mettre jour votre navigateur");
idList = null;

return o2Store;
}

// Retourne un nouvel objet XmlHttpRequest
var GetXmlHttpRequest_AXO=null;
var GetXmlHttpRequest=function () {
if (window.XMLHttpRequest) {
return new XMLHttpRequest()
}
else if (window.ActiveXObject) {
if (!GetXmlHttpRequest_AXO) {
GetXmlHttpRequest_AXO=pickRecentProgID(["Msxml2.XMLHTTP.5.0", "Msxml2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"]);
}
return new ActiveXObject(GetXmlHttpRequest_AXO)
}
return false;
}


getXhr=GetXmlHttpRequest;

function getFileContent(url) {
var Xhr=GetXmlHttpRequest();
Xhr.open("POST",url,false);
Xhr.send(null);
return Xhr.responseText;
}[/code]

Après pas mal de recherches sur ajax le pb viendrait de:

[code]Xhr.open("POST",url,false);[/code]

Ajax est en mode synchrone ce qui expliquerait l'éxécution après attente de toutes mes fonctions. Si je le passe en "true" pour asynchrone la fonction SetInnerHTML() ne fonctionne plus :/

Si quelqu'un a une idée je suis preneur, merci!

kij_82 · Answer

Re,

Je comprends pas trop bien comment tu utilise les objets XHR, mais voici comment moi je l'utilise et ca fonctionne généralement plutot bien pour ce qui est de raffraichir des maps.

Tu as d'un coté ta fonctione javascript qui est appelée lorsque tu clique sur une case :

function bouge ( ){
    
 ...
 // --- Appel au script PHP chargé de faire les modifs en base de données, et le raffraichissement

	var xhr_object = null; 
	     
	if(window.XMLHttpRequest) // Firefox 
	   xhr_object = new XMLHttpRequest(); 
	else if(window.ActiveXObject) // Internet Explorer 
	   xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else { // XMLHttpRequest non supporté par le navigateur 
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
     return; 
	} 
	 
	xhr_object.open("POST", "./traitement/T_loadResults.php", true);
	     
	xhr_object.onreadystatechange = function() { 
	   if(xhr_object.readyState == 4) {
			//alert(xhr_object.responseText); // DEBUG MODE
			//document.write(xhr_object.responseText);

			eval(xhr_object.responseText);  // --- ici s'execute le code que tu "affiche" dans ton script PHP

		 }
	} 
	 
	xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
	
	var data = null;  //
	
	xhr_object.send(data);

     }
}
 

Cette fonction fait appel au script PHP elle même, et exécute au "retour" du script = fin du script tout ce qui est "affiché", c'est à dire en sortie, du script PHP.
Ainsi, tu n'a qu'à appeller ton script PHP, mettre à jour ta base de données dans ce script, ainsi que ta page HTML.
Un petit exemple pour comprendre, si tu met dans ton script PHP la ligne suivante :

 <?php
    echo "alert('coucou');";
 ?>


Tu t'appercevra que tu as une popup d'alerte avec le message "coucou". Libre à toi de faire le reste (innertHTML)

aragornatm · Answer

Merci de ta réponse, ça m'a l'air bien plus clair ainsi!

Une dernière question: est ce que le eval(xhr_object.responseText); peut me recracher du javascript fonctionnel + du Html?

kij_82 · Answer

Oui et non, ca évalue "comme si c'était du javascript", donc si tu recrache des commandes non javascript, ca te mettra une erreur.
Mais tu peux modifier le contenu de tes DIV via commande javascript (pour faire ton innertHTML), ainsi tu aura un raffraichissement automatique de ta page sans pour autant avoir rechargé celle ci (c'est le but recherché) )

En cas d''erreur, elle n'apparait pas sur ta page, et au cas ou "rien" ou peu de chose apparait sur ta page, il faudra voir s'il n'y a pas d'erreur, et pour ca tu passe en mode "debug" en décommentant le alert(xhr_object.responseText);

aragornatm · Answer

Merci beaucoup de ton aide ça marche nickel !

Execution Javascript

6 réponses

Discussions similaires