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.

**eminesc** · 02/08/2013, 14h53

Je ne te suis pas trop sur là où tu veux en venir.
Le data-role en question me sert en l'occurence à grouper les boutons du formulaire que j'ajoute.
Et il est également présent dans les deux exemple puisque j'ajoute mes élément dans le fieldset qui contient ce controlgroup.

A moins que tu ne veuille dire d'jouter non pas l'intérieur des fieldset mais le fieldset en lui-même ? j'ai déjà fait où ça ne donnait rien de plus :/

**Darkaurora** · 02/08/2013, 15h56

Bah ma pensée est que lorsque tu insère le code en statique cela fonctionne mais pas lorsque tu génère ce code. Donc pour moi ta mise en page dois nécessité l'intervention d'un script permettant l'affichage façon mobile.

Supposons que tu génère ce même code en php aurais tu ce genre de problème?

Donc soit cela viens de l'UI Mobile, soit cela viens de ton code, soit cela viens des deux. Mais n'ayant pas l'ensemble je ne peux pas te renseigner au mieux.

Désoler

**eminesc** · 02/08/2013, 16h22

Okay, je pense voir ce que tu veux dire... Merci pour tes indcations.
Pour pur test, est-ce que tu saurais s'il existe l'équivalent d'une méthode .load, ou .reload pour une défini ? Je sais que ça existe pour les pages, mais impossible de faire marcher pour un bloc.

**Darkaurora** · 02/08/2013, 16h43

si tu passes par ajax tu peux le faire oui.

Ajout de contenu dynamique à un formulaire

jQuery

Discussions similaires

Partager

Partager