Rendu de contenu généré en jQuery

**glen1789** · 31/08/2012, 11h34

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 :

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

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

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

**SpaceFrog** · 31/08/2012, 11h44

colle une classe sur la label avec une largeur fixe ?

**glen1789** · 31/08/2012, 11h57

Bonjour,

C'est fait au niveau du css:

Code :

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

1
2
3
4
 
#contacts .contact_element label {
       width: 250px;
}

J'ai continué mes recherches et j'ai vu qu'en éditant le html au niveau de l'outil de chrome, en ajoutant des retours à la ligne entre les balises l'affichage redevenait correct, maintenant ma question c'est comment faire ça au niveau du jQuery? (le \n en fin de ligne ne semble pas fonctionner).

**SpaceFrog** · 31/08/2012, 12h33

mets un class direct dans le label

colle temporairement des border visibles au éléments pour visualiser les laregeurs

**glen1789** · 31/08/2012, 12h41

Merci pour ton aide mais le problème ne vient pas de là. Les éléments eux mêmes sont identiques (on peut le constater en utilisent les les onglets metrics et computed styles de l'outil de chrome) .

Au final j'ai trouvé la solution. Mettre des \n entre les différentes balises lors de la génération côté client.
Ça ne fonctionnait pas lors de mon premier essai à cause de l'oubli de l'ajouter au niveau du premier label.
Ça fonctionne parfaitement maintenant.
Par contre, ce qui me travaille c'est que ça ne devrait pas avoir d'influence sur le rendu si il y a ou non des retours à la ligne dans le code html.
Avez-vous des informations sur ce genre de comportement?

**NoSmoking** · 31/08/2012, 19h57

Bonjour,

Avez-vous des informations sur ce genre de comportement?

il s'agit des white-space qui pourrissent bien souvent la vie, il s'agit des espaces, tabulations et autre retours chariot.

Une seule solution efficace est de les supprimer lors de la crétion du document HTML, quand cela est nécessaire.

L'espace est dépendant des navigateurs.

à tester

Code html :

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

1
2
3
4
<input type="text" value="texte 1">
<input type="text" value="texte 2">
<br>
<input type="text" value="texte 1"><input type="text" value="texte 2">

Rendu de contenu généré en jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager