Archives par mot-clé : jQuery

DateTimePicker : différentes solutions

Publié dans HTML et CSS | Laisser un commentaire

Plusieurs solutions existent pour sélectionner facilement une date avec un DatePicker (et l’heure pour un DateTimePicker !) pour le Web. Voici une petite sélection.

HTML5 DateTimePicker

Eh oui, sélectionner facilement la date, c’est possible nativement dans votre navigateur avec une simple balise HTML. L’inconvénient c’est que ce n’est pas encore très supporté. Dans Opera, mais ailleurs… ? Et il faut reconnaître que ce n’est pas magnifique.

Choisir une date : <input type="datetime" name="yourDate" />

html5-datetimepicker

Voir les exemples du W3Schools.
Continuer la lecture

RedactorJs – L’éditeur WYSIWIG qui tue tout !

Publié dans Javascript | 2 commentaires

Cet éditeur en ligne WYSIWYG est tout simplement génial : dybskiy/redactor-js · GitHub.
Simple, léger, rapide, pratique à utiliser ! Et un régal à configurer 🙂

Sous licence libre pour un usage non-commercial.

Créer un plugin jQuery

Publié dans Javascript | Laisser un commentaire

Une des grandes forces du framework javascript jQuery est de pouvoir y ajouter des plugins afin d’abstraire ses fonctionnalités favorites (qui ont parfois coûtés pas mal d’heures de réflexions) pour les utiliser simplement dans d’autres projets, ou pour pouvoir les partager avec d’autres.  En général, lorsque l’on prend le temps de transformer des bouts de codes en plugins, on en profite aussi pour étendre leurs fonctionnalités afin de pouvoir les utiliser dans un plus grand nombre de cas.

De manière générale, pour créer un plugin, on utilise le code suivant :

(function($) {
  $.fn.nomDuPlugin = function() {
    // Ici, l'incroyable code du plugin !
  };
})( jQuery );

Continuer la lecture

30 minutes par jour sur Java EE

Publié dans Java | Laisser un commentaire

Java Evil Edition
Voilà quelques jours que j’ai démarré un stage pour 3 mois (et quelques) de conception et de développement. Normalement, je vais manger de l’UML, du Java EE et du jQuery ! Cool !
Du coup, j’en profite pour démarrer une nouvelle série sur Java EE (Java Entreprise Edition), la nouvelle version de ce que l’on appelé autrefois J2EE ! C’est un sujet carrément hyper vaste, qui évolue depuis plusieurs années et la dose de vocabulaire à connaître pour maîtriser la bête est hallucinante ! Sans compter que Sun créé de nouveaux outils pour Java EE au fil de l’évolution du projet, mais c’est souvent en se basant sur le travail d’autres sociétés… Du coup, il n’est pas rare de se retrouver avec 2 ou 3 modules/parties/frameworks/trucs de Java EE qui font la même chose, mais légèrement différemment.

Pour se faire, je me baserai sur :

  • l’excellent livre Java EE 5 d’Antonio Goncalves (aux éditions Eyrolles). Ce livre utilise GlassFish et explique l’utilisation de JPA, JSF, …
  • ce que je vais manipuler pendant mon stage. Ce sera du JBoss (avec Tomcat), de l’Hibernate (JPA a été créé en se basant sur Hibernate), du Struts (JSF fait la même chose), … Mais a priori, je pourrai aussi papoter de Spring, de Maven, et d’outils pour générer du code à partir de diagrammes UML : AndroMDA et MagicDraw (j’en ai déjà parlé en parlant des outils à utiliser pour faire du JEE).
  • ce que je lirai sur le Web Comme je vais aussi faire du jQuery, j’aurai sûrement aussi des choses à dire à ce sujet.

On verra bien ce que ça donne !

Quelques techniques de concaténation dans différents langages

Publié dans Geekeries | Laisser un commentaire

D’après Wikipédia : > Le terme concaténation […] désigne l’action de mettre bout à bout au moins deux chaînes (de caractères).
Simplement un petit mémo rapide sur la concaténation dans différents langages.

Javascript, jQuery, Java

variable1+variable2 "texte texte texte"+variable1

PHP

variable1.variable2 'texte texte texte'.variable1

C++

variable1<<variable2 "texte texte texte"<<variable1

SQL

CONCAT(variable1, variable2) CONCAT("texte texte texte", variable1)

CONCAT_WS pour ne pas être embêté avec les champs vides.

Lire un fichier XML avec jQuery

Publié dans Javascript | Laisser un commentaire

Ces derniers jours avec mon système de commentaires, je me suis pas mal amusé sur plusieurs points de jQuery, mais une notion me paraissait étrange : la lecture d’un fichier XML. JQuery permet une manipulation simple et poussée du DOM, mais lorsqu’on récupère un fichier XML d’une requête Ajax, on serait incapable de le traiter autrement qu’avec des « bidouilles » Javascript à l’ancienne ?

