Invisibilité d'une CheckBox crée dans une fonction javascript
Hello à tous,
Après les Datagrid, je continue mon exploration des objets Dojo : je suis confronté au Pb que ma CheckBox est visible si je la déclare dans le code HTML, mais invisible si je la crée à partir d'une fonction javascript.
Je crée un tableau 1 ligne - 3 colonnes avec :
1-ère cellule : CheckBox crée comme un élément HTML ( dans ce cas quel avantage procure dojotype="dijit.form.CheckBox" par rapport à un élément <input type="checkbox" ... ? );
2-ème cellule : CheckBox crée à partir d'une fonction javascript puis ajoutée au DOM;
3-ème cellule : TextBox crée à partir d'une fonction javascript puis ajoutée au DOM;
Celà à partit du code suivant :
Code:
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
| <html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="resources/Dojo-1.3.0/dojo/dojo.js">
</script>
<style type="text/css">
@import "resources/Dojo-1.3.0/dijit/themes/nihilo/nihilo.css";
@import "resources/Dojo-1.3.0/dojox/grid/resources/Grid.css";
@import "resources/Dojo-1.3.0/dojox/grid/resources/nihiloGrid.css";
.dojoxGrid table {
margin: 0;
}
</style>
<script type="text/javascript">
djConfig="parseOnLoad: true, isDebug: true";
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.TextBox");
function casacocher() {
var mycase = new dijit.form.CheckBox({name: "checkb", value: "etat", checked: false,
onChange: function(x){ alert('commute avec = ' + x + 'value = ' + checkb.attr('value') ); }
}, document.createElement('td'));
// ajouter la case la section td "maCase":
dojo.byId("maCase").appendChild(mycase.domNode);
}
function zonetext() {
var mytext = new dijit.form.TextBox({}, document.createElement('td'));
// ajouter le nouveau bouton à la section td "monTexte":
dojo.byId("monTexte").appendChild(mytext.domNode);
}
dojo.addOnLoad(casacocher);
dojo.addOnLoad(zonetext);
</script>
</head>
<body>
<table border="2">
<tr>
<td>
<input id="mycb" dojotype="dijit.form.CheckBox"
name="gnom" checked="checked" value="on"
type="checkbox"
style="width: 140px; height: 40px;"/>
<label for="mycb"> Gestion Nom </label>
</td>
<td id="maCase" dojotype="dijit.form.CheckBox" style="width: 140px; height: 40px;">
</td>
<td id="monTexte" dojotype="dijit.form.TextBox"style="width: 140px; height: 40px;">
</td>
</tr>
</table>
</body>
</html> |
Si les cellules 1 et 3 sont affichées dans le navigateur, la cellule 2 n'affiche aucun contenu, bien que l'élément soit présent quand je fais une inspection avec Firebug :
Code:
1 2 3 4 5 6 7 8 9 10 11 12
| <td>
<input id="mycb" type="checkbox" style="width: 140px; height: 40px;" value="on" checked="checked" name="gnom" dojotype="dijit.form.CheckBox"/>
<label for="mycb"> Gestion Nom </label>
</td>
<td id="maCase" style="width: 140px; height: 40px;" dojotype="dijit.form.CheckBox">
<div class="dijitReset dijitInline dijitCheckBox" wairole="presentation" role="presentation" widgetid="dijit_form_CheckBox_0">
<input id="dijit_form_CheckBox_0" class="dijitReset dijitCheckBoxInput" type="checkbox" dojoattachevent="onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick" dojoattachpoint="focusNode" name="checkb" value="etat" tabindex="0" aria-pressed="false" style="-moz-user-select: none;"/>
</div>
</td>
<td id="monTexte" style="width: 140px; height: 40px;" dojotype="dijit.form.TextBox">
<input id="dijit_form_TextBox_0" class="dijit dijitReset dijitLeft dijitTextBox" type="text" autocomplete="off" dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse" dojoattachpoint="textbox,focusNode" tabindex="0" widgetid="dijit_form_TextBox_0" value=""/>
</td> |
Je remarque cependant la présence de <div> ....</div> qui est absent dans le cas de la TextBox de la cellule 3.
Par ailleurs, lorsque je fais un clic sur la 2-ème cellule, j'obtiens checkb is not defined
Une idée avant que je n'abandonne cette façon de procéder?