Le TwiBlog

The one with Twidi

Aller au contenu | Aller au menu | Aller à la recherche

mardi 3 juin 2008

Javascript et IE : création de boutons radio en javascript

Il y a deux ans et demi j'avais déjà soulevé un problème lors de la création d'éléments de formulaire en javascript sous internet explorer.

Je viens aujourd'hui d'en trouver un autre, auquel j'ai trouvé une solution, en anglais, que je précise ici (je ne précise que la solution qui marche partout)

Le problème est le suivant : quand on créé un bouton radio dans internet explorer, en javascript, via document.createElement('input')........ le bouton est bien créé mais on ne peut le cocher.

La solution, la seule, l'unique, est... de ne pas utiliser le dom pour cela, malheureusement. Il faut le créer en html :

<input type="radio" name="truc" id="bidule" value="chose" />

La solution qui semble le mieux fonctionner dans les différents navigateurs est, sans faire de test de navigateur :

elementParent.innerHTML += '<input type="radio" name="truc" id="bidule" value="chose" />'

C'est moche, mais c'est tout ce qui marche.

Autre point, il ne faut pas, pour IE, spécifier ici l'état "checked" car si un radio du même groupe (même attribut "name") est déjà coché, on se retrouvera avec deux boutons radio cochés...

Il faut, une fois nos inserts terminés, faire par exemple :

document.getElementById(input_id).checked = true

jeudi 23 mars 2006

JavaScript Kit- DOM (Document Object Model) Reference

Quelque soit votre niveau en javascript, il y a des fois ou vous avez juste besoin d'une bonne documentation, de qualité. Malheureusement, la plupart de ce que l'on peut trouver à ce sujet sur le net est souvent incomplet, en fouilli, inexact, et j'en passe. Bref, de quoi ne pas s'y retrouver.

Heureusement, notre espoir vient sous la forme d'une petite série de pages sur javascriptKit.com. Elles référencent les différents éléments, attributs et style que vous pouvez utiliser en javascript, le tout réparti en quelques simples catégories :

  • Window
  • Objet Document
  • Objet Element
  • Objet Event
  • Style

Certains éléments incluent également du code HTML/Javascript en guise d'exemple d'utilisation. De plus la page de l'objet Event inclue des colonnes IE/NS afin d'aider le développeur cross-browser.

La page tant attendue : http://www.javascriptkit.com/domref/

vendredi 9 décembre 2005

Javascript, input.value et onchange

Il n'est pas rare lors du traitement d'un formulaire de vouloir renseigner par script les champs qui le composent.

Un exemple typique : l'ouverture d'ue calendrier en popup qui, lors de la sélection d'une date, remplira les champs de la fenêtre appelante.

Un truc à savoir c'est que quand on modifie un champ en script, l'évenement onchange du champ n'est pas appelé !

Par exemple, si sur votre champ date vous avez un onchange qui vérifie que la date n'est pas dans le passé, et bien via le calendrier vous pourrez quand même choisir une telle date.

Ce qu'il faut faire, c'est, lors de la modification du champs, appeler juste après la methode onchange du champs

Exemple :

 monchamps.value = mavaleur;
 if (monchamps.onchange) { monchamps.onchange(); }

Ainsi, l'évènement sera appelé s'il existe.

PS : la bonne façon d'accéder à un champs est

 document.forms['name_du_formulaire'].elements['name_du_champ']

et non pas

 documents.name_du_formulaire.name_du_champs

mardi 15 novembre 2005

Javascript et IE : document.createElement('input') et document.forms['the_form'].elements['the_input']

J'ai découvert un petit bug dans IE6 (celui qui dit "un de plus"... ben il le dit... ).

Sur un site développé pour un client (celui dont je parlais il y a peu), j'ai une partie en javascript. On peut, en cliquant sur un bouton, ajouter des lignes de formulaire.

Voici une partie du code :

var input_mail = document.createElement('input');
input_mail.setAttribute('name', 'mail2');
input_mail.setAttribute('id', 'step3_mail2');
input_mail.className = 'step3_mail_input';
...
a_div_in_the_form.appendChild(input_mail);

Donc ajout classique d'un élément via le DOM.

Plus tard, j'ai un onsubmit sur le formulaire dans lequel j'effectue une validation.

Je veux donc pouvoir accéder au nouveau champs pour tester son contenu

Je fais donc, très logiquement

var input = documents.forms['the_form'].elements['mail2'];

Et bien pour IE6, impossible, l'élément n'existe pas. Pourtant quand on parcoure le tableau avec des index numériques, on trouve bien l'élément avec name = 'mail2'. J'ai aussi essayé avec l'id plutôt que le name, mais rien à faire. La création de l'élément n'a pas correctement mis à jour le tableau elements.

Pour éviter de refaire tout mon code, j'ai créé une petite fonction qui renvoie une table de hashage qui, pour chaque nom du tableau, me donne son index.

function el_id_by_name(el) {
	var els = new Array();
	for (i=0;i<el.length;i++) {
		if (el[i].name) {
			els[el[i].name] = i;
		}
	}
	return els;
}

Et mon code précédent devient

var els = el_id_by_name(document.forms['the_form'].elements);
var input = document.forms['the_form'].elements[els['mail2']];

Notez le remplacement de elements['mail2'] par elements[els['mail2']]

Voilà ;)

vendredi 23 septembre 2005

Javascript : getElementsBy.... CSS selector !

Les connaisseurs sauront combien peuvent être utiles les deux fonctions que sont

  • getElementById : récupérer un élément du DOM par son ID
  • get ElementsByTagName : récupérer un tableau d'éléments définis par un tag

Et bien voici quelques chose de très utile : récupérer un tableau d'éléments par un sélecteur CSS !

Deux scripts pour ça :

Je n'évoquerai pas les nombreuses possibilités offertes par ces scripts, mais néanmoins sachez que des outils tel que "csshover.htc" sont développés dans le même esprit (csshover.htc possède d'ailleurs une fonction GetElementsBySelect)

Il devient facile avec ce genre d'outil de développer ses propres htc ou équivalent, qui répondront à un besoin précis, plutôt que charger à chaque fois les htc qui peuvent ralentir le chargement de la page en l'analysant au démarrage.

mercredi 21 septembre 2005

Utiliser les sélecteurs CSS pour ajouter des évènements javascript

Même si mon titre n'est pas forcément très clair, c'est un outil fabuleux que je viens de découvrir : Behaviour : Using CSS selectors to apply Javascript behaviours

Cet outil permet, en utilisant des sélecteurs css comme descripteur, d'ajouter des évènements javascript à tout objet contenu dans une page, sans avoir à modifier le code xhtml de la page.

Le plus simple est de voir l'exemple exposé sur le site de l'auteur : http://bennolan.com/behaviour/

samedi 11 décembre 2004

Google suggest

Google vient de lancer Google Suggest, son nouvel outil de recherche.

En réalité ce n'est qu'un greffon associé au champ de saisie classique de google mais qui propose en temps réel au fur et à mesure de votre saisie, des suggestions de recherche, des expressions, tout en indiquant le nombre de résultats prévus.

Voici un exemple :

L'interface n'est disponible qu'en anglais mais les requêtes en français fonctionnent parfaitement.

Accès à Google Suggest