window.close() sur une popup, commande asyncrone ???

[Anard]

Bonjour,

Toujours aussi débutant en Javascript, j'avance petit à petit mais bloque très très souvent !

Je suis actuellement en train de travailler sur une fenêtre popup qui attend un clic sur un input button.
Le clic sur le bouton déclenche des modifications dans le DOM de la fenêtre qui a appelé la popup puis ferme la fenêtre.

Voici qques bouts de script :

Code

//Fenêtre parente :
<p><input type="button" id="takepos" name="takepos" value="Confirmer les coordonnées GPS sur la carte" onclick="window.open('accueil-form.html','new_window','width=600px,height=600px,toolbar=no,location=no,directories=no,status=no,men
ubar=no,scrollbar=no,resizable=yes');" /></p>

//Fenêtre popup :
<p><input type="button" value="Fermer et valider la position" onclick="fermeEtEnvoieCoords();" /></p>

//Script JS :
function fermeEtEnvoieCoords() {
      position = marker.getPosition()
      latitude = position.lat();
      longitude = position.lng();

      var adresse='';
      var cp='';
      var ville='';
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({'latLng': position}, function(results, status){
          if( status == google.maps.GeocoderStatus.OK) {
              for (var i=0; i < results[0].address_components.length; i++)
              {
                  if (results[0].address_components[i].types[0] =='street_number')
                    adresse += results[0].address_components[i].long_name + ', ';
                  else if (results[0].address_components[i].types[0] =='route')
                    adresse += results[0].address_components[i].long_name;
                  else if (results[0].address_components[i].types[0] =='postal_code')
                    cp += results[0].address_components[i].long_name;
                  else if (results[0].address_components[i].types[0] =='postal_code_prefix')
                    cp = results[0].address_components[i].long_name + '-' + cp;
                  else if (results[0].address_components[i].types[0] =='locality')
                    var ville = results[0].address_components[i].long_name;
              }
              window.opener.document.getElementById('adresse').innerHTML = adresse;
              window.opener.document.getElementById('cp').value = cp;
              window.opener.document.getElementById('ville').value = ville;
          }
      });
      window.opener.document.getElementById('latitude').value = latitude.toFixed(6);
      window.opener.document.getElementById('longitude').value = longitude.toFixed(6);
      window.close();
          //setTimeout(window.close, 1000);
}

Si je ne ferme pas la fenêtre popup, la modification du DOM de la fenêtre parente (window.opener) fonctionne très bien.
En revanche, si je la ferme, ça semble arrêter le script en avance parce que plus rien ne se passe.
J'ai ajouté un timeout pour tenter d'attendre la fin du script et ... CA FONCTIONNE !!!

C'est bien tout ça, mais sur un ordinateur un peu lent, peut-être que le script mettra plus d'une seconde à s'exécuter et donc, la fenêtre se fermera en arrêtant le script prématurément.

Y a-t-il un moyen de lui demander de fermer la fenêtre à la fin du script (sans attendre ni plus ni moins que nécessaire) ?
Comment se fait-il que le code window.close soit exécuté avant window.opener.document.getElementById(...) alors qu'il est situé après ?

Merci beaucoup pour vos éclairages !

Ce message a été modifié par Anard - 1 Dec 2015, 19:52.

[scoch]

Salut,

pourquoi utilises-tu une popup ? Ça t'apporte des problèmes et souvent les navigateurs peuvent bloquer les popups.
Tu devrais regarder du côté d'une fenêtre modale.

[Jaypee]

... et de jQuery
Tu sembles réinventer Ajax et la construction d'interface graphique. Ces bibliothèques JS sont relativement faciles à utiliser pour les choses simples.

Par ex: https://techcodegeek.wordpress.com/2014/12/...google-geocode/
J-P

Ce message a été modifié par Jaypee - 4 Dec 2015, 07:20.

[scoch]

