Discussion :

[SpaceFrog]

Attention
readonly doit s'ecrire readOnly selon la syntaxe javascript

[SpaceFrog]

Petit oubli rectifié ...
et non des moindre en ce qui concerne la balise form, elle ne semble par déroger au name en lecture seule et du coup PHP ne récupèrait pas bien les varaible en post ou get ...

d'où la joute de ce test :

Code :

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

1
2
3
4
 
   if(HasH['obj']=='form'){Elt=(isIE)?('<form name="'+HasH['name']+' >'):HasH['obj'];
	                         Special=(isIE)?true:false;
	                         }

Attention il se peut que d'autres objets posent le même genre de souci ... si vous les croisez, merci de me les signaler

[SpaceFrog]

Et hop
input type filed tripped on name detector !

Code :

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

1
2
3
case('file' ): Elt=(isIE)?'<input name="'+HasH['name']+'">':HasH['obj'];
							  Special=(isIE)?true:false;	
							  break;

modifié dans la source initiale

[Daï2]

il est vraiment bien ce script. Par contre je voudrais insérer le formulaire dans un div spécifique. Est il possible de préciser l'endroit d'insertion ???

Merci d'avance,

[SpaceFrog]

oui tout à fait il suffit juste de modifier au niveau de l'appendChild ...

ça se passe sur cette ligne là

Code :

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

 if(Flux.length==1){document.body.appendChild(Flux.pop())}

il suffit de remplacer
document.body par document.getElementById('????')

[Bovino]

Pour mettre à jour les attributs HTML à convertir en JavaScript :

• class => className

Sinon, une fonction un peu similaire :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function addDOM(elt, props){
    var new_elem, proprietes;
	if (props['name'] && document.all) {
		new_elem = document.createElement('<' + elt + ' name="' + props['name'] + '">');
	}
	else {
		new_elem = document.createElement(elt);
	}
    for (proprietes in props) {
        proprietes == 'style' ? new_elem.style.cssText = props['style'] : new_elem[proprietes] = props[proprietes];
    }
    return new_elem;
}

Explications :
* Cette fonction crée un élément HTML et le retourne, reste à intégrer du contenu et à l'insérer dans la page dans la fonction appelante ;
* Elle prend comme arguments : un nom de balise (String) et un objet (Hash) de propriétés. Notez que j'ai utilisé la boucle for ... in afin d'éviter des notations de type props[props[i]] que je trouve assez laides pour atteindre les propriétés, cela oblige à passer par un objet et non un Array !
* La propriété style est une chaine de propriétés CSS. J'utilise cssText, la syntaxe est donc celle CSS et non JavaScript (non camélisé).

Exemple d'appel de cette fonction :

Code :

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

addDOM('div', {'id': 'ajout', 'name': 'toto', 'style':'color: red; background-color: navy', 'onclick': function(){alert(this.name)}});

Notez qu'il est préférable de systématiquement passer le nom des propriétés sous forme de chaîne, même si cela n'est pas nécessaire pour toutes
De plus, j'ai essayé d'attribuer le name directement dans la première condition pour FF aussi puis de faire un delete de cette propriété dans le hash, mais ça buggue.

Testé pour le moment uniquement sous IE7 et FF3

Edit :
Je viens de corriger le code de création d'élément !

[sebhm]

il est vraiment super ce code, mais y'a un truc que je n'arrive pas à faire.
je veux créer plusieurs liens et ajouter un evenement "onclick" dessus.

Je me suis inspiré de l'exemple de Bovino pour la syntaxe du "onclick"

Code :

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

1
2
3
for(var cpt=0;cpt<10;cpt++) {
  $C({"obj":"a","href":"#","name":"lien_"+cpt,"id":"lien_"+cpt,"innerHTML":"Cliquez-moi","onclick":function () {ma_super_fonction(cpt)} });
}

ce code s'exécute correctement
Mais ne fait pas ce que je voudrais...

Tous les liens vont afficher le meme message car la variable 'cpt' ne sera évaluée que lors de l'événement 'onclick'.

