Giter Site home page Giter Site logo

Comments (14)

kylekatarnls avatar kylekatarnls commented on July 26, 2024

Bonjour, la première chose à savoir, c'est que le HTML est lu séquentiellement par le navigateur, cela signifie que lorsque vous faites $('#recherche') dans head le champ de recherche n'est pas encore disponible, il n'y a donc aucun élément sélectionné, cela est toujours valable en jQuery et JavaScript la bonne pratique est d'insérer tous les scripts JS tout à la fin (avant </body>), une autre solution est de dire à jQuery d'attendre que le HTML soit prêt en encapsulant le code dans un dom-ready callback :

$(function () {
  $('#recherche').vicopo(function (cities) {
    if(cities.length) {
      $('#ville').val(cities[0].city);
      $('#code').val(cities[0].code);
    } else {
      $('#ville').val('');
      $('#code').val('');
    }
    $('#count').val(cities.length + ' villes trouvées');
  });
});

Le deuxième problème est que si vous testez VICOPO dans un répertoire local, l'URL dans votre barre d'adresse doit commencer par file://, et VICOPO va tenter de chercher les informations sur file://vicopo.selfbuild.fr ce qui est faux évidemment, ça c'est une erreur de ma part, je vais le corriger pour permettre de tester correctement VICOPO en local.

Vous devriez donc pouvoir faire fonctionner le code suivant sur un serveur (un hébergement en ligne, Wamp ou autre) :

<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <input id="recherche" placeholder="Entrez un code postal ou une ville" autocomplete="off" size="50"><br>
  <input id="ville" disabled size="50"><br>
  <input id="code" disabled size="50"><br>
  <input id="count" disabled size="50">
  <script src="jquery-3.1.1.js"></script>
  <script src="api.js"></script>
  <script>
  $('#recherche').vicopo(function (cities) {
    if(cities.length) {
      $('#ville').val(cities[0].city);
      $('#code').val(cities[0].code);
    } else {
      $('#ville').val('');
      $('#code').val('');
    }
    $('#count').val(cities.length + ' villes trouvées');
  });
  </script>
</body>
</html>

Je vais corriger le script pour qu'on puisse également l'essayer sans serveur.

from vicopo.

kylekatarnls avatar kylekatarnls commented on July 26, 2024

Bonjour, vous pouvez désormais utiliser la dernière version pour vos tests qui fonctionnera sur n'importe quel protocole : https://vicopo.selfbuild.fr/api.js

N'hésitez pas à ré-ouvrir cette issue si vous rencontrez la moindre difficulté.

from vicopo.

cinqlair avatar cinqlair commented on July 26, 2024

J'ai l'impression que depuis la mise à jour, ça ne fonctionne plus sur le site.

from vicopo.

kylekatarnls avatar kylekatarnls commented on July 26, 2024

Le site fonctionne parfaitement. La démo et les JSFiddle ont le comportement attendu. Vous pouvez décrire plus précisément votre impression ?

from vicopo.

cinqlair avatar cinqlair commented on July 26, 2024

J'ai testé sur une autre machine : ça fonctionne avec Edge, mais pas Mozilla, ni Chrome.

C'est normal le triple égal ligne 7 :
var _host = (location.protocol === 'http:' ? 'http:' : 'https:') + '//vicopo.selfbuild.fr';

screenshot from 2017-02-12 17-42-34

from vicopo.

kylekatarnls avatar kylekatarnls commented on July 26, 2024

Oui le triple égal signifie égalité stricte, "9" == 9 est vrai mais "9" === 9 est faux, donc === est à privilégier. Chez moi ça fonctionne avec Edge, Firefox Chrome et IE, et il n'y a a priori pas de raison que ça marche avec Edge et pas avec Chrome, essayez de vider votre cache et de désactiver les extensions de navigateurs qui peuvent bloquer le réseau (comme les bloqueurs de publicité), vous pouvez aussi ouvrir la console (F12 sous Chrome) et rafraîchir la page avec F5 puis taper un code postal pour voir si des messages d'erreurs apparaissent.