$.post('ajax.php', function(xml) {
 	var xmlData = xml.getElementsByTagName('com')[0];
 	var ret = xmlData.getElementsByTagName('ret')[0].firstChild.nodeValue;
 	var xmlPseudo = xmlData.getElementsByTagName('pseudo')[0].firstChild.nodeValue;
 	var xmlCommentaire = xmlData.getElementsByTagName('commentaire')[0].firstChild.nodeValue;
}, 'xml');

Franchement, j’y croyais pas. Aujourd’hui j’ai trouvé la solution !

Continuer la lecture

Un système de commentaire avec jQuery en Ajax (2)

Publié dans Javascript | 25 commentaires

Hier, j’expliquais comment faire un système de commentaire avec jQuery, c’est-à-dire un système de commentaires sans rechargement de la page. Mais il manquait encore l’appel Ajax, j’entends par là, l’appel asynchrone à un script PHP qui enregistre le commentaire ajouté dans une base de données. C’est aujourd’hui chose faites ! J’en profite pour expliquer les différents tests que j’ai effectué avec getJSON et post en mode JSON et XML.

Première étape : getJSON

Je rappelle l’idée de ce script : un utilisateur peut remplir un formulaire pseudo+commentaire et lorsqu’il l’envoie, hop son message apparait sans rechargement de la page en tête des autres commentaires. Son commentaire a été enregistré dans une base de données entre temps. Du coup :

  • on a besoin d’envoyer 2 données au script PHP : le pseudo et le contenu du commentaire
  • on a besoin que le script PHP nous renvoie 3 données : le pseudo et le contenu du commentaire (qu’on a sécurisé et affiné si besoin) et une valeur de retour (1 si ok, 0 si problème)

Et la, si vous êtes que moi et que vous ne connaissez pas JSON, vous avez le droit de vous demander quoi faire.
Continuer la lecture

Un système de commentaires avec jQuery (1)

Publié dans Javascript | 18 commentaires

Dans la série jQuery voici un petit système de commentaire ! L’idée est simple : un utilisateur peut remplir un formulaire pseudo+commentaire et lorsqu’il l’envoie, hop son message apparait sans rechargement de la page en tête des autres commentaires. Pour l’instant pas d’Ajax, donc pas d’enregistrement dans une base de données, mais c’est pour le prochain article : un système de commentaire avec jQuery en Ajax (2) ! D’abord le code HTML :

<form action="?id=commentaire" method="post" id="form">
 <fieldset>
 	<legend>Ajouter un commentaire</legend> 
	<label for="pseudo">Pseudo</label>
 	  <input type="text" name="pseudo" id="pseudo" />
 	<br />
 	<label for="contenu">Commentaire</label>
 	  <textarea name="contenu" id="contenu" rows="4" cols="4"></textarea> 
	<br />
 	<input type="submit" value="Ok" />
 </fieldset>
 </form>
 <div id="commentaire">
 	<p class="last pair first" id="com_1"><strong>BN</strong> a dit :<br />Coucou !  Je m'appelle BN et je suis un BN, et toi, tu fais quoi dans la vie ?</p>
 </div>

Continuer la lecture

Menu accordéon facile en jQuery

Publié dans Javascript | Laisser un commentaire

Et je continue avec ma série jQuery ! Aujourd’hui, l’idée est de réaliser un menu accordéon plutôt cool : Démo menu accordéon. En voici le code HTML :

<dl>
	<dt>Titre 1</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
	<dt>Titre 2</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
	<dt>Titre 3</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
		<dd>Exemple 5</dd>
	<dt>Titre 4</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
	<dt>Titre 5</dt>
		<dd>Exemple 1</dd>
		<dd>Exemple 2</dd>
		<dd>Exemple 3</dd>
		<dd>Exemple 4</dd>
		<dd>Exemple 5</dd> </dl>

Continuer la lecture

Javascript

Action lors de la modification d’un champ : change(function)

Publié dans Javascript | Laisser un commentaire

En ce moment, je fais quelques tests avec jQuery histoire d’améliorer un petit peu mon niveau dans ce framework avec lequel j’ai déjà bidouillé quelques fois. Aujourd’hui, j’ai simplement cherché à effectuer une action lorsqu’un utilisateur modifie la valeur d’un champ : Démo modification d’un champ. Pour cela, il suffit d’utiliser la méthode change(function) de jQuery sur le champ en question. Voyons un exemple. D’abord le code HTML :

<form action="" method="post">
<fieldset>
	<legend>Élévation au carré</legend>
	<label for="nbElement">Nombre à élever au carré :</label>
	<input type="text" name="nbElement" id="nbElement" size="4" value="12"  />
	<br />
	<span id="max"></span>
</fieldset>
</form>

Continuer la lecture