Bonjour,
Voilà j'ai un petit soucis en utilisant plusieurs 'techno' que je ne maitrise pas complètement...
J'ai une page dans laquelle j'utilise le framework bootstrap et des bootstrap switch.
j'ai une checkbox qui a une allure plus sympa pour faire un On/Off .
cette checkbox est dans un formulaire. A la soumission du formulaire, je récupère l'état de la checkbox, je mets à jour ma bdd et je mets la div qui contient le formulaire via Ajax.
j'ai déjà ce mode de fonctionnement dans d'autres partie de mon site, ça fonctionne parfaitement.
Mais là, à la mise à jour de la div, la checkbox perd son apparence et redevient une 'vilaine' checkbox carrée...
J'ai comparé le source de la page avant et après la mise à jour, c'est identique. Je pensais à un problème de CSS, mais c'est peut-être autre chose...
Pour situer mon problème, j'ai fait une page minimaliste qui met bien évidence mon soucis (je précise, je suis bien conscient que mon exemple ne sert à rien, mais comme précisé, j'ai épuré le code 'utile' pour essayer de comprendre mon problème):
une page "index.php" avec la div et le formulaire
A la soumission, j'affiche une popup avec l'état de la checkbox et le nom de div (pour debug).
La page maj_div.php appelée ne fait rien d'autre qu'un echo du code html de la div+formulaire
voici le lien :
http://minbiocabanon.free.fr/static_domini/test/
Les sources :
index.php (avec le code ajax)
maj_div.php
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 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="ISO-8859-1"> <meta name="description" content="" /> <!-- Les feuilles de styles --> <link href="css/bootstrapSwitch.css" rel="stylesheet"> <!-- JS files for Jquery --> <script type="text/javascript" src="js/jquery-latest.js"></script> <!-- JS files for bootstrap switches--> <script type="text/javascript" src="js/bootstrapSwitch.js"></script> <script type="text/javascript"> function request(id_div) { // on récupère les valeurs et checkbox du formulaire var myvar = document.getElementById('monid').checked; alert('id: '+ id_div +', myvar :'+ myvar); // TEST ------------ !! if (id_div==""){ document.getElementById(id_div).innerHTML=""; return; } if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById(id_div).innerHTML = xmlhttp.responseText; } } // on appelle la page php avec les valeurs du formulaire en paramètre xmlhttp.open("GET","maj_div.php",true); // on envoie ce que nous a retourné la page php dans la div xmlhttp.send(); } </script> </head> <body> <!-- Part 1: Wrap all page content here --> <div id="wrap"> <div class="container"> <div id="madiv"> <form method="POST" name="formulaire" action=""> <div class="switch switch-small" data-on="success" data-off="danger" data-on-label="Ouvert" data-off-label="Ferme"> <input type="checkbox" id="monid" name="chk"/> </div> <input class="btn btn-primary btn-small" type="button" value="Appliquer" onclick="request('madiv');return false;"/> </form> </div> </div><!-- /container --> </div><!-- /wrap --> </body> </html>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 <?php echo ' <form method="POST" name="formulaire" action=""> <div class="switch switch-small" data-on="success" data-off="danger" data-on-label="Ouvert" data-off-label="Fermé"> <input type="checkbox" id="monid" name="chk"/> </div> <input class="btn btn-primary btn-small" type="button" value="Appliquer" onclick="request(\'madiv\');return false;"/> </form> '; ?>
Ai-je oublié quelque chose? Est-ce le framework bootstrap switch qui ne supporte pas ce mode de fonctionnement?
Merci d'avance pour votre aide,
RzBo
Partager