J'utilise jQuery pour masquer et afficher des éléments lorsqu'un groupe de boutons radio est modifié / cliqué. Cela fonctionne bien dans les navigateurs comme Firefox, mais dans IE 6 et 7, l'action ne se produit que lorsque l'utilisateur clique ensuite ailleurs sur la page.
Pour élaborer, lorsque vous chargez la page, tout semble bien. Dans Firefox, si vous cliquez sur un bouton radio, une ligne du tableau est masquée et l'autre s'affiche immédiatement. Cependant, dans IE 6 et 7, vous cliquez sur le bouton radio et rien ne se passera tant que vous n'aurez pas cliqué quelque part sur la page. Ce n'est qu'alors qu'IE redessine la page, masquant et affichant les éléments pertinents.
Voici le jQuery que j'utilise:
$(document).ready(function () {
$(".hiddenOnLoad").hide();
$("#viewByOrg").change(function () {
$(".visibleOnLoad").show();
$(".hiddenOnLoad").hide();
});
$("#viewByProduct").change(function () {
$(".visibleOnLoad").hide();
$(".hiddenOnLoad").show();
});
});
Voici la partie du XHTML qu'elle affecte. La page entière est validée comme XHTML 1.0 Strict.
<tr>
<td>View by:</td>
<td>
<p>
<input type="radio" name="viewBy" id="viewByOrg" value="organisation"
checked="checked" />Organisation</p>
<p>
<input type="radio" name="viewBy" id="viewByProduct" value="product" />Product</p>
</td>
</tr>
<tr class="visibleOnLoad">
<td>Organisation:</td>
<td>
<select name="organisation" id="organisation" multiple="multiple" size="10">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</td>
</tr>
<tr class="hiddenOnLoad">
<td>Product:</td>
<td>
<select name="product" id="product" multiple="multiple" size="10">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</td>
</tr>
Si quelqu'un a des idées pourquoi cela se produit et comment y remédier, ils seraient très appréciés!