jQuery et trigger (geocomplete)

Version imprimable

Bonjour à tous,

J'ai trouvé ce plugin jQuery GeoComplete qui permet d'utiliser les cartes google Maps => http://ubilabs.github.io/geocomplete/
En gros, j'ai un input, dans lequel on tape un lieu, plusieurs options s'offrent à nous, on en sélectionne une et puis voilà.
J'ai donc mis en place un lien à côté qui permet d'afficher la carte au clique.
Le souci c'est que je veux vérifier au clique, que l'adresse rentrée est valide (en gros que l'utilisateur n'a pas tapé : "sdyfgqfgyefgryefgekjfghesgfgerjhezfhe" dans le champ input).
J'ai donc mis (comme indiqué dans le tuto) un trigger sur l'élement geocomplete qui permet de savoir si oui ou non l'adresse est valide.
Et au clique sur ma carte, je veux vérifier le résultat, seulement le résultat du trigger est trop long, et ne me permet pas de capter le retour.

Voici ce que j'ai écrit :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var reset = function() { $("#location").geocomplete().live('geocode:result', function(event, status) { //si un resultat s'affiche, pas d'erreur $('#erreur_location').html('non'); }).live('geocode:error', function(event, status) { //sinon erreur $('#erreur_location').html('oui'); }); $("#getLocation").live('click', function() { //clique pour afficher la carte $('#location').trigger('geocode'); //appelle du trigger ci-dessus //c'est la que ça va surement trop vite erreur = $('#erreur_location').html(); //récuperation de l'erreur ci-dessus if (erreur == 'non') { ... } else { ... } .....
Comment puis-je réussir à attendre tant que j'ai pas reçu la réponse du trigger ?

04/09/2014, 23h06
ABCIWEB

Bonjour,

Je ne peux pas te répondre sur ce plugin en particulier mais d'une manière générale et au cas où tu ne connaîtrais pas cette fonction on utilise souvent deferred pour attendre le résultat d'un évènement.

Merci pour ta réponse, en fait je pense que le plugin n'a rien à voir. J'ai regardé ta fonction mais je pense qu'il doit y avoir quelque chose de beaucoup plus simple qui existe. En fait, j'aimerai juste que le trigger récupère la valeur du bind.
Parce que si je fais :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $("#geocomplete").geocomplete() .bind("geocode:result", function(event, result){ alert('ok'); }) .bind("geocode:error", function(event, status){ alert('erreur'); }) $("#find").click(function(){ $("#geocomplete").triggerHandler("geocode"); }); });
J'arrive bien à chaque fois à avoir "ok" ou "erreur" au bon moment.
J'aimerai qu'en dessous de la ligne $("#geocomplete").triggerHandler("geocode");, je puisse récupérer le "ok" ou le "erreur" c'est tout :(

Bonsoir

Je ne connaissais pas, je viens de tester.

Je ne comprends pas ce que vous voulez améliorer au fonctionnement de l'exemple de base. L'autocomplete fonctionne très bien, et la zone de résultat affiche un commentaire adéquat.

Citation:

je puisse récupérer le "ok" ou le "erreur" c'est tout

Vous pouvez toujours ajouter un traitement en cas de succès ou d'échec en utilisant le code actuel :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $geo .geocomplete( options ) .on( "geocode:result", function( event, result ){ $.log("Resultat : " + result.formatted_address); // OK : code supplémentaire ou appel de fonction }) .on( "geocode:error", function( event, status ){ $.log("Erreur : " + status); // Erreur : code supplémentaire ou appel de fonction }) .on( "geocode:multiple", function( event, results ){ $.log( "Résultat multiple : " + results.length + " results found" ); });

En fait le souci, c'est que j'appelle plusieurs fois et de plusieurs fonctions différentes ce trigger.
J'ai une fonction qui prend en compte 6 ou 7 paramètres, et je ne peux pas tous les passer dans le trigger :
Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
function addEvent(day1, month1, year, body1, user, titre1, lieu, heure, minute, privated) {
    ...
    $("#geocomplete").triggerHandler("geocode");
    if () { 
          // si le retour du trigger n'est pas en erreur on continue....
          // ajout de l'évènement...
    } else {
          alert('erreur : lieu invalide');
    }
    ...
}