from vicopo.

cinqlair avatar cinqlair commented on July 26, 2024

Vous l'aurez compris, je suis pas encore un crack en JS ;-).
Avec la console, j'ai diagnostiqué ce qui est sans doute l'origine du problème: au deuxième chiffre du code postal, j'obtiens cette erreur :
GET https://www.selfbuild.fr/vicopo?code=75
net::ERR_INSECURE_RESPONSE
send @ jquery.min.js:4
ajax @ jquery.min.js:4
o.(anonymous function) @ jquery.min.js:4
getJSON @ jquery.min.js:4
(anonymous) @ index.js:2
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3

Ça fonctionne en http, mais pas en https.

from vicopo.

kylekatarnls avatar kylekatarnls commented on July 26, 2024

En effet, d'abord il faut au moins 2 caractères avant de lancer la recherche ce qui permet côté serveur d'optimiser le tri à la manière d'un hasmap, il est inpensable de parcourir toutes les villes de France, en revanche, parcourir un département ou des ensembles de villes groupés par les 2 premières lettres de la ville est nettement plus raisonnable et permet des réponses rapides, voilà il n'y a d'appel qu'à partir de 2 lettres.

Ensuite, https://www.selfbuild.fr/vicopo est l'ancienne adresse, comme vous pouvez le voir au début de ce fichier : https://vicopo.selfbuild.fr/api.js l'appel est censé se faire sur https://vicopo.selfbuild.fr ou http://vicopo.selfbuild.fr si vous êtes en http.

Toutefois cette URL est toujours bonne et le certificat de sécurité est toujours valable. L'erreur unsecure peut avoir plusieurs causes :
http://stackoverflow.com/questions/23688565/failed-to-load-resource-neterr-insecure-response

Parmis les hypothèses listée ça et là, je recommande :
1 - Vérifier que la date de votre système est correct (les certificats HTTPS sont délivrés pour une durée limitée).
2 - Vider le cache de vos navigateurs Chrome et Firefox et de les redémarrer.
3 - Vérifier que vos certificats intermédiaires sont à jour mais je serai vraiment étonné qu'un Ubuntu 16 ne gère pas mon certificat startssl.

from vicopo.

cinqlair avatar cinqlair commented on July 26, 2024

J'ai fini par trouver le problème : le certificat (StartCom Class 1 DV Server CA) n'était pas présent dans mes navigateurs. D'après un collègue, la politique de Firefox et Chrome s'est durcie, ils ont supprimé de nombreux certificats. Je l'ai ajouté depuis ce site, maintenant, ça fonctionne.

from vicopo.

kylekatarnls avatar kylekatarnls commented on July 26, 2024

Merci beaucoup pour votre retour. Je vais tâcher de calculer les utilisateurs potentiels impactés.

from vicopo.

monoulou avatar monoulou commented on July 26, 2024

Merci pour cette merveilleuse API qui va me simplifier la vie!! Elle correspond axactement a ce que je recherche!! Mais je rencontre une difficulté... Aucun moyen de récupérer un ville affichée dans la liste, ni avec la souris ni avec le clavier comme dans la démo en ligne. Qu'est ce que je dois faire??

from vicopo.

kylekatarnls avatar kylekatarnls commented on July 26, 2024

Bonjour, le problème que vous rencontrez ne semble pas correspondre au sujet traité ici.

Voici le code de la démo : https://jsfiddle.net/KyleKatarn/e0cg1t9q/17/

Si vous rencontrez des difficultés avec votre implémentation, vous pouvez ouvrir une issue en détaillant votre contexte et le code utilisé.

from vicopo.

david0613 avatar david0613 commented on July 26, 2024

Bonjour, je sais que le sujet est un peu ancien. Mais comment faire avec sa propre base de données villes, code postal ? Merci

from vicopo.

kylekatarnls avatar kylekatarnls commented on July 26, 2024

Bonjour, je vous invite à créer une issue dédiée à cette question en donnant l'API ou base de données avec laquelle vous travaillez.

from vicopo.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.