Discussion :

[cous_hub]

Bonjour a tous,

Merci du coup de pouce et de votre aide car cela fait un moment que je galère pour retirer cette erreur que je ne trouve pas de solution.

L'erreur est:
La requête XMLHttpRequest synchrone sur le thread principal est obsolète en raison de son impact négatif sur l'expérience de l'utilisateur final. Si vous avez besoin d'aide, consultez https://xhr.spec.whatwg.org/ .
***

Voici le fonctionnement que je désire avoir.
1/La page web s'affiche et avec un bouton on demande à la personne si elle est ok pour la géolocalisation=> function pos_ville()
2/Dès que j'ai la latitude et longitude
=>cookie de lat et lon =>si besoin a reprendre dans d'autre page (c'est du plus)=>PS(ceci risque de changer et d'évoluer dans le futur et c'est pas important.
=>je voudrai juste indiquer la ville et le code postal sur la page Web en cours ($.getScript)
PS: avec un lien que j'ai créé avec une réponse json qui donne ville,codepostal,rue (meme principe que le data gouv https://api-adresse.data.gouv.fr/reverse/?lon=2.37&lat=48.357")

=>jusqu'ici aucune erreur de console

3/C'est la mon problème et à partir de là tant que c'est pas résolu je ne veux pas coder la suite.
->je voudrai que quand la personne clique sur ok, on ne rafraichi pas la page ce qui fait
3.1/on voit le bouton ok geo
3.2/je clique dessus=>le bp disparait et un icone refresh apparait (facile avec $('.menu__btn').css('display','none')
3.3/j'attends les résultats de la geo
3.4/dès que c'est fini je fais disparaitre l'icone refresh pour charger un php avec un tableau correspondant au lieu ou elle habite (sans recharger toute la page) =>($("#contenu").load("autour_de_vous2.php",{})

4/Mais voilà il me déclare un problème synchrone a cause du load.
Sans le load tout fonctionne nickel.
J'ai mis un setinterval mais cela ne change rien.

Après ceci fonctionne est marche avec un refresh, si je passe tout en cookie ou en localStorage=>mais ça fait bourin, je voudrai plus de finesse.
La personne arrive sur la page (1er refreh).
Je clique sur le bouton (icône attente et actualisation) pour avoir un 2ème gros refresh (2secondes plus tard)
par contre jouer en gardant une partie de la page web me parait plus fin.


Avez-vous une idée pour éviter cette ligne d'erreur ?

Merci de votre aide

cordialement

cous_hub



voici le code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
41
42
43
44
45
46
47
48
function pos_ville()  {
  /*deb block icone jusque a actualisation avec autour_de_vous2 */
	$('.menu__btn').css('display','none');
	$('.icon-circle').css('display','none');
	$('#cercle_50').css('display','none');
  /*fin block icone jusque a actualisation avec autour_de_vous2 */  
  navigator.geolocation.getCurrentPosition(successHandler, errorHandler);  
}
 
 
function successHandler(position)  {
	const lien_a=getCookie('lienpos');	
	var lien=lien_a+"?lat="+ position.coords.latitude+"&lon="+position.coords.longitude;
	var value_pos=position.coords.latitude+','+position.coords.longitude;
	const d = new Date();
	  d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
	  let expires = "expires="+d.toUTCString();
	document.cookie = "position=" + value_pos + ";" + expires + ";domain=" + window.location.hostname + ";path=/;secure=true;samesite=none;";
 
 
	$.getScript( lien, function( data, textStatus, jqxhr ) {
		  //console.log( data ); // Data returned
		  //console.log( textStatus ); // Success
		  //console.log( jqxhr.status ); // 200
		  //console.log( "Load was performed." );
		  var data2 = JSON.parse(data);		  
		  document.getElementById("pos_ville").innerHTML=data2.city+'['+data2.postcode+']';
		  delay4();
	});	
	function delay4(){								 
			setTimeout(page2,100); //On attend 0.1s
	}
	function page2(){
	$("#contenu").load("autour_de_vous2.php",{});
	}
}
 
// Error Handler
function errorHandler(positionError)  {
   if(positionError.code == 1) { // PERMISSION_DENIED
       alert("Error: Permission Denied! " + positionError.message);
   } else if(positionError.code == 2) { // POSITION_UNAVAILABLE
       alert("Error: Position Unavailable! " + positionError.message);
   } else if(positionError.code == 3) { // TIMEOUT
       alert("Error: Timeout!" + positionError.message);
   }
}
//fin geolocalisation

[mathieu]

il vaut mieux charger tous le code javascript dés le début et passer les données avec un appel de fonction par exemple.
et pour faire tout ça vous n'avez pas besoin de passer par jquery, vous pouvez simplement utiliser fetch :
https://developer.mozilla.org/fr/docs/Web/API/fetch

donc ça donnerait quelque chose comme cela :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function successHandler(position)
{
 
	const lien_geoloc = "geoloc.php?lat="+ position.coords.latitude+"&lon="+position.coords.longitude;
 
	fetch(lien_geoloc)
		.then(reponse => reponse.json()) // analyse la réponse JSON de la géolocalisation
		.then(data2 => {
 
			document.getElementById("pos_ville").innerHTML = data2.city+'['+data2.postcode+']';
 
			return fetch("autour_de_vous2.php?ville=" + data2.city);
 
		})
		.then(reponse => reponse.text()) // récupère le code html généré par autour_de_vous2.php
		.then(html => {
 
			document.getElementById("contenu").innerHTML = html;
 
		})
	;
 
 
}