Ou encore comme dessus l'exemple ou on clique sur la carte :

Code:

1
2
3
4
5
6
7
8
9
10
 
$("#getLocation").live('click', function() { //clique pour afficher la carte
        $('#location').trigger('geocode'); //appelle du trigger ci-dessus
        //c'est la que ça va surement trop vite
        erreur = $('#erreur_location').html(); //récuperation de l'erreur ci-dessus
        if (erreur == 'non') {
            ...
        } else {
            ...
        }

Donc la seule solution que je vois, et qui ne me paraissait pas si impossible, c'est de récupérer d'une manière ou d'une autre le résultat du trigger et d'attendre ce dernier avant de continuer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 $("#location").geocomplete().live('geocode:result', function(event, status) { //si un resultat s'affiche, pas d'erreur
        retour = true;
    }).live('geocode:error', function(event, status) { //sinon erreur
        retour = false;
    });
 $("#geocomplete").triggerHandler("geocode");
    if (retour) { // catch de la réponse
          ...
    } else {
          alert('erreur : lieu invalide');
    }
});

Bonjour

On peut passer par un objet intermédiaire, que l'on doit réinitialisé avant l'action.

Code de mon exemple modifié pour inclure l'objet $geoResultat :

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$( function(){
 
    var options = {
            "map" : ".map_canvas",
            "location" : "Paris"
        },
        $logger = $( "#logger" ),
        $geo = $( "#geocomplete" ),
        $geoResultat = {
            "init" : function(){
                $( this ).result = {};
                $( this ).statut = "OK";
            },
            "result" : {},
            "status" : "OK"
        };
 
    $.log = function( message ){
        $logger.html( message );
    };
 
    $geo
        .geocomplete( options )
        .on( "geocode:result", function( event, result ){
            $.log("Resultat : " + result.formatted_address);
 
            $geoResultat.result = result;
        })
        .on( "geocode:error", function( event, status ){
            $.log("Erreur : " + status);
 
            $geoResultat.status = status;
        })
        .on( "geocode:multiple", function( event, results ){
            $.log( "Résultat multiple : " + results.length + " results found" );
        });
 
        $( "#find" ).on( "click", function(){
 
            // init : valeur par défaut
            $geoResultat.init();
 
            // action
            $geo.trigger( "geocode" );
 
            // résultat
            console.log( $geoResultat.result, $geoResultat.status );
        });
 
        $( "#examples a" ).on( "click", function(){
 
            // init : valeur par défaut
            $geoResultat.init();
 
            // action
            $geo
                .val( $( this ).text() )
                .trigger( "geocode" );
 
 
            // résultat
            console.log( $geoResultat.result, $geoResultat.status );
 
            return false;
        });
 
});

