Ajout de contenu dynamique à un formulaire

**eminesc** · 02/08/2013, 10h05

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 html :

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
<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 :

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

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 !

**Darkaurora** · 02/08/2013, 10h29

Je pense que tu ne tiens pas compte des styles appliqués à tes éléments. Analyse bien tes éléments sur ta deuxième image, regarde les codes css ou less appliqués et ensuite applique les à ton code jquery

**eminesc** · 02/08/2013, 11h04

Les codes sont les mêmes :/
Je suis parti du statique, qui m'a permit d'obtenir le résultat que je voulais, et quand je le passe en dynamique, les styles s'enlèvent. Alors qu'en regardant les codes de rendus sur la page, j'obtiens la même chose, d'où mon souci.

**Darkaurora** · 02/08/2013, 11h12

peux tu me donner les codes statiques stp?

**eminesc** · 02/08/2013, 11h37

Bien sûr. Si ça se trouve a force d'avoir le nez dedans j'ai vraiment finis par louper un truc.
Voila :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<fieldset data-role="controlgroup" id="field">
   <input type="radio" name="rb_catDec" id="Value1" value="Value1" checked="checked" />
   <label for="Value1">Value1</label>
 
   <input type="radio" name="rb_catDec" id="Value2" value="Value2" />
   <label for="Value2">Value2</label>
   <input type="radio" name="rb_catDec" id="Value3" value="Value3"  />
   <label for="Value3">Value3</label>
 
   <input type="radio" name="rb_catDec" id="Value4" value="Value4"  />
   <label for="Value4">Value4</label>
</fieldset>

**Darkaurora** · 02/08/2013, 13h27

les data-role que tu as sur tes fieldset doivent être initialiser par un script je pense avec le peu d'éléments que j'ai je ne peux faire que cette supposition, mais les attributs data permettent généralement l'enregistrement de donnée distinctes sur un élément et peuvent servir à une initialisation.

Ajout de contenu dynamique à un formulaire

jQuery

Vue hybride

Discussions similaires

Partager

Partager