Je voudrais que le lien 1 prenne 'cpt=1', le lien 2 'cpt=2' ...

la variable cpt est pourtant correctement utilisée pour les attributs "name" et "id" mais je n'arrive pas à m'en servir dans le "onclick"

une idée ?

[Bovino]

Code :

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

"onclick":function () {ma_super_fonction(this.id.replace('lien_',''))}

devrait le faire

[sebhm]

OK je te remercie pour cette astuce.

j'avais pensé faire un truc pareil (c'est à dire utiliser le nom en passant un this.name et aller chercher le compteur) mais ce n'était pas aussi rapide que tu l'as fait !

Par contre, ce n'est qu'un contournement du probleme initial.
Est-il possible de passer dans le code du "onclick" une variable Javascript qui devient une valeur "en dur" dans le code HTML ?? (c'est clair ?)

[SpaceFrog]

cela rejoint un autre post de la FAQ sur l'attribution d'un onclick dans une boucle ...
http://javascript.developpez.com/faq...lick.dynamique

[gwyohm]

Dans la série des attributs qui sont en readonly pour IE (tel que name pour les input), j'en ajoute 2 sur lesquels je suis tombé y'a pas longtemps (je n'ai pas vérifié les sources pour voir s'ils étaient déjà gérés) :

• contenteditable sur les div par exemple
• usemap sur les images

[SpaceFrog]

Du nouveau avec IE8 ...
Il semblerait que IE8 accepte désormais l'attribution du name dynamiquement...
JE n'ai pas testé mais c'est eut être du au mode de compatibilité ..
Il faut donc rajouter un sniffer pour détecter la version 8 de IE et la sortir du isIE...

[Invité]

Genial cet outil...

Et en me délectant a te lire, et a lire les interventions , je me disais avant de te remercier:

Qu'est-ce que cela aurait été géant si tu avais enfin donné le deuxiémement

Deux règles du succès:
1) Ne communiquez jamais à quelqu'un tout votre savoir...

....

[okoweb]

Ce code est-il encore d'actualité? Avec les innerHTML méthode propriétaire. Pourquoi pas de appendChild?

Est-ce on peut avoir un exemple de création d'un formulaire simple?

Merci d'avance...

[SpaceFrog]

Je ne suis pas sur que tu intervienne sur le bon post ?

InnerHTML ??? où ça ? ce script utilise le DOM createElement

innerHTML est propriétaire ?

Niveau actualité la seule chose qui ait évolué c'est que sous IE 8 il semblerait que l'on puisse attribuer un name en runtime. Donc le test IE or not IE doit être modifié à ce niveau en IE <8 or not IE & IE8

pour ce qui est de l'exemple de form ... il y en a un dans le premier post

[okoweb]

Salut,

InnerHTML ??? où ça ? ce script utilise le DOM createElement
innerHTML est propriétaire ?

Code :

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

1
2
3
4
5
 
    var myselect=  $C({'obj':'select'}) ;
        $C({'obj':'option', 'value':'1','innerHTML':'option 1'}) ;
        $C({'obj':'option', 'value':'2','innerHTML':'option 2'}) ;
    $Close(myselect);

InnerHTML est propriétaire IE

Niveau actualité la seule chose qui ait évolué c'est que sous IE 8 il semblerait que l'on puisse attribuer un name en runtime. Donc le test IE or not IE doit être modifié à ce niveau en IE <8 or not IE & IE8

Effectivement depuis IE 8 monInput.name marche déjà

pour ce qui est de l'exemple de form ... il y en a un dans le premier post

Je vais encore voire vraiment, la doc pour ce script n'est pas trop claire.

Déjà merci pour ce script.

[SpaceFrog]

qu'entends tu par propriétaire ???

innerHTML est crossbrowser ...

[okoweb]

qu'entends tu par propriétaire ???

innerHTML est crossbrowser ...

"innerHTML" est une méthode propriétaire IE (Internet Explorer) et ne respecte pas les standards du web.

[sebhm]

je dirais que c'est le terme propriétaire qui est le sujet de discorde

innerHTML is not a part of the W3C DOM specification. However, it is supported by all major browsers.