Salut et Merci beaucoup pour ta réponse.
En effet, ça marche parfaitement je récupère bien les retours à l’extérieure des fonctions "on".
En revanche, y'a encore un truc qui n'est pas parfait (désolé).
C'est le retour de la réponse invalide, qui arrive trop tardivement.
Voilà le code que j'utilise :
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 41 $(function() { $logger = $('#logger'), $geo = $('#geocomplete'), $geoResultat = { 'init' : function(){ $(this).result = {}; $(this).statut = 'OK'; }, 'result' : {}, 'status' : 'OK' }; $.log = function(message) { $logger.html(message); }; $geo .geocomplete() .on('geocode:result', function(event, result) { $.log('Resultat : ' + result.formatted_address); $geoResultat.result = result; }) .on('geocode:error', function(event, status) { $.log("Erreur : " + status); $geoResultat.status = status; }) .on( "geocode:multiple", function(event, results) { $.log( "Résultat multiple : " + results.length + " results found" ); }); $('#find').on('click', function() { $geoResultat.init(); $geo.trigger('geocode'); console.log($geoResultat.result, $geoResultat.status); if ($geoResultat.status == 'ZERO_RESULTS') { alert('ko'); } else { alert('ok'); } alert('done'); // je continue }); });
En fait je fais 2 tests :

Essai 1 : addresse valide
- J'entre un lieu valide dans l'input (France)
- Je clique sur la proposition correspondante
- Le résultat dans le logger est immédiat => Resultat : France (et c'est tout bon j'ai récupéré le résultat valide)
- Je clique sur le bouton "find" et j'ai dans l'ordre :

1/ alert('ok');
2/ alert('done');

- Tout est bon, je peux continuer en sachant que l'url est valide

Essai 2 : addresse invalide
- Je modifie le champ input, et je met "fhdhfgqshdgfhqsdhfqshfdgqysdgyfsqgdhqshfqsj" dedans
- Je clique sur "find" et j'ai dans l'ordre :

1/ alert('ok');
2/ alert('done');
3/ Le résultat du logger ensuite => Erreur : ZERO_RESULTS

- Et la ce n'est plus bon, parce qu'au niveau de mon code ci-dessus dans la ligne // je continue, je n'ai pas récupéré l'erreur, elle arrive après l'alert('done').

Essai 3 : re-addresse valide
- Je modifie le champ input, et je met "France" dedans
- Je clique sur la proposition correspondante
- Le résultat dans le logger est immédiat => Resultat : France (et c'est tout bon j'ai récupéré le résultat valide)
- Je clique sur "find" et j'ai dans l'ordre :

1/ alert('ko'); (le ko du test précédent)
2/ alert('done');

J'ai le même souci qu'au début, en fait une sorte délai de retard sur le résultat avant de pouvoir continuer : je récupère en gros le résultat de l'action précédente.
Sais-tu comment corriger ceci ?
Encore merci d'avance.

Bonjour

Ce comportement est provoqué par l'usage de l'infâme et obsolète méthode alert() qui est toujours prioritaire sur le reste du code. Avec console.log() ou un jQuery UI Dialog il n'y aura pas ce problème.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 $('#find').on('click', function() { $geoResultat.init(); $geo.trigger('geocode'); if ($geoResultat.status !== "OK"){ console.log('ko'); } else { console.log('ok'); } console.log('done'); // je continue });

Merci pour l'information, je ne savais pas qu'alert était obsolète.
Cependant le souci est le même avec le console.log.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$('#find').on('click', function() {
	$geoResultat.init();
	$geo.trigger('geocode');
	console.log($geoResultat.result, $geoResultat.status);
	if ($geoResultat.status == 'OK') {
		console.log('addresse entrée : '+$('#geocomplete').val());
		console.log('resultat : ok');
	} else {
		console.log('addresse entrée : '+$('#geocomplete').val());
		console.log('resultat : ko');
	}
});

Code:

1
2
3
4
5
6
7
8
9
10
11
Object { address_components=[1], adr_address="<span class="country-name">France</span>", formatted_address="France", more...} OK
addresse entrée : France
resultat : ok

Object { address_components=[1], adr_address="<span class="country-name">France</span>", formatted_address="France", more...} OK
addresse entrée : sfqsfqsdfqsfqsdfqsfdqsfdqdfsdfsqfsdfq
resultat : ok

Object { address_components=[1], adr_address="<span class="country-name">France</span>", formatted_address="France", more...} ZERO_RESULTS
addresse entrée : France
resultat : ko

Premier ok au lieu de ko, et ensuite un ko pour un ok.

08/09/2014, 14h55
danielhagnoul

Ha ! :calim2: :aie:

J'avais testé sur "find" avant de proposer cette solution et cela fonctionnait.

J'ai fait plusieurs tests avec des combinaisons diverses de "find" et "click" sur les liens, effectivement régulièrement il sort le résultat précédent ou un résultat illogique.

J'ai fait un test avec un simple booléen au lieu d'un objet intermédiaire et j'ai le même problème.

Conclusion c'est le code du plugin qui a un bogue.

Je ne promets pas une solution, mais je vais examiner le code du plugin.
08/09/2014, 14h57
lokomass

Ahhh, je commençais à croire que le souci venait de moi.
J'ai regardé le code de la page jquery.geocomplete.js, mais à mon tout petit niveau j'ai pas compris grand chose lol...
Si tu peux effectivement trouver une correction ça serait génial !
Merci pour ton intérêt en tout cas.

EDIT : Peut-être une bidouille à tester grâce au paramètre "blur". Ce dernier permettrait de lancer le trigger dès la perte du focus de l'input..
08/09/2014, 18h15
danielhagnoul
Je viens d'essayer :
1. une version avec un objet callback (ne fonctionne pas) ou un objet différé (ne fonctionne pas correctement) ;
2. une version avec une petite modification dans le plugin (ne fonctionne pas correctement).
Résultat : KO ! :aie:

Il est toujours possible que je ne voie plus le problème et que je passe à côté d'une solution simple ou complexe.

Je vais attendre quelques heures pour laisser reposer la tête avant de chercher une solution, mais j'ai peu d'espoir !
08/09/2014, 18h41
lokomass

Oh merdeeee :(
J'ai pensé à un truc sinon, un appel en ajax synchrone qui vérifie l'url ?
On créer une page check.html, avec la librairie, et on l'appelle au click pour faire le trigger, le fait de mettre async: false, ça peut marcher ?
J'ai aussi vu cette option : https://github.com/ubilabs/geocomplete/pull/121

Bingo ! :yaisse3:

Sans modifications du plugin, simplement en créant un nouvel événement.

:fleche: Ma page de test

Gestion complexe ! Utilisation mémoire ? Mais le "ramasse-miettes" doit bien avoir un peu de boulot. :lol:

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$( function(){
 
    var options = {
            "map" : ".map_canvas",
            "location" : "Paris",
            "details" : ".details",
            "detailsAttribute" : "data-geo"
        },
        $logger = $( "#logger" ),
        $geo = $( "#geocomplete" ),
        geoEvent = $.Event( "geoEvent" );
 
    $.log = function( message){
        $logger.html( message );
    };
 
    $geo
        .geocomplete( options )
        .on( "geocode:result", function( event, result ){
            $.log("Resultat : " + result.formatted_address );
       })
        .on( "geocode:error", function( event, status ){
            $.log("Erreur : " + status );
 
            // déclenche l'événement
            $( ".map_canvas" ).trigger( geoEvent, [ status ] );
        })
        .on( "geocode:multiple", function( event, results ){
            $.log( "Résultat multiple : " + results.length + " results found" );
        });
 
        $( "#find" ).on( "click", function(){
            $geo.trigger( "geocode" );
 
            // suppresion du gestionnaire d'événement précédent
            // puis création du nouveau gestionnaire d'événement
 
            $( ".map_canvas" ).off( "geoEvent" );
 
            $( ".map_canvas" ).on( "geoEvent", function( event, status ){
                console.log( "Find, erreur !", event, status );
 
                // traitement de l'erreur
 
            });
        });
 
        $( "#examples a" ).on( "click", function(){
            $geo
                .val( $( this ).text() )
                .trigger( "geocode" );
 
            // suppresion du gestionnaire d'événement précédent
            // puis création du nouveau gestionnaire d'événement
 
            $( ".map_canvas" ).off( "geoEvent" );
 
            $( ".map_canvas" ).on( "geoEvent", function( event, status ){
                console.log( "Click, erreur !", event, status );
 
                // traitement de l'erreur
            });
 
            return false;
        }); 
 
});

09/09/2014, 08h54
lokomass

Yesss, c'est parfait !!!
Un immense merci à toi !
09/09/2014, 09h56
danielhagnoul

Je suis satisfait, mais pas heureux !

Comme suggéré ci-dessus par ABCIWEB, j'aurais dû chercher une solution asynchrone beaucoup plus tôt. :oops:

En fait j'ai un peu parlé vite, je galère maintenant à adapter ta démo à ma vraie page.
Comme j'utilise plusieurs champs de localisation, ce que je fais c'est que j'en créer un bidon à chaque clique, et je le vire à la volée ensuite...
Et la forcément ça ne fonctionne plus.

Voilà mon code, tout se passe dans la fonction de clique chez moi :

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
 
Ev('#getLocation').live('click', function() { // clique sur la carte
	content = Ev('#location').val(); // je prend l'adresse renseignée par l'utilisateur
	if (content) { // si non vide
		document.getElementById('smi').innerHTML = '';
		Ev('#smi').append(Ev("<div class='popup_block_lieu' id='popup_events_lieu'><a class='close' href='#'><img class='btn_close_journal' src='images/popup/close.png' style='margin-top:-35px'></a></div>").append('<div class="map"></div>')); // je met la carte dans une "popup"
		Ev('#loc').click(); // je l'ouvre (il faurdra l'ouvrir que si il n'y a pas d'erreur mais pour l'instant....)
		Ev('body').append('<input id="input_location" type="text" style="display:none;"></input>'); //je créer mon nouveau champ input
		var options = {
			map: '.map',
			location: content, // mon adresse renseignée
			mapOptions: {
				mapTypeControl: false,
				streetViewControl: false
			}
		};
		Ev('#input_location').geocomplete().on('geocode:error', function(event, status) {
			Ev('.map').trigger(geoEvent,[status]); // je met ton trigger sur l'évènement du nouveau champ
		});
		Ev('#input_location').geocomplete(options); // j'appelle le plugin
		geoEvent = Ev.Event('geoEvent');
		Ev('.map').off('geoEvent');
		Ev('.map').on('geoEvent', function(event,status) {
			//location_erreur();
			console.log( "Find, erreur !", event, status ); // je n'ai jamais l'erreur
		});
		Ev('#input_location').remove(); // suppression du champ input
	} else {
		// alert('Pour voir la carte, merci de renseigner un lieu.');
	}
});

Désolé de t'embeter encore après tout ce que tu as fait pour moi mais je n'y arrive encore pas :'(

09/09/2014, 10h09
SpaceFrog

Je ne sais pas vous mais de mon coté sous ffx j'ai une erreur "head is not defined" lors du head.ready sur ta page de test Daniel :red:
09/09/2014, 10h17
lokomass

J'ai eu aussi cette erreur, oui, mais chez moi en copiant le code comme tel ça fonctionne

J'ai réussi à attrapper l'erreur mais, c'est toujours invalide, quoique je mette, y'a déjà du mieux :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
	$('#geocomplete').geocomplete();
	$( "#find" ).on( "click", function(){
		content = $('#geocomplete').val();
		$('body').append('<input id="input_location" type="text" style="display:none;"></input>');
		var options = {
			"map" : ".map",
			location: content
		}
		geoEvent = $.Event( "geoEvent" );
		$('#input_location').geocomplete(options);
		$('#input_location').on( "geocode:error", function( event, status ){
				$( ".map" ).trigger( geoEvent, [ status ] );
			});
		$('#input_location').trigger( "geocode" );
		$( ".map" ).off( "geoEvent" );
		$( ".map" ).on( "geoEvent", function( event, status ){
			$('#input_location').remove();
			console.log('lieu invalide');
		});
	});
});

10/09/2014, 11h50
lokomass

J'ai finalement réussi, c'est pas propre mais ça marche.
J'ai ajouté le même évènement pour "geocode:result"
J'attend que l'évènement okEvent ci-dessus soit appellé.
Une fois appellé je recréer un input bidon, et la du coup ça s'affiche bien quand l'adresse est valide, et pas quand elle est erronée.

Un immense merci encore pour ton aide.
12/09/2014, 12h04
danielhagnoul

Citation:

Envoyé par SpaceFrog

Je ne sais pas vous mais de mon coté sous ffx j'ai une erreur "head is not defined" lors du head.ready sur ta page de test Daniel :red:

Normal ! :mrgreen: Ma page de test n'est visible que sous Chrome pour l'instant. Firefox ne reconnaît pas encore les "link" "import".

J'ai dit le pourquoi du choix de cette page de test ici : Un exemple, pour les experts, utilisant import, shadow et web components.

Je viens de voir que ma page en ligne signale des erreurs sur la latitude et longitude alors que la page affiche les bonnes valeurs. Je viens de la remplacer par la dernière version conservée sur mon ordinateur. Plus d'erreur, bizarre !

EDIT 2014-09-12 14:05

~~De toute manière, le plugin Geocomplete ne me semble pas bien abouti, la console de chrome signale des erreurs à chaque modification de la carte. Il faut espérer qu'il s'améliore rapidement.~~

Ce ne sont pas des erreurs, mais des avertissements (ERR_BLOCKED_BY_CLIENT). Ils sont générés par les protections ajoutées au navigateur.