1 pièce(s) jointe(s)
Rendu de contenu généré en jQuery
Bonjour,
Je viens vers vous pour solliciter de l'aide à propos d'un problème que je n'arrive pas à cerner.
Une page générée à l'aide de php contient des éléments générés côté serveur.
Je génère ces mêmes éléments de manière dynamique à l'aide de jQuery (après une requête ajax), mon contenu est inséré à l'aide de la méthode jQuery append(), et il est affiché dans la page. Mon problème est au niveau du rendu de ces éléments, un problème d'alignement survient sur Chrome, Firefox et IE 8 (on ne parle même pas des précurseurs de celui-ci).
Je vous joins une image de ce problème.
Je vous joins également le code permettant de générer ces éléments :
-côté serveur
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
27
28
29
30
31
32
33
34
35
| <!--FIELDSET DES CONTACTS-->
<div class="colonne">
<fieldset id="contacts">
<legend>Contacts</legend>
<img class="minimize_icon interaction_icon" src="./icons/fwdw/24x24/minimize.png" alt=""/>
<img class="maximize_icon interaction_icon" src="./icons/fwdw/24x24/maximize.png" alt=""/>
<div class="liste_contacts">
<?php
$i = 0;
foreach($contacts_navire as $ind => $contact){
?>
<div class="contact_element">
<label><?php echo ucfirst(preg_replace("/_/"," ",$contact->getTypeContact()))." (".$contact->getLibelleContact().")"; ?></label>
<input type="text" class="input_navire" name="navire[contact][<?php echo $i; ?>][valeur_contact]" value="<?php echo $contact->getValeurContact(); ?>"/>
<input type="hidden" class="input_navire" name="navire[contact][<?php echo $i; ?>][type_contact]" value="<?php echo $contact->getTypeContact(); ?>" />
<input type="hidden" class="input_navire" name="navire[contact][<?php echo $i; ?>][libelle_contact]" value="<?php echo $contact->getLibelleContact(); ?>"/>
<input type="hidden" class="input_navire" name="navire[contact][<?php echo $i; ?>][id_contact]" value="<?php echo $contact->getId(); ?>"/>
<img class="edit_icon interaction_icon" src="./icons/fwdw/24x24/edit.png"/>
<img class="delete_icon interaction_icon" src="./icons/fwdw/24x24/croix_rouge.png"/>
</div>
<?php
$i++;
} ?>
<div class="more_contacts">
<span>Déplier</span>
</div>
</div>
<div id="contacts_ajout_util">
<span class="ajouter_label">Ajouter un nouveau contact pour ce navire...</span>
<span id="ajouter_contact">
<img class="img_ajouter interaction_icon" src="./images/dossier/list-add.png" alt="Cliquer pour ajouter un contact" title="Cliquer pour ajouter un contact"/>
</span>
</div>
</fieldset>
</div> |
-coté client (sachant que je génère uniquement un div contact_element dans mon javascript et que je l'insére en fin du div liste_contact)
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
|
var more_contacts = $("#contacts div.liste_contacts div.more_contacts");
var new_contact = $("<div class=\"contact_element\"></div>");
if($("#contacts .liste_contacts .contact_element").length == 0){
new_contact.hide();
new_contact.insertBefore(more_contacts);
this.toggleContacts();
}
else{
new_contact.insertBefore(more_contacts);
}
labe = "<label>"+type_text+" ("+label+")"+"</label>";
new_contact.append(labe);
labe = "<input type=\"text\" name=\""+self.prefix+"[contact]["+index+"][valeur_contact]\" value=\""+value+"\" class=\""+self.classes+"\"/>";
new_contact.append(labe);
labe = "<input type=\"hidden\" name=\""+self.prefix+"[contact]["+index+"][type_contact]\" value=\""+type_real+"\" class=\""+self.classes+"\"/>";
new_contact.append(labe);
labe = "<input type=\"hidden\" name=\""+self.prefix+"[contact]["+index+"][libelle_contact]\" value=\""+label+"\" class=\""+self.classes+"\"/>";
new_contact.append(labe);
labe = "<input type=\"hidden\" name=\""+self.prefix+"[contact]["+index+"][id_contact]\" value=\""+id_contact+"\" class=\""+self.classes+"\"/>";
new_contact.append(labe);
labe = "<img class=\"edit_icon interaction_icon\" src=\"./icons/fwdw/24x24/edit.png\"/>";
new_contact.append(labe);
labe = "<img class=\"delete_icon interaction_icon\" src=\"./icons/fwdw/24x24/croix_rouge.png\"/>";
new_contact.append(labe); |
-en dernier lieu le html récupéré dans les outils de développeurs de chrome :
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
27
28
|
<div class="colonne">
<fieldset id="contacts">
<legend>Contacts</legend>
<img class="minimize_icon interaction_icon" src="./icons/fwdw/24x24/minimize.png" alt="" style="display: block; ">
<img class="maximize_icon interaction_icon" src="./icons/fwdw/24x24/maximize.png" alt="" style="display: none; ">
<div class="liste_contacts">
<div class="contact_element" style="display: block; ">
<label>Telephone Fixe (TELEPHONE FIXE NAVIRE)</label>
<input type="text" class="input_navire" name="navire[contact][0][valeur_contact]" value="00881631814804">
<input type="hidden" class="input_navire" name="navire[contact][0][type_contact]" value="telephone_fixe">
<input type="hidden" class="input_navire" name="navire[contact][0][libelle_contact]" value="TELEPHONE FIXE NAVIRE">
<input type="hidden" class="input_navire" name="navire[contact][0][id_contact]" value="59">
<img class="edit_icon interaction_icon" src="./icons/fwdw/24x24/edit.png">
<img class="delete_icon interaction_icon" src="./icons/fwdw/24x24/croix_rouge.png">
</div>
<div class="contact_element"><label>Telephone Fixe (TELEPHONE FIXE NAVIRE)</label><input type="text" name="navire[contact][2][valeur_contact]" value="00000000000000000" class="input_navire"><input type="hidden" name="navire[contact][2][type_contact]" value="telephone_fixe" class="input_navire"><input type="hidden" name="navire[contact][2][libelle_contact]" value="TELEPHONE FIXE NAVIRE" class="input_navire"><input type="hidden" name="navire[contact][2][id_contact]" value="" class="input_navire"><img class="edit_icon interaction_icon" src="./icons/fwdw/24x24/edit.png"><img class="delete_icon interaction_icon" src="./icons/fwdw/24x24/croix_rouge.png"></div><div class="more_contacts" style="display: none; ">
<span>Déplier</span>
</div>
</div>
<div id="contacts_ajout_util">
<span class="ajouter_label">Ajouter un nouveau contact pour ce navire...</span>
<span id="ajouter_contact">
<img class="img_ajouter interaction_icon" src="./images/dossier/list-add.png" alt="Cliquer pour ajouter un contact" title="Cliquer pour ajouter un contact">
</span>
</div>
</fieldset>
</div> |
La seule différence que je constate entre le code généré côté serveur et celui côté client est que celui côté serveur prend en compte les retours à la ligne entre les balises html. Cela peut-il engendrer ce type de problème d'alignement? Si oui, y a-t-il un moyen de palier à ce problème?
Je vous remercie d'avance du temps passé à lire ce post. Je serai ravi de recevoir toutes les informations que vous pourrez donner en vue de résoudre ce problème.