Anard semble vouloir apprendre JavaScript. Ce n'est pas en utilisant jQuery qu'on apprend vraiment JavaScript.
Un site intéressant qui présentent des équivalents de fonctionnalités jQuery en pur JavaScript : http://youmightnotneedjquery.com .

[No6]

Oui, ce qu’écrivent scoh et Jaypee est plus que fondé.

Dans l’univers HTML / JavaScript, les règles sont différentes, et ce que tu vois comme une simple fenêtre supplémentaire dans ton appli est ici une toute appli supplémentaire.

Ensuite quand tu écris « window.opener.document.getElemen… »
Cela lance un script asynchrone pour exécuter cette tache

Qui se retrouve abortée par le window.close ( à traduire par une sorte de Quit appli window et toutes les taches pouvant être en cours d’éxécution dessus).

Sinon, comme tout cela est uniquement géré par l’interpréteur du navigateur, tu ne peux pas utiliser les appels asynchrone (Ajax) entre les fenêtres (sauf sur FireFox), sauf si bien sur tu utilise NodeJS.

Ensuite pour ton problème et avoir une parfaite synchronisation, tu pourrais en passer par les objets différés et les promesses, qui sont loin d’être de la tarte à coder.

Mais dans ton cas un simple callback dans une fonction jQuery devrait pouvoir suffire... ?
et mettre les coordonnées dans une même variable JSON serait mieux

Donc vraiment le plus simple, c’est de laisser de coté l’utilisation d’une appli fenêtre pour le remplacer par un simple DIV masqué quand tu n’en à plus besoin (show / hide en jQuery).

Il doit y avoir des milliers d’exemples sur ce genre de truc, en modal ou non, comme on veut.

Bien sur la mode c’est d’en revenir au vanilla JS, mais tous les postes client sont encore loin d’être tous en ECMAScript 6, alors que jQuery offre toutes ces primitives sur un plateau, testées et validées.

Il y a aussi l’utilisation des framesworks : Foundation 6 viens de sortir, et il offre depuis toujours un système de DIV-fenetre nativement, tout comme Boostrap, qui fait maintenant un peu vieillot en comparaison.









J'ai trouvé ça sur les objets différés :
http://fabbook.fr/post/2013/04/01/promises...ken-and-barbie/

[Anard]

Bonjour,

@Jaypee : jQuery ??? Déjà que j'ai mis 10 ans à admettre d'intégrer du Javascript sans réticence ! Et comme dit scoch, pour apprendre et bien comprendre comment ça fonctionne, je préfère commencer par la base (je n'ai jusque là utilisé JS que pour modifier le DOM en PHP), par exemple :

Code

<script>function cacheFieldset()
{
  switch (this.selectedIndex.value)
  {
    case 0:
    this.style.display ='none';
    break;
    case 1:
    this.style.display ='block';
    break;
  }
}</script>
<?php echo '<select onchange="cacheFieldset();">[...]</select>'; ?>

@ scoch : Apparemment, c'est en effet plus propre d'utiliser une fenêtre modale, mais c'est aussi vachement moins simple...
Je ne sais pas si j'ai bien compris, mais dans l'idée, ça consiste à mettre une div cachée dans la page en position absolute et à l'afficher ou la cacher en JS ?
Pour qu'elle ne soit pas chargée immédiatement (dans mon cas, c'est quand même une carte GoogleMaps), il faudrait donc passer par AJAX pour charger le contenu quand on en a besoin...
Mais grâce à tes explications précédentes, je commence à réussir à faire qques requêtes XmlHttpRequest

Mais dans tous les cas, je misère avec cette histoire d'attendre la fin d'un script avant l'exécution de la suite.
Dans le cas précédent, est-ce que c'est parce que ma demande à google est asynchrone ?

Code

