Mot-clé - javascript

Fil des billets - Fil des commentaires

lundi 17 mars 2014

Bloquer la sortie d'une page

Parfois, on a besoin de pouvoir interdire de quitter une page web autrement que par le "cheminement normal", c'est à dire très souvent par l'envoi d'un formulaire. Le but n'est bien entendu pas d'emprisonner le visiteur sur la page mais de l'alerter et de lui demander une confirmation de l'action qu'il veut réaliser.

L'astuce suivante fait appel à JQuery pour une simplification du code et de sa compatibilité entre les navigateurs mais peut être codée à la main si vous le désirez.

Bloquer la sortie

Pour cela, il suffit de faire appel à onbeforeunload une fois la page chargée:

jQuery(function($) {
   $(window).bind('beforeunload', function(){
      return 'message de confirmation';
   });
});

Le message de confirmation n'est pas visible sur tous les navigateurs, je ne l'ai vu que sur IE8 et il est plutôt mal mis en page.

Avec ce script, toute action fermant la page (même la fermeture du navigateur) demandera une confirmation à l'utilisateur.

Autoriser la sortie normale

La sortie normale de la page devant s'effectuer par une validation de formulaire, il suffit donc d'ajouter une fonction onclick sur le bouton de soumission qui désactivera le script:

<input type="submit" value="envoyer" onclick="$(window).unbind('beforeunload');" />

vendredi 6 avril 2012

Votre position en JS

Suite à ce billet, j'ai exploré le blog de Mathieu et j'y ai trouvé une information sur la géolocalisation en JS.

En poursuivant mes recherches à ce sujet, j'ai trouvé un tutoriel fort intéressant: géolocalisation en HTML5.

Je me permet donc d'en mettre les grandes ligne ici (ce ne sont que des copier/coller)

Récupérer les coordonnées

Un système très simple permet d'obtenir les coordonnées. Le système gère la non-prise en compte de la géolocalisation par le navigateur, ainsi que le fait que l'utilisateur refuse de partager sa position.

if (navigator.geolocation)
  navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
else
  alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");
 
function successCallback(position){
  alert("Latitude : " + position.coords.latitude + ", longitude : " + position.coords.longitude);
});
 
function errorCallback(error){
  switch(error.code){
    case error.PERMISSION_DENIED:
      alert("L'utilisateur n'a pas autorisé l'accès à sa position");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("L'emplacement de l'utilisateur n'a pas pu être déterminé");
      break;
    case error.TIMEOUT:
      alert("Le service n'a pas répondu à temps");
      break;
    }
});

Suivre les déplacements

Ce petit code permet de suivre les déplacements de l'utilisateur

var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback);
function stopWatch(){
   navigator.geolocation.clearWatch(watchId);
}

Et le lien d'arrêt du suivi:

<a href="#" onclick="stopWatch()">Stop Watch</a>

La vitesse ! La boussole ! L’altitude !

Lorsque l’on récupère la variable position afin d’obtenir la latitude grâce à position.coords.latitude, on a accès à plusieurs autres attributs :

  • position.timestamp, qui renvoie le timestamp de l’heure à laquelle a été mise à jour la position
  • position.coords.altitude, qui correspond à l’altitude de l’utilisateur
  • position.coords.accuracy, qui correspond à la précision des coordonnées
  • position.coords.altitudeAccuracy, qui correspond à la précision de l’altitude
  • position.coords.heading, qui correspond à l’angle compris entre 0 et 360° par rapport au Nord (ce n’est pas aussi précis que la boussole interne d’un smartphone)
  • position.coords.speed, qui correspond à la vitesse de l’utilisateur par rapport à sa dernière position.

jeudi 25 mars 2010

Ajax en post avec jQuery

Actuellement, jQuery possède une fonction ajax qui est getJSON et qui permet de faire des appels Ajax qui récupèrent des données au format JSON. Le seul souci est que les paramètres envoyées le sont en GET, avec toutes les contraintes que cela impose.

Pour pouvoir fonctionner en POST avec la même logique, j'ai étendu jQuery avec une fonction postJSON:

jQuery.extend({
   postJSON: function( url, data, callback) {
      return jQuery.post(url, data, callback, "json");
   }
});

Elle prend les mêmes arguments que getJSON mais fonctionne en POST.

vendredi 5 juin 2009

json_encode et json_decode en PHP4

Malgré ce que j'ai pu dire précédemment, il arrive parfois que je doive adapter mes scripts pour des versions anciennes de PHP. Je suis donc obligé d'avoir une petite série de fonctions de compatibilité, que je vais vous proposer au fil de mes développements.

Les fonction json (decode et encode) ne sont natives en PHP que depuis la version 5.2, mais heureusement il y a un moyen de les rendre accessibles depuis les versions antérieures. Pour cela, il faut télécharger le package JSON-PEAR et en extraire le fichier JSON.php.

Ensuite, ce petit script vous permet de créer (si nécessaire) les fonctions:

<?php
if ( !function_exists('json_decode') ){
	require_once (dirname(__FILE__).'/JSON.php');
    function json_decode($content, $assoc=false){
		if ( $assoc ){
			$json = new Services_JSON(SERVICES_JSON_LOOSE_TYPE);
		} else {
			$json = new Services_JSON;
		}
		return $json->decode($content);
	}
}
 
if ( !function_exists('json_encode') ){
	require_once (dirname(__FILE__).'/JSON.php');
	function json_encode($content){
		$json = new Services_JSON;
		return $json->encode($content);
    }
}
?>

Bien entendu, je pars du principe que JSON.php est dans le même répertoire que le fichier de fonctions, à vous d'adapter les chemins utilisés dans require_once

samedi 7 mars 2009

Des arrondis précis (JavaScript)

Pour faire le pendant en JavaScript du post "Des arrondis précis", j'ai traduit mes fonctions.

Je me suis appuyé sur deux fonctions de php.js pour les vérifications, elles sont inclues dans ma source.

Lire la suite...

lundi 2 mars 2009

Vérifier la validité d'une date

Très souvent, on doit vérifier la validité d'une date, mais autant il est simple de vérifier sa syntaxe autant il peut s'avérer compliqué de vérifier que la date existe réellement. Mais la solution existe.

Lire la suite...

jeudi 19 février 2009

Fonctions PHP en JavaScript

Kevin van Zonneveld a eu l'excellente idée de créer en JavaScript des équivalents aux fonctions PHP.
Certaines sont fort simple, comme par exemple la fonction abs() qui est juste un alias amélioré pour Math.abs(), d'autres sont très complexes.

A l'heure actuelle, il y a 285 équivalents de créés, vous pouvez les trouver sur cette page.