Discussion :

[lokomass]

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 :

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
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 ?

[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.

[lokomass]

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 :

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

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

[danielhagnoul]

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.

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 :

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

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" );
        });

[lokomass]

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 :

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

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 :

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

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 :

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

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');
    }
});

[danielhagnoul]

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 :

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
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;
        });
 
});

[lokomass]

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 :

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
 
$(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.

[danielhagnoul]

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 :

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

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
});

[lokomass]

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 :

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

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 :

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

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.

[danielhagnoul]

Ha !

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.

[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..

[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 !

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 !

[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

[danielhagnoul]

Bingo !

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

Ma page de test

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

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
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;
        }); 
 
});

[lokomass]

Yesss, c'est parfait !!!
Un immense merci à toi !

[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.

[lokomass]

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 :

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
 
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 :'(

[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:

[lokomass]

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

[lokomass]

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

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
$(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');
		});
	});
});