geocoder.geocode({'latLng': position}, function(results, status){
          if( status == google.maps.GeocoderStatus.OK) {

Dans ce cas, j'aurai toujours ce problème, même avec une fenêtre modale, non ?
En fait, le mieux serait peut-être d'effectuer ma fonction de récupération de l'adresse et de modification du DOM à chaque déplacement du marqueur sur la carte, puis de simplement fermer (ou cacher) la fenêtre avec un bouton...

EDIT : Message de No6 arrivé entre temps
Merci pour ces explications. Donc ce n'est pas ma requête à GoogleMapsAPI mais mes window.opener.document.getElement... qui se font avorter à la fermeture de la fenêtre.
En tout cas, la solution que j'ai mise ci-dessus fonctionne aussi dans ce cas. Pour le reste de ton message... je ne comprends plus rien. hihi.

Ce message a été modifié par Anard - 4 Dec 2015, 14:24.

[No6]

autre idée!


dans la fenetre app principale :

Code

function RecupCoord(xlatitude, xlongitude) {
    document.getElementById('latitude').value = xlatitude;
    document.getElementById('longitude').value = xlongitude;
}

dans la fentre app "GeoFinder"

remplacer

Code

  window.opener.document.getElementById('latitude').value = latitude.toFixed(6);
  window.opener.document.getElementById('longitude').value = longitude.toFixed(6);

par

Code

window.opener.RecupCoord( latitude.toFixed(6), longitude.toFixed(6) );

puis ensuite le window.close(); ne devrait plus causer de soucis...

PS, j'ai pas testé

Ce message a été modifié par No6 - 4 Dec 2015, 15:40.

[No6]

Il y aurait beaucoup à dire…

Tout d’abord Anard, au début, j’étais comme toi, je détestais javascript.

Je le détestais parce que je trouvais l’idée de scripter les navigateurs vraiment importante, et parce que sa syntaxe était complètement débile et régressive, et à mon époque l’homogénéité de sa syntaxe était différente d’un navigateur à l’autre, et c’est encore plus ou moins vrai.

Puis je me suis mis à JQuery, et la j’ai commencé à aimer.

Donc mon conseil, passe à JQuery sans tarder, ton code sera plus simple à gérer, et de toute façon cela ne te détournera pas du codage en JavaScript.

Pour revenir à ECMAScript 6 , c’est la dernière norme syntaxique sur le langage JavaScript, et plus ça va, et plus elle emprunte sa syntaxe à… JQuery !

Au final, si ça se trouve ECMAScript 45 sera identique à JQuery 2 (la version actuelle) !

Le vanilla JS, c’est du JavaScript pur et dur en respectant ECMAScript 5 (pour l’instant) et qui interdit l’utilisation de librairies externes (comme JQuery).

http://www.grafikart.fr/tutoriels/jquery/i...ation-jquery-84


Les promesses en javascript ou en jQuery correspondent grosso modo au mécanisme de rendez-vous dans les autres langages.

L’idée principale est de donner un attribut « promesse » pour une fonction X ou Y.

Ensuite si la fonction réalise ou non cette promesse (la tache qu’elle doit accomplir), permet de conditionner la suite du code.

Les promesses on donc plusieurs états [ en attente, tenue, rompue] , ou même acquittée = tenue, mais en se fichant de son résultat, on veux juste savoir si elle en à bien fini).

Ses états de la promesse sont englobée dans la terminologie anglaise « defered » qu’on à malheureusement traduit par différé en Français et qui est complètement éloigné du sens Anglais. On aurait mieux traduit par le mot « déférence », plutôt ancien et presque oublié, et dont le champ sémantique est oublié.

https://developer.mozilla.org/fr/docs/Web/J...globaux/Promise

[Anard]

Merci pour ces explications. Mais ton autre idée non testée ne semble pas fonctionner...

[Anard]

J'avais pas compris que les fenêtres modales peuvent se faire sans Javacsript : http://dmouronval.developpez.com/tutoriels...e-css3/#noWhere

Dans mon cas en plus, la fenêtre chargée ne prend pas de paramètres, donc elle pourrait être chargée dès le début sans avoir à la charger au moment du clic en Javascript.
Je n'ai pas réussi à la charger en JS, il y a des requêtes XmlHttpRequest dedans et je pense qu'il y a des conflits dans tout ça si elle est chargée aussi en AJAX.

EDIT :
Ca marche du tonnerre avec les fenêtres modales et ça peut difficilement être plus simple. JS ne fait que relancer le script initMap (qui existait déjà) pour recharger la carte.
Je galère juste pas mal pour l'affichage.
La carte Google demande d'être dans des balises qui font toutes 100% de large pour s'afficher.
Ce qui fait que si je suis le lien que j'ai posté plus tôt, avec la case de fermeture en float: right;, elle apparait sur le bord droit de l'écran.

Je l'ai placée à sa place en inline-block, alignée en haut.
Et en position relative pour la faire rentrer dans la carte.
Mais là : problème : quand on clique dessus, le navigateur (Opera) ne comprends pas...
reEdit : Firefox, lui semble mieux gérer le problème...

Comment je peux la placer correctement ? Enfin bon, au fond elle ne sert pas à grand chose (aucune raison de vouloir fermer sans enregistrer les coordonnées)...

Voir ici pour l'exemple et cliquer sur "Confirmer les coordonnées"

Ce message a été modifié par Anard - 5 Dec 2015, 08:39.

[Jaypee]

C'est une bonne chose de vouloir apprendre proprement les bases d'une technique. J'approuve.

Il y des techniques qui sont faites par des experts pour des experts... Je range le développement web et Javascript dans cette catégorie à cause des outils de dev insuffisants, même si le mode outils développeur des Chromes/Firefox/IE a considérablement fait avancer la méthode de développement.

Sur un exemple aussi bien cerné que le tiens, on voit que cela implique la compréhension de la programmation asynchrone (ou concurrente, ou parallèle) et donc si on ramène cela à des techniques de programmation, à la compréhension des "patterns" qu'on appelle "futur" ou "promesse": j'enferme mes voeux dans un objet qui se rappellera à mon bon souvenir, en temps voulu.

L'aspect asynchrone/concurrent/parallèle est également celui qui gouverne le dialogue modal, il doit être mis à jour, sans pour autant bloquer ce qui se passe "à côté" dans la grande fenêtre.

Les suggestions faites pour utiliser une deuxième bibliothèque sont du même ordre que celui du choix de 'utilisation de la bibliothèque Google que tu aurais pu décider de réécrire toi-même. Tu arriveras sans doute à la même avec ta solution d'interface graphiques si elle ne traite que certains cas et pas d'autres, et que tu devras faire encore et encore des ajustements pour couvrir tous tes cas. Au bout d'un moment, faut faire avancer le produit et oublier un peu les outils. Lorsqu'il en existe des puissants, gratuits, et qui font le boulot tout seul, pourquoi s'en priver... Parfois, il faut oublier les détails pour ne retenir que l' essentiel... comme avec le géocodeur Google, comme avec les widgets jQuery...

Pour finir, je livre à la réflexion des experts cette pensée du jour : Les seules lignes de code qui ne plantent jamais... sont celles qu'on évite d'écrire

J-P
PS: Puisque tu as de l'intérêt pour la lutherie (des accordéons) le même débat pourrait exister pour les assemblages du bois... Tout le monde devrait savoir tailler des queues d'aronde aux ciseaux, mais parfois... un outil électrique fait le job... et cela n'enlève aucun mérite à l'artisan.

Ce message a été modifié par Jaypee - 5 Dec 2015, 08:54.

[Anard]

Tu n'as pas tord. Je déteste utiliser des bibliothèques externes aussi parce que je dépends de son maintien ou non (pas de souci pour jQuery me diras-tu, mais c'est l'idée).

J'utilisais déjà depuis longtemps des requêtes asynchrones type XmlHttpRequest sans vraiment le savoir/comprendre, par exemple, pour changer le captcha (seul le captcha est rechargé, pas toute la page). J'utilisais pour cela la fonction ahah() (http://microformats.org/wiki/rest/ahah), mais sans aller chercher une source externe (le script est copié directement sur mon ftp).

Cette fonction ne fait rien de particulier (une requete AJAX pour charger une div en PHP, puis elle remplace le contenu de la div) mais je viens tout juste de comprendre ce qu'il faisait en faisant mes propres requetes asyncrones !
Je peux maintenant me séparer de ce script, ou le bidouiller en connaissance de cause, mais je me sens plus libre, maintenant que je comprends son fonctionnement !

Pour GoogleMaps/Geocoder, j'ai admis que je ne pouvais me passer de sources externes parce que je ne peux pas recartographier la France !
Mais dans l'idée ça m'emm.... un peu de passer par là, et à l'avenir, j'aimerais utiliser OpenStreetMaps (qui est peut-être moins poussé que GM, mais qui a le mérite de ne pas être proporiétaire).
Enfin, dans mon état actuel de connaissances, je ne crois pas que c'aurait été possible, son utilisation a l'air un peu plus complexe...

Il y a aussi que Javascript, sans en utiliser beaucoup, j'ai eu l'occasion d'en écrire quelques lignes dans ma vie, donc je comprends un peu sa façon de dialoguer. Quand je vois un code en JQuery, je suis complètement paumé.
Sachant que j'avais pas mal de taf pour réaliser cette petite appli web, j'évite au maximum de me rajouter des langages à apprendre.

Mais dans l'idée, tu as raison, ces bibliothèques sont faites pour être utilisées et j'y viendrai probablement un jour ou l'autre...

[No6]

J'ai testé cela...

fichier aa.html

CODE

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>page AA</title>
</head>
<body>

<p>Latitude = <span id="Latitude">0</span></p>
<p>Longitude = <span id="Longitude">0</span></p>

<p><input type="button" id="takepos" name="takepos" value="Confirmer les coordonnées GPS sur la carte" onclick="java script:appelGPS()" /></p>

<script type="text/javascript">
var WinGPS = null;

function appelGPS(){
if ((WinGPS == null) || WinGPS.closed) {
WinGPS = window.open('bb.html','new_window','width=600px,height=600px,toolbar=no,location=no,directories=no,status=no,men
ubar=no,scrollbar=no,resizable=yes');
}
}

function retourGPS(Lat,Long) {

document.getElementById('Latitude').innerHTML = Lat;
document.getElementById('Longitude').innerHTML = Long;

WinGPS.close();
}
</script>
</body>
</html>

fichier bb.html

CODE

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>page BB</title>
</head>
<body>
<p><input type="button" value="Fermer et valider la position" onclick="java script:envoiGPS()" /></p>

<script type="text/javascript">

function envoiGPS() {

window.opener.retourGPS( 'pomme', 'poire' );
}
</script>

</body>
</html>

par contre je n'ai aucune idée de la façon dont tu place une carte Google sur la page BB...

PS : pour une raison que j'ignore, l'éditeur de macBidouille transforme mes

Code

"java script:xxx"

en y plaçant de force avec un espace au milieu !

Ce message a été modifié par No6 - 5 Dec 2015, 14:13.

[Anard]

D'accord, mais j'a abandonné le window.close en suivant vos conseils.
Tu n'as peut-être pas vu : j'ai mis le lien ici http://forum.macbidouille.com/index.php?s=...t&p=4021173 pour aller voir le résultat en fenêtre modale CSS (un masque qui recouvre la page appelé depuis une ancre HTML).
Le code Javascript, lui, ne fait que recharger la carte à l'ouverture de la fausse "popup" et renvoyer l'adresse complète du pointeur à sa fermeture.

[No6]

Ah oui, j'avais pas lu..

et je n'avais pas pensé à ce 'truc' en css...
comme quoi, on à toujours à apprendre