[AJAX] Bootstrap bouton switch, style non pris en compte après mise à jour div

**ridezebigone** · 01/04/2013, 15h39

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)

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>

maj_div.php

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

**ridezebigone** · 04/04/2013, 19h33

je me reponds tout seul...

le pb était bien le rechargement du js pour modifier l'apparence de la checkbox une fois la div mise à jour.

il faut ajouter une ligne ainsi :

Code :

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

1
2
3
4
5
 
if (xmlhttp.readyState==4 && xmlhttp.status==200){
   document.getElementById(id_div).innerHTML = xmlhttp.responseText;
   $('.switch').bootstrapSwitch();
}

merci pour l'aide

[AJAX] Bootstrap bouton switch, style non pris en compte après mise à jour div

AJAX

Discussions similaires

Partager

Partager