[DOM] Mise en page d'un innerHTML

Version imprimable

05/03/2009, 16h30
leFred

[DOM] Mise en page d'un innerHTML

Bonjour

Je développe un site de vente en ligne (php,mysql,css,ajax,javascript); j'ai une page showShop.php contenant plusieurs blocs (panier,infos de navigation, boutique)
Dans le bloc boutique je vais chercher le contenu de ma page boutique.php via une fonction ajax qui renvoie un innerHTML (ceci afin de n'actualiser que le bloc boutique lors de diverses actions de l'utilisateur) de la chaine générée par "boutique.php";

Le problème : si j'appelle ma page "boutique.php" en standalone, tout va bien j'ai la mise en page souhaitée; par contre dès que je la charge via l'actualisation ajax pour l'insérer dans la page "showshop.php", une bonne partie de la mise en page foire : tout est en gras, les caractères html ne sont pas interprétés, la largeur des bloc pas forcément respectés....

Bref je ne sais pas si j'ai bien posté au bon endroit mais vu que je pense que le problème vient du formatage via innerHTML j'ai posté ici (avec mes excuses si ce n'est pas bon)

J'ai essayé des truc avec htmlentities (php) mais rien n'y fait

Auriez vous une suggestion ?
05/03/2009, 16h34
SpaceFrog

oui je te suggère plutot de passer par le DOM pour crée les elements à partir de la reponse AJAX
Recupère une reponse Ajax sous forme d'objet JSON et fasi le evamuer par javascript
du coup il suffit de scanner l'objet pour construire les elements de la page ...

un debut d'exemple par ici:
http://www.developpez.net/forums/d53...ynamique-form/

sinon avec des styles css le innerHTML devrait etre interprété ...
la balise style etatn déja sur la page dans le head
le code html devra comporter les class ...
05/03/2009, 16h49
leFred

Merci de ta réponse mais c'est de la trop haute volée pour moi:cry:

Tant ton post que le post du lien cité s'apparente à de l'hebreux en ce qui me concerne

Et pour mon cas la generation de la page en php est déja rudement complexe à mes yeux donc de tout faire passer par ce genre de chose c'est ....gasp !!!!
05/03/2009, 17h07
Bovino

Citation:

Le problème : si j'appelle ma page "boutique.php" en standalone, tout va bien j'ai la mise en page souhaitée; par contre dès que je la charge via l'actualisation ajax pour l'insérer dans la page "showshop.php", une bonne partie de la mise en page foire : tout est en gras, les caractères html ne sont pas interprétés, la largeur des bloc pas forcément respectés....

J'imagine que si tu peux ouvrir ta page boutique.php correctement, c'est qu'il doit s'agir d'une page complète (balises head, body etc.) si c'est le cas, c'est cela qui pose surement problème !

Non, la page boutique php fait une requete dans la base de donnée et, après traitement dans une boucle genere une chaine de caracteres pour l'affichage de ce style

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
$aStringResult=$aStringResult."
		<div class='$aClass' style='$aStyle'><Strong>$substrDesignation</strong>
		   <div class='fondMiniature'>
		       <div style='position:relative;top:".$top."px;left:".$left."px;'>
			     <img src=$aPic width=$dst_w  height=$dst_h>
			  </div>
			</div>
				<div class='fondMiniatureCache'></div>  			
			<div class='textDesc'>$substrDescriptif</div>
			<div class='addCart'>
				<div class='prix'><strong>$prix</strong></div>
		   		<li class='drop'>
                	<ul class='btnCaddie'><li><a href='#' title='Ajouter à votre commande'><span onclick='envoieRequete(\"panier.php?aId=$ID\",\"panier\",$ID);'></span></a></li></ul>
				</li>
			</div>
			<form id='$formQuantityName' name='$formQuantityName' method='post' action='' class='formu' style='position:relative;top:-195px;left:193px;height:20px;float:left;'>
  					<select id='$selectQuantityName' name='$selectQuantityName' class='select'>
    				<option>1</option>
    				<option>2</option>
    				<option>3</option>
    				<option>4</option>
    				<option>5</option>
  					</select> <strong>unit.</strong>
				</form>				
		</div>";

06/03/2009, 15h56
leFred

Bon j'avance peu a peu en reformatant mes variables à coup de htmlentities, ça semble résoudre certains probèmes; par contre pour certaines apostrophes (vraisemblablement celles qui sont saisies dans la base (via un formulaire) par copié/collé) ainsi que certains caractères (à) celles-ci ne s'affiche pas mais sont remplacées par des point d'interogation; auriez-vous une idée ?
06/03/2009, 16h04
leFred

C'est bon j'ai trouvé grace à ceci

Je continuer mon exploration (j'ai des problème de z-index du coup avec ça pour mes boutons !!!)

Merci à vous

Hello

Me revoici avec mon soucis; sur un bouton "commander" de ma boutique, j'ai un hack pour les png transparent avec Hover pour IE6 qui fonctionnait dans la version précédente, mais qui ne fonctionne plus aujourd'hui (je veux dire juste le hover ne fonctionne plus, le png transparent est bien en place lui)

L'appel du hack et mise en place du bouton :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <?php header("Content-type: text/css; charset=iso-8859-1"); ?> <?php ob_start(); ?> .btnCaddie span {background-image:url('caddie.png');} <?php include_once 'replacePngTags.php'; echo replacePngTags(ob_get_clean()); ?>
Le processus de Hover dans la css :
Code:

1 2 3 4 5 6 7 8 .addCart ul li a:hover span { left: -104px; padding-left: 104px; height: 28px; overflow:hidden; }
Me demander pas pourquoi je l'ai mis dans une liste, c'est le seul moyen que j'ai trouver de le faire fonctionner;

J'ai essayer en mettant
Code:

1 2 3 4 5 6 7 8 #boutique .addCart ul li a:hover span { left: -104px; padding-left: 104px; height: 28px; overflow:hidden; }
car je pense que c'est un rpoblème de ciblage mais sans succès ....

EDIT : bon ben j'ai pas trouvé mai je me suis débrouiller avec un vieux mouseover et un gif que j'ai fignoler pour l'aliasing