Supprimer un item de CheckBoxList en javascript
Bonjour , je vous explique mon problème. J'ai un formulaire avec une div caché, et qui s'affiche lors du déclenchement d'un événement. Dans cette div on y trouve une CheckBoxList et une DropDownList.
Le but étant de pouvoir rafraichir ma DIV et donc son contenu a chaque changement d'item de la DropDownList. Je crée donc dynamiquement les cases à cocher mais comment faire pour les supprimer ????
Voici un extrait du code de la page asp :
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
| <div id="formajout" runat="server" style="display:block">
<center><h3>Ajout d'un tiers</h3>
<table style="width: 380px" border="0" cellpadding="0" cellspacing="0" id="TableP">
<tr>
<td style="width: 100px; height: 25px" align="right" valign="middle">Liste des tiers: </td>
<td align="left" style="width: 300px;" valign="middle">
<asp:DropDownList ID="CB_Tiers" onchange="RefreshForm(this.form,this.id,'TB_telephone','TB_fax','TB_email','CB_qualite')" runat="server" Width="208px">
</asp:DropDownList>
</td>
</tr>
<tr>
<td style="width: 80px; height: 36px" align="right" valign="middle">Qualité</td>
<td style="width: 300px; height: 36px" align="left" valign="middle">
<asp:CheckBoxList ID="CB_qualite" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" Width="208px">
<asp:ListItem Value="Test"></asp:ListItem>
</asp:CheckBoxList></td>
</tr>
<tr>
<td style="width: 80px; height: 36px" align="right" valign="middle">Téléphone</td>
<td style="width: 300px; height: 36px" align="left" valign="middle"><asp:TextBox ID="TB_telephone" Enabled="false" runat="server" Width="205px"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 80px; height: 36px" align="right" valign="middle">Fax</td>
<td style="width: 300px; height: 36px" align="left" valign="middle"><asp:TextBox ID="TB_fax" Enabled="false" runat="server" Width="205px"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 80px; height: 36px" align="right" valign="middle">Email</td>
<td style="width: 300px; height: 36px" align="left" valign="middle"><asp:TextBox ID="TB_email" Enabled="false" runat="server" Width="280px"></asp:TextBox></td>
</tr>
<tr id="TrEspaceBouton">
<td colspan="3" style="height: 10px"></td>
</tr>
<tr>
<td colspan="3" id="TrBouton" align="center"><button type="submit" onclick="javascript:Valider();" style="height: 30px" ><table cellpadding="0" cellspacing="0" style="cursor: hand"><tr><td><%--<img alt="Actualiser" src="img/actualiser.png" style="margin: 0px" />--%></td><td> Valider</td></tr></table></button></td>
</tr>
</table>
</center></div> |
Voici la fonction js qui permet le rafraichissement via une page .aspx
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
| function RefreshForm(f,MonId,IdMaj,IdMaj2,IdMaj3,IdMaj4)
{
// var index = document.getElementById("CB_Tiers").selectedIndex;
var index = f.elements[MonId].selectedIndex;
if(index >= 0) {
var xhr_object = null;
if(window.XMLHttpRequest) // Firefox
xhr_object = new XMLHttpRequest();
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest... Mise à jour impossible.");
return;
}
xhr_object.open("POST", "GestionMenuDeroulant.aspx?id=formulaire", true);
xhr_object.onreadystatechange = function() {
if(xhr_object.readyState == 4)
eval(xhr_object.responseText);
}
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=ISO-8859-1");
var data = "TB="+IdMaj+";"+IdMaj2+";"+IdMaj3+"&CB="+IdMaj4+"&tiers="+escape(f.elements[MonId].options[index].value);
xhr_object.send(data);
}
} |
Et enfin le code behind de la fameuse page qui permet le rafraichissement :
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
| If Not (Request("id") Is Nothing) Then
'Response.Write("if (document.getElementById('" & Request("CB") & "').cells.length > 0) { for(var i=0;i<document.getElementById('" & Request("CB") & "').cells.length;i++) { document.getElementById('" & Request("CB") & "').cells.remove; } }")
Response.Write("if (document.getElementById('" & Request("CB") & "').cells.length > 0) { document.getElementById('" & Request("CB") & "').cells.length = 0 }")
Dim oCommand = New SqlCommand("select qualite, telephone1, fax, email from tiers where nom='" & Replace(Request("tiers"), "'", "''") & "' order by qualite", oC)
Dim dr1 As SqlDataReader = oCommand.ExecuteReader()
If dr1.HasRows Then
Dim tabvalue() As String = Request("TB").Split(";")
While dr1.Read()
Response.Write("document.getElementById('" & tabvalue(0) & "').value =""" & dr1(1).ToString.Trim & """;")
Response.Write("document.getElementById('" & tabvalue(1) & "').value =""" & dr1(2).ToString.Trim & """;")
Response.Write("document.getElementById('" & tabvalue(2) & "').value =""" & dr1(3).ToString.Trim & """;")
Dim tabQualite() As String = dr1(0).ToString.Trim.Split(";")
If (tabQualite.Length > 1) Then
For Each Qualite As String In tabQualite
Response.Write("var option = document.createElement('input'); var label = document.createElement('label'); option.type='checkbox'; option.value=""" & Qualite & """; label.innerHTML=""" & Qualite & """; document.getElementById('" & Request("CB") & "').appendChild(option); document.getElementById('" & Request("CB") & "').appendChild(label);")
Next
Else
Response.Write("var option = document.createElement('input'); var label = document.createElement('label'); option.type='checkbox'; option.value=""" & tabQualite(0) & """; label.innerHTML=""" & tabQualite(0) & """;document.getElementById('" & Request("CB") & "').appendChild(option); document.getElementById('" & Request("CB") & "').appendChild(label);")
End If
End While
End If
dr1.Close()
end if |
