Ajout de contenu dynamique à un formulaire
Bonjour à tous !
Je viens vers vous pour un léger problème de jquery mobile.
j'ai actuellement une unique page dont le contenue varie avec AJAX selon des formulaires à la suite. Pas de soucis de ce coté là... Mis à part sur la mise en page !
En fait, lorsque je valide un formulare, que je cache la div pour afficher la suivante, la mise en forme est "nulle". A la place de me retrouver avec une apparence jquery mobile, je me retrouve avec... rien.
Ca donne un truc comme ça en fait :
Ce qui ne va pas
A la place d'un truc comme ça :
Ce que je voudrais obtenir
Je vous montre mon bout de code, j'en coupe une grande partie parce que sinon ça ferait juste trop de choses à mettre.
La parti affichage html :
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
| <link href="css/jquery.mobile.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.mobile.js"></script>
<body>
[...]
<form action="form.php" method="post" id="catDec">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" id="field">
<!-- Here I want my set of radio button -->
</fieldset>
<br/>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<select name="selectTest" id="selectTest">
<option value="1">Value1</option>
<option value="2">Value2</option>
<option value="3">Value3</option>
</select>
</fieldset>
</div><br/>
<input type="checkbox" name="cbTest" id="cbTest" class="custom" />
<label for="cbTest">Some random text</label>
</fieldset>
</div>
<br/><br/>
<input type="submit" value="Continue" data-icon="arrow-r" ><br/> |
Et ma partie traittement :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| tableau[0]="value1";
tableau[1]="value2";
tableau[2]="value3";
tableau[3]="value4";
for (var i=1; i<tableau.length-1; i++) {
$("<br/>").prependTo("#field");
$("<label for="+tableau[i]+">"+tableau[i]+"</label>").prependTo("#field");
$("<input type='radio' value='"+tableau[i]+"' />")
.attr("id", tableau[i])
.attr("name", "rb_catDec")
.prependTo("#field");
} |
Je pense que le problème vient du fait que la page ne s'actualise pas, le contenu changeant après qu'elle se soit chargé. Comment faire un "reload" juste sur une div sans pour autant rechargé la page ?
A moins que le problème soit ailleurs ?
Merci !
