Discussion :

[okoweb]

Bonjour,
Voilà un script Domscripter que j'ai ramassé sur le web sur cette page. Il me facilite la vie pour faire du DOM.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
 
/* ===============================
| DOMSCRIPTER.JS
| Copyright, Andy Croxall (mitya@mitya.co.uk)
| For documentation and demo see http://www.mitya.co.uk/scripts/Domscripter---reduce-your-DOM-scripting-code-98
|
| USAGE
| This script may be used, distributed and modified freely but this header must remain in tact.
| For usage info and demo, including info on args and params, see www.mitya.co.uk/scripts
=============================== */
 
 
domscripter = function(params, debug) {
 
   //utility event registration method - mitya's clever method whereby even in IE 'this' inside the callback represents the element the event was bound to, not window
    arguments.callee.registerEvent = function(on, ev, func) {
        if (window.addEventListener)
            on.addEventListener(ev, func, false);
        else {
            if (!on.funcsCounter) on.funcsCounter = 0;
            on['func'+on.funcsCounter] = func;
            on.funcsCounter++;
            on.attachEvent("on"+ev, function() { for(var i=0; i<on.funcsCounter; i++) on['func'+i](window.event); });
        }
    }
 
    //die if insufficient args passed
    if (typeof params != "object" || !params.element || !params.parent) return false;
 
    //if we get this far, params OK. Build.
    var node = document.createElement(params.element);
 
    //add attributes
    if (typeof params.attrs == "object") {
        for (var w in params.attrs) {
            var attrName = w != 'classs' ? w : 'className';
            node[attrName] = params.attrs[w];
        }
    }
 
    //add options if element == 'select'
    if (params.element.toLowerCase() == 'select' && typeof params.options == 'object') {
    	var counter = 0;
        for(var r in params.options) {
        	var selected = !params.indexSelected ? (counter == 0 ? 'selected' : null) : (params.indexSelected == counter ? 'selected' : null);
            var opt = arguments.callee({element: 'option', parent: node, textNode: r, attrs: {selected: selected, value: params.options[r]}});
            node.appendChild(opt);
            counter++;
        }
    }
 
    //populate with text?
    if (params.textNode)
        node.appendChild(document.createTextNode(params.textNode));
 
    //if element is field or select and label passed, create label too
    if ((" "+['input', 'textarea', 'select'].join(" ")+" ").match(eval("/\\b"+params.element+"\\b/")) && params.label)
        arguments.callee({element: 'label', fadeIn: params.fadeIn, parent: params.parent, html: params.label, styles: params.labelStyles});
 
    //register events
    if (typeof params.evts == "object") {
        for (var w in params.evts) arguments.callee.registerEvent(node, w, params.evts[w]);
    }
 
    //inner HTML?
    if (params.html) node.innerHTML = params.html;
 
    //add styles
    if (typeof params.styles == "object") {
        for (var y in params.styles) node.style[y] = params.styles[y];
    }
 
    //publish
    !params.insertBefore ? params.parent.appendChild(node) : params.parent.insertBefore(node, params.insertBefore);
 
    //if fadeIn, start as hidden
    if (params.fadeIn) {
        node.style.display = 'none';
        $(node).fadeIn('slow');
    }
 
    //add clear afterwards?
    if (params.clear)
        arguments.callee({element: 'div', parent: params.parent, styles: {clear: params.clear}});
 
    //add br afterwards?
    if (params.br)
        arguments.callee({element: 'br', parent: params.parent});
 
    //assign new element to var, if called in an assignment
    return node;
 
}

Et comme exemple pour creer une liste de boutons radio:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DOM</title>
<script type="text/javascript" src="js/domscripter.js"></script>
<script type="text/javascript">
<!--
function dotest(){
    var container = document.getElementById('test');
    while(container.firstChild){
       container.removeChild(container.firstChild);
    }
    for(var i=1, c=5; i<c; i++){
    domscripter({element: 'input', parent: container, attrs: {type: 'radio',name: 'test',value: i,textNode: i}});
		domscripter({element: 'tiret',parent: container,textNode: i});
    }
}
// -->
</script>
</head>
<body onload="dotest();">
<div id="test"></div>
</body>
</html>

Bien pratique non, mais il rencontre le problème énoncé ici Comment attribuer une valeur à l'attribut name d'un élément créé par un script ?

Comment modifié ce script pour qu'il soit compatible sous IE 6?

Voir le comportement ici sous IE6. Firefox sans problème. Sur IE 6 quand on clique sur un bouton, il ne reste pas cauché(checked). Pire meme encore, PHP ne voit pas ce champs $_POST['test'].

Merci d'avance...

[SpaceFrog]

name sous IE<8 n'est pas attribuable en runtime sauf à declarer au moment de la creation de la balise

Code :

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

document.createElement('<input name="machin" >')

[Bovino]

Comment modifié ce script pour qu'il soit compatible sous IE 6?

En utilisant un script qui fonctionne (comme fourni ici) plutôt qu'un script qui ne fonctionne pas

[SpaceFrog]

Je me demande bien qui peut se casser la tête à fournir des script qui fonctionenent ...