IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[DOM] Mise en page d'un innerHTML


Sujet :

JavaScript

  1. #1
    Membre du Club
    Profil pro
    Inscrit en
    Février 2007
    Messages
    117
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 117
    Points : 58
    Points
    58
    Par défaut [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 ?

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 644
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 644
    Points : 66 671
    Points
    66 671
    Billets dans le blog
    1
    Par défaut
    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 ...

  3. #3
    Membre du Club
    Profil pro
    Inscrit en
    Février 2007
    Messages
    117
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 117
    Points : 58
    Points
    58
    Par défaut
    Merci de ta réponse mais c'est de la trop haute volée pour moi

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

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 220
    Points
    91 220
    Billets dans le blog
    20
    Par défaut
    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 !

  5. #5
    Membre du Club
    Profil pro
    Inscrit en
    Février 2007
    Messages
    117
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 117
    Points : 58
    Points
    58
    Par défaut
    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 : 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
    $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>";

  6. #6
    Membre du Club
    Profil pro
    Inscrit en
    Février 2007
    Messages
    117
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 117
    Points : 58
    Points
    58
    Par défaut
    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 ?

  7. #7
    Membre du Club
    Profil pro
    Inscrit en
    Février 2007
    Messages
    117
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 117
    Points : 58
    Points
    58
    Par défaut
    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

  8. #8
    Membre du Club
    Profil pro
    Inscrit en
    Février 2007
    Messages
    117
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2007
    Messages : 117
    Points : 58
    Points
    58
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [DOM] Construction de fichier XML en PHP avec mise en page
    Par kdson dans le forum Bibliothèques et frameworks
    Réponses: 2
    Dernier message: 25/02/2008, 10h58
  2. [CR.NET][VS.NET] mise en page et sections
    Par guignol dans le forum SDK
    Réponses: 8
    Dernier message: 06/08/2004, 16h07
  3. mise en page (Header and Footer) en XML-XSL.
    Par christine dans le forum XSL/XSLT/XPATH
    Réponses: 4
    Dernier message: 01/03/2004, 17h31
  4. [CR] Mise en page
    Par akolyto dans le forum SAP Crystal Reports
    Réponses: 4
    Dernier message: 14/10/2003, 13h22
  5. [mise en page] pour bien indenter son code
    Par bihorece dans le forum C++Builder
    Réponses: 4
    Dernier message: 06/08/2003, 17h14

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo