Discussion :

[Delack]

Bonjour,

Je rencontre un soucis dans la consommation de l’événement checked sur un bouton radio, j'explique :

J'ai un bouton radio comme ceci :

Code :

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

<asp:RadioButton ID="rdnMultiMer"  runat="server" Text="MultiMer"   GroupName="gnTypes"  CssClass="Bouton"  AutoPostBack="true" />

Ce que je souhaite faire, c'est pouvoir check un autre bouton radio quand celui-ci est coché, et le décocher quand celui-ci est décocher également. Pour cela, j'ai pensé à 2 solutions que j'ai mis en oeuvre

1ere solution : Avec l'évenement CheckedChanged dans l'attribut de la balise

Code :

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

<asp:RadioButton ID="rdnMultiMer"  runat="server" Text="MultiMer"   GroupName="gnTypes"  CssClass="Bouton" OnCheckedChanged="rdnMultiMer_CheckedChanged" />

voici la méthode correspondante :

Code :

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

1
2
3
4
5
6
7
8
9
10
 protected void rdnMultiMer_CheckChanged(object sender, EventArgs e){
            if (rdnMultiMer.Checked)
            {
                rbSante.Checked = true;
            }
            else
            {
                rbSante.Checked = false;
            }
        }

2eme solution : Utilisation de Jquery. Voici la fonction qui correspond :

Code :

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

1
2
3
if ($('input[id$="rdnMultiMer"]').is(':checked')) {
                $("#rbSante").attr('checked', 'checked');
            }

Le problème : Malgré ces deux méthodes, l’événement "Checked" n'est géré qu'une seul et unique fois tant que la page n'est pas rafraîchi. Ce que je souhaiterai, c'est pouvoir cocher et décocher ce bouton radio à volonté et que cela produise l'effet désiré (c'est à dire cocher ou décocher l'autre bouton radio).

Ce qui m'interpelle, c'est pourquoi cela n'est géré qu'une seul fois, et aussi, pourquoi mettre ceci AutoPostBack="true" pour que l’événement soit pris en compte immédiatement ? La gestion des événements de ce type m'échappe complètement.

Merci pour votre aide

[damienolive]

Bonjour,

C'est très simple !
Dans ton javascript, tu fais seulement un test lors du chargement de l'écran.
Ce qu'il faut faire c'est :

Code :

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

1
2
3
4
5
6
 
$("macheckbox").change(function() {
    if(this.checked) {
 
    }
});

Là, à chaque changement d'état, ton javascript sera relancé (mets un point d'arrêt pour vérifier).

Par contre, si tu utilise cette méthode, retire complètement le traitement ASPX avec les postbacks afin d'éviter que l'un et l'autre se court-circuitent.

[Delack]

Salut,

Je suis nouveau dans le domaine de l'asp.NET et du Jquery, cela n'est pas très compliqué en effet

J'ai essayé ta solution damienolive et j'ai réussi à la faire fonctionner correctement, merci beaucoup !!

Maintenant il ne me reste plus qu'à affecter la valeur checked ou non à mon 2eme bouton radio, mais je n'y arrive pas , j'ai essayé avec :

Code :

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

$('input[name="rbSante"]').attr('checked', 'checked');

ou encore

Code :

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

$('#rbSante').val(['0'])

mais cela ne marche pas . Une solution ? Merci d'avance !

[vermine]

Quelle est la version de jQuery ?

Si c'est la 1.9 (au supérieur), alors essaie ceci :

Code :

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

$("macheckbox").prop("checked", true)

Mais là, du coup j'aurais dû te déplacer dans le forum jQuery.

[Delack]

Désolé avec toutes ces techno... je suis un peu paumé, surtout qu'au tout départ, c'est censé être un evenement reconnu dans les propirétés avec OnCheckedChanged, c'est pour cela que j'avais posté dans la partie Asp.NET au départ (sauf que je m’était trompé, et j'a posté dans ça dans ASP... bref).

J'ai testé :

Code :

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

 $("rbSante").prop("checked", true);

Et rien à faire... (avec $("#rbSante") aussi).

PS : Ma version de Jquery est la plus récente, la 2.0.2 si je ne dis pas de bêtise.

[damienolive]

Bonjour,

tu as un exemple ici :
http://www.electrictoolbox.com/check...eckbox-jquery/

J'espère que ça te servira

Code :

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

1
2
 
$('input[name=foo]').attr('checked', true);

[Delack]

Salut,

Merci pour l'exemple !

Je n'ai pas encore régler mon soucis mais je commence à comprendre ce qui se passe réellement. Quand on écrit une balise de type <asp:[nomBalise>, le navigateur va transposer cela en une balise html qu'il est capable de reconnaître (d'ailleurs, est-ce le navigateur qui l’interprète comme cela, ou bien est-ce une modification au moment de la compilation... bref, ce n'est pas le sujet, je verrai cela plus tard).

Le soucis qui se produit, c'est qu'il va transformer du coup ceci :

Code :

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

 <asp:RadioButton ID="rbnMultiMer"  runat="server" Text="MultiMer" GroupName="gnTypes" CssClass="Bouton" />

En ceci:

Code :

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

1
2
3
4
<span class="Bouton Checked">
<input id="ctl00_ContentPlaceHolder1_rbnMultiMer" type="radio" value="rbnMultiMer" name="ctl00$ContentPlaceHolder1$gnTypes">
<label for="ctl00_ContentPlaceHolder1_rbnMultiMer">MultiMer</label>
</span>

Alors certe, ce sera au final un input de type radio mais... le comportement est quand même assez loin d'une vrai balise <input type="radio"> au final.

Donc je suis entrain de chercher une piste là-dessus, Je vous tiendrai au courant de mes recherches, et si certains souhaite faire partager leurs problèmes avec ce comportement et/ou solutions, évidemment c'est avec plaisir !

[damienolive]

Haaaa... les joies de l'ASP.NET...

En fait, ce sont les composants .Net qui génèrent autant de code... ça permet aux développeurs ne maitrisant pas trop HTML et JavaScript/Ajax de pouvoir développer une application web facilement.
Par contre du coup, c'est pas top pour ceux qui connaissent bien les langages web car au final c'est plus une perte de temps qu'autre chose.

C'est d'ailleurs en partie pourquoi ils ont sorti MVC .net mais trêve d'histoire et dis moi ce qui te pose encore problème sur le cas actuel.

Sinon pour répondre à ta question :
"(d'ailleurs, est-ce le navigateur qui l’interprète comme cela, ou bien est-ce une modification au moment de la compilation... bref, ce n'est pas le sujet, je verrai cela plus tard)"
En fait, c'est bien lors de la génération de la page que le HTML est créé.
C'est donc le code serveur qui va rajouter sa couche pour transformer le composant .Net en un HTML compréhensible par le navigateur.
Le navigateur lui ne fait que lire ce qu'on lui donne et ne touche pas le contenu de la page.

[Delack]

Merci pour les précisions.

Alors j'ai, en partie, réussi à faire ce que je souhaitait, mais encore une fois, le comportement est trés étrange. J'explique :

J'ai rajouter dans mon code javascript ceci :

Code :

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

1
2
3
4
5
   $("[type=radio]").each(function (i) {
                var id = $(this).attr("id");
                var splitted = id.split("_");
                $(this).attr("name", splitted[splitted.length - 1]);
            });

Cela me permet du coup de pouvoir modifier le nom des balises input par la fin de l'ID. Du coup je peux aisément utiliser le code suivant :

Code :

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

  $('input[name="rbSante"]').attr('checked', 'checked');

Et cela fonctionne, quand j'inspecte l'élément, il y a bien du coup un attribut nommé 'checked' qui possède la valeur 'checked'. Cependant, le comportement de ce dernier est assez bizarre dans le sens où, un autre radiobutton qui est déjà checked, le reste, alors que ces deux derniers appartiennent au même GroupeName.

J'ai joint une image et je vais tenter d'expliquer ce que je souhaite faire :

Dans l'encadre, lorsque l'on arrive sur la page, les éléments avec le texte "Tous" est coché par defaut (Pour la période, c'est la valeur aujourd'hui).

Ce que je souhaite, c'est lorsque l'on clique sur le radio "MultiMer" dans la section "Domaine", que le radio "Tous" de cette même section soit décoché et que le radio "Santé" soit coché à la place. En bas du screen, on peux voir que le bouton radio "Santé" possède l'attribut Checked avec la valeur Checked, mais que le radio "Tous" reste coché. Cela n'est pas trés normal à mon sens que d'avoir 2 boutons radio d'un même GroupName coché en même temps.

Voilà, j’espère avoir été clair

[Immobilis]

Salut,

Haaaa... les joies de l'ASP.NET...

Aucun rapport avec le shmilblick mais bon, inutile de troller...

Pourquoi ne pas utiliser le contrôle RadioButtonList et ce tuto?

Sinon, si vous voulez vraiment vous embêter à ne pas utiliser les fonctionnalités natives de l'ASP.NET, veillez à utiliser le ClientID des contrôles:

Code :

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

$("#<%= macheckbox.ClientID %>").prop("checked", true)

A+

[youtpout978]

C'est le problème avec les balises asp.net on pense qu'on va avoir un simple radio button derrière mais non, ça te génère un span et ça te met le nécessaire dedans.

Voilà comment faire pour modifier tes radiobutton:

Code :

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

1
2
3
4
5
 
<asp:RadioButton ID="rdnMultiMer" runat="server" Text="MultiMer" onClick="Cocher(value)"
            GroupName="gnTypes" CssClass="Bouton btn1" />
        <asp:RadioButton ID="rdnMultiMe2" runat="server" Text="MultiMer" onClick="Cocher(value)"
            GroupName="gnTypesDif" CssClass="Bouton btn2" />

veille à mettre 2 GroupName différent.

et le code JS

Code :

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

1
2
3
4
5
6
 var val = false;
        function Cocher() {
            val = !val;
            $('.btn1').children('input')[0].checked = val;
            $('.btn2').children('input')[0].checked = val;
        }

PS: T'aurais du faire ça avec des checkbox parce que le radiobutton tu peux pas vraiment le cocher et décocher par défaut.

[damienolive]

Bonjour,

Aucun rapport avec le shmilblick mais bon, inutile de troller...

Ok j'avoue avoir volontairement forcé les traits cela dit ; WebForm a beau être très pratique, il faut avouer que le code qu'il génère tout autour n'est pas super clean, ou du moins, ne l'est pas parce qu'on ne maitrise pas parfaitement ce qui va être généré.

[Immobilis]

le code qu'il génère tout autour n'est pas super clean

Je viens juste de faire un petit test en créant un Webform avec un RadioButtonList. Voici le code généré:

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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
    </title>
  </head>
  <body>
    <form method="post" action="WebForm4.aspx" id="form1">
      <div class="aspNetHidden">
        <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDQwODQwNjcxZGQRUlTYmeDhpkBagWZrP0BawV4E7TPjPVI13+GFj6KjiQ==" />
      </div>
      <div class="aspNetHidden">
        <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAU9zxPa4se0F0VwAAmA+5oXLDRI7/igA9nT+nYCCiKRh2bBIRKNWJs14rr7qVxKIRw2UotCoiN4/VgZvG0nmzC5lhAmT0ES7q40xVVD01hDVhnznK+/B5XeDs6lpKmeTf/qpiQ1+0HgfY4guRJzlWg/" />
      </div>
      <div>
        <span id="RadioButtonList1">
          <input id="RadioButtonList1_0" type="radio" name="RadioButtonList1" value="Un" />
          <label for="RadioButtonList1_0">Un</label>
          <br />
          <input id="RadioButtonList1_1" type="radio" name="RadioButtonList1" value="Deux" />
          <label for="RadioButtonList1_1">Deux</label>
          <br />
          <input id="RadioButtonList1_2" type="radio" name="RadioButtonList1" value="Trois" />
          <label for="RadioButtonList1_2">Trois</label>
        </span>
      </div>
    </form>
  </body>
</html>

Je l'ai passé dans le validateur du W3C et j'obtiens

This document was successfully checked as HTML5!

Quand tu précises

ou du moins, ne l'est pas parce qu'on ne maitrise pas parfaitement ce qui va être généré.

Le composant RadioButtonList est fournit tel quel. Il permet de créer des boutons radio liés entre eux en générant du code conforme aux normes. Que vouloir de plus? J'aimerais bien savoir

A+

[Delack]

Bonjour à tous,

J'ai enfin pu résoudre mon soucis. Voici comment je m'y suis pris :

Code :

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

1
2
3
$("#btnDomaineRow1").find(".Bouton.Checked").removeClass("Checked")
$("#btnDomaineRow2").find(".Bouton.Checked").removeClass("Checked")
$('input[id$="rbSante"]').parent().addClass("Checked").find("input").attr("Checked","Checked");

J'ai du utiliser la fonction attr() cependant au lieu de prop().

Aprés pour l'histoire de savoir si le code généré est propre ou pas, je débute donc ma parole ne vaudra surement rien, mais je pense que mon point de vue peut se justifier : Il a beau être propre, en norme et tout ce que l'on veut comme adjectif, il se trouve que quoi qu'il arrive, on n'a pas la main sur ce qui va réellement se passer au final dans le navigateur du client.

Pour ma part, et avoir commencé par faire du PHP et ensuite de l'ASP.NET comme langage orienté web, je trouve cela assez étonnant de voir qu'une balise <asp:radiobutton> génère en réalité, coté client, 3 balises (la balise span, la balise input, et la balise label) au lieu d'une seul balise input, mais il me faudra un peu de temps pour que je m'y habitue. Cependant, cela alourdi considérablement la page au final non ?

N'hésitez pas à commenter le post si vous souhaitez apporter plus de précision, mais je le marque comme résolu étant donnée que mon problème est... résolu

Merci encore pour votre aide.

[youtpout978]

Bein tu peux utiliser une balise html classique et rajouté un

Code :

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

runat="server"

pour pouvoir y accéder depuis le code au moins là pas de surprise au niveau de la génération de la balise.

[Immobilis]

Ce que je souhaite, c'est lorsque l'on clique sur le radio "MultiMer" dans la section "Domaine", que le radio "Tous" de cette même section soit décoché et que le radio "Santé" soit coché à la place.

Sur ton image, je ne vois pas de bouton "MultiMer" dans la section "Domaine" mais dans la section "Type". Est-ce normal?

A+