Excécuter une fonction JS dans un fichier PHP "appelé" en Ajax

Version imprimable

25/05/2011, 17h24
Voyageur Du Net

Excécuter une fonction JS dans un fichier PHP "appelé" en Ajax
Bonjour,

J'aimerais afficher une carte Google Maps (via l'API JS V3 : http://code.google.com/intl/fr/apis/...on/javascript/) montrant l'emplacement des résultats retournés par un moteur de recherche.

Avec une adresse postale, je parviens à afficher une carte sur une page normale.
En gros, la fonction initialize() est exécutée dès que la page est chargée (<body onload="initialize()">)

Le problème, c'est que les résultats du moteur en question sont extraits et affichés en Ajax. Je vous schématise les choses :

1/ Le fichier moteur.php contient le formulaire de recherche ainsi que le code Ajax

2/ Le fichier résultats.php contient le script php qui extrait les résultats et les met en forme. Il contient également le script Google Maps qui est censé afficher la carte en fonction des résultats.

3/ Comme vous l'avez sans doute compris, le code Ajax de moteur.php récupère les requêtes des internautes, les envoie à résultats.php et affiche ensuite le contenu généré par ce fichier sur moteur.php

=> Impossible d'afficher la carte Google Maps.

J'ai essayé, en vain :

- <body onload="initialize()"> dans moteur.php
- <img src="pixel-transparent.gif" onload="initialize()" /> dans resultats.php

Pensant qu'il y avait peut-être un conflit avec le onload attribué à une image du formulaire (qui sert à exécuter l'Ajax), j'ai exploré la piste des fonctions anonymes.

Avec un code qui ressemble à :
Code:

1 2 3 4 5 6 7 8 9 10 (function() { function initialize() { ... } } )();
Ca ne marche pas mieux. Le <div> qui est censé contenir la carte reste désespérément vide :(

Voyez-vous une solution ?

Merci par avance pour votre aide
25/05/2011, 21h09
RomainVALERI

Citation:

Envoyé par Voyageur Du Net

J'ai essayé, en vain :

- (1) <body onload="initialize()"> dans moteur.php
- (2) <img src="pixel-transparent.gif" onload="initialize()" /> dans resultats.php

La solution (1) est a priori la démarche classique, OK sur le principe. Si ça ne marche pas, montre-nous le code de l'appel AJAX (le JS généré, pas un puzzle en aveugle à base de php :aie:).

La solution (2) fonce dans le mur d'une manière qui m'était non seulement inconnue mais inimaginée*. :mouarf:
Tu essayais de déclencher un appel ajax mettant à jour la page moteur.php, depuis la page resultats.php s'appelant, en quelque sorte elle-même (:fou: ?) par AJAX depuis le serveur ? (:zen:) Mais si je suis passé à côté de l'idée, n'hésite pas, hein... :)

* soit dit sans malice : je suis moi-même un perpétuel ingénu :oops: :mrgreen:

Salut Romain,

Merci beaucoup pour ta réponse.

Voici le code Ajax présent dans moteur.php :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<script type="text/javascript"> 
var contenu = document.getElementById("contenu");
function getXhr(){
var xhr = null; 
if(window.XMLHttpRequest) // Firefox et autres
xhr = new XMLHttpRequest(); 
else if(window.ActiveXObject){ // Internet Explorer 
   try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
	            }
		}
else { // XMLHttpRequest non supporté par le navigateur 
   alert("Votre navigateur est incompatible avec notre moteur"); 
   xhr = false; 
	} 
return xhr
}
function go(){
var xhr = getXhr()
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
//alert(xhr.responseText);
contenu.innerHTML = xhr.responseText;
}
}
xhr.open("GET","hotel-extract-results.php?sort=price_ascending&page=1&city=londres&hotel=&adults=2&children=0&roomtype=Double&rating=1&time_in=1306400300&time_out=1306486700",true);
xhr.send(null);
}
</script>
<img src="/images/pictos-site/logo_transparent.gif" width="0" height="0" alt="" onLoad="go();" />

Pour voir concrètement le script en fonctionnement, voici le lien :
http://www.voyage-net.com/bons-plans/hotel.php

Il faut lancer une recherche pour que l'Ajax apparaisse. Je pense que tu l'auras deviné, mon objectif est d'afficher les hotels sur une carte Google Maps.

26/05/2011, 16h28
RomainVALERI

Si ce code est placé dans le head de ta page, le premier getElementById échoue car le DOM n'existe pas encore, et la référence globale contenu est donc vide au moment de l'appel AJAX. ^^

Si ce n'est pas le cas, dis-le, on continue à chercher ;)

Encore merci Romain,

Arf, j'ai mal compris et je me suis mal exprimé.

Le code Ajax fonctionne : le moteur est fonctionnel et permet d'afficher des offres d'hotels répondant aux recherches des internautes.

Ce que je n'arrive pas à faire fonctionner, c'est le script JS de Google Maps qui doit afficher la carte.

Pour mes tests, j'ai pris un code simplifié n'affichant une carte qu'avec un seul marker. Dans resultats.php, (enfin hotel-extract-results.php pour être plus précis...) j'ai donc :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<h2>Localisation des hotels</h2>
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
(function(){
function initialize_map() {
// Defintion de la taille de la carte pour ordi ou mobile
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("plan_hotels");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '300px';
}
var geocoder;
var map;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {zoom: 1, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP}
var address = '<?php echo $adresse[1]; ?>';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
myOptions.center = results[0].geometry.location;
myOptions.zoom = 14;
map = new google.maps.Map(document.getElementById("plan_hotels"), myOptions);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} 
});
}
window.onload = initialize_map;
})();
</script>
<div id="plan_hotels" style="width:100% ; height:200px ; border:1px black solid">
</div>