Style CSS ne s'applique dans un InnerHTML

**iviewclear** · 15/01/2011, 13h46

Bonjour à tous,

Voilà j'ai une fonction qui est comme ça :

Code :

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

1
2
3
4
5
function update_menu(){
        menu = document.getElementById("main-nav");
        menuenplus = '<li class="write"><a href="#" title="Write">Write</a></li>';
        menu.innerHTML += menuenplus;
     }

et qui permet de modifier le contenu d'un div.
L'élément s'ajoute bien dans mon div en question mais le style ne s'applique pas à celui-ci.

Est-ce un souci de DOM ? autre chose ? Souci JS ?

Merci de votre aide précieuse

**SpaceFrog** · 15/01/2011, 13h52

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function update_menu(){
        menu = document.getElementById("main-nav");
        menuenplus =document.createElement('li')
        menuplus.className="write"
        pluslink=document.createElement('a')
        pluslink.href="#" 
        pluslink.title="Write"
        pluslink.appendChild(document.createTextNode('Write');
        menuplus.appendChild(pluslink)
        menu.appendChild(menuplus);
     }

**iviewclear** · 15/01/2011, 14h08

Envoyé par SpaceFrog

Code :

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

1
2
3
4
5
6
7
8
9
10
11
function update_menu(){
        menu = document.getElementById("main-nav");
        menuenplus = document.createElement('li')
        menuplus.className="write"
        pluslink = document.createElement('a')
        pluslink.href="#" 
        pluslink.title="Write"
        pluslink.appendChild(document.createTextNode('Write');
        menuplus.appendChild(pluslink)
        menu.appendChild(menuplus);
     }

merci pour cette réponse
MAIS
du coup il ne se passe plus rien, plus aucun ajout dans mon div
J'ai ajouté les ; à la fin de chaque ligne
Et voici le HTML original que je souhaite ajouter

Code :

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

1
2
3
4
5
6
7
 
<li class="write"><a href="#" title="Write">Write</a>				
<ul>
<li><a href='javascript:loadHTML("ajax-modal.html");' title="Articles">Articles</a></li>
<li><a href='javascript:loadHTML("ajax-modal.html");' title="Add article">Add article</a></li>
</ul>
</li>

Donc si je comprends bien ce que tu me donnes correspond à la bonne pratique à utiliser pour ajouter des éléments versus le InnerHTML ?

menuplus est une nouvelle variable ou dois-je lire menuenplus ?
Sinon est-ce que je suis censé créer autant de variable que d'élements à créer ?

Merci à toi

**dukej** · 15/01/2011, 16h53

Le faire en innerHTML est plus efficace en terme de performances. Mais j'aurai ajouté le LI plutot en DOM et le contenu du LI en innerHTML. Ensuite je fais un
monNaVBidule.appendChild(li).

Là ton problème il doit être ailleurs. Regarde bien avec firebug ce que tu obtiens en code généré, tu découvriras peut-être pourquoi ça déconne.

De plus montre nous ta CSS associé.

Désolé mais là on manque ENORMEMENT d'éléments pour pouvoir t'aider

**iviewclear** · 15/01/2011, 16h56

Bon j'avance

avec cela, j'arrive à m'en sortir à epu près

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
function update_menu(){
        menu = document.getElementById("menu");
        // creation du li
        menuenplus = document.createElement('li') ;
        menuenplus.className="write";
 
        // creation du lien hypertexte
        pluslink=document.createElement('a') ;
        pluslink.href="#";
        pluslink.title="Write" ;
        //pluslink.appendChild(document.createTextNode('Write');
 
        //menuenplus.appendChild(pluslink) ;
        menu.appendChild(menuenplus);
     }

A peu près car la ligne pluslink.appendChild(document.createTextNode('Write'); fait que cela ne fonctionne plus !

@dukej : je croyais que c'était le contraire !!! pour ce qui des performances !
N'est-ce pas plus propre de le faire comme cela ???

**NoSmoking** · 15/01/2011, 17h40

ton ajout doit IMPERATIVEMENT être conforme pour ne pas avoir de surprise, dans ton cas la construction, l'enchaînement des balises, n'est pas valables.
On s'approcherait plutôt de cela

Code :

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

1
2
3
4
5
6
7
8
<ul class="write">
  <li>Write
    <ul>
      <li><a href='#' onclick="loadHTML('ajax-modal.html');" title="Articles">Articles</a></li>
      <li><a href='#' onclick="loadHTML('ajax-modal.html');" title="Add article">Add article</a></li>
    </ul>
  </li>
</ul>

quelques corrections au passage pour plus de propreté

**iviewclear** · 15/01/2011, 17h46

Envoyé par NoSmoking

ton ajout doit IMPERATIVEMENT être conforme pour ne pas avoir de surprise, dans ton cas la construction, l'enchaînement des balises, n'est pas valables.
On s'approcherait plutôt de cela

Code :

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

1
2
3
4
5
6
7
8
<ul class="write">
  <li>Write
    <ul>
      <li><a href='#' onclick="loadHTML('ajax-modal.html');" title="Articles">Articles</a></li>
      <li><a href='#' onclick="loadHTML('ajax-modal.html');" title="Add article">Add article</a></li>
    </ul>
  </li>
</ul>

quelques corrections au passage pour plus de propreté

Je ne saisi pas très bien ce que tu essayes de me dire

mais voici tout le html de la zone en question et il me semble qu'il est correct, non ?

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
36
37
 <!-- Main nav -->
	<nav id="main-nav">
		<ul class="container_12" id="menu">
			<li class="home current"><a href='javascript:loadHTML("ajax-tab.html");' title="Accueil">Accueil</a>
				<ul>
					<li class="current"><a href="#" title="Dashboard">Tableau</a></li>
					<li><a href="#" onclick="loadHTML('monprofil.php');">MON PROFIL</a></li>
				</ul>
			</li>
			<li class="write"><a href="#" title="Write">Write</a>
				<ul>
					<li><a href='javascript:loadHTML("ajax-modal.html");' title="Articles">Articles</a></li>
					<li><a href='javascript:loadHTML("ajax-modal.html");' title="Add article">Add article</a></li>
				</ul>
			</li>
            <li class="comments"><a href="#" title="Comments">Comments</a>
				<ul>
					<li><a href="#" title="Manage">Manage</a></li>
					<li><a href="#" title="Spams">Spams</a></li>
				</ul>
			</li>
			<li class="medias"><a href="#" title="Medias">Medias</a>
				<ul>
					<li><a href="#" title="Browse">Browse</a></li>
					<li><a href="#" title="Add file">Add file</a></li>
				</ul>
			</li>
			<li class="users"><a href="#" title="Users">Users</a>
				<ul>
					<li><a href='javascript:loadHTML("films.php");' title="Browse">List</a></li>
					<li><a href="#" title="Add user">Add user</a></li>
					<li><a href="#" title="Settings">Settings</a></li>
				</ul>
			</li>
		</ul>
	</nav>
	<!-- End main nav -->

Et moi j'essaye donc sur ce modèle, d'ajouter dynamiquement ce menu dans ma page.

**NoSmoking** · 15/01/2011, 18h12

- Effectivement c'est correct, il manquait juste une partie pour être sûr...
- En suivant bien l'ordre de création il ne devrait pas y avoir de problème donc.
- Cela me paraît un peu lourd à intégrer, à moins de créer une sous fonction, pourquoi ne pas le mettre en dur directement.

**iviewclear** · 15/01/2011, 19h32

Envoyé par NoSmoking

- Effectivement c'est correct, il manquait juste une partie pour être sûr...
- En suivant bien l'ordre de création il ne devrait pas y avoir de problème donc.
- Cela me paraît un peu lourd à intégrer, à moins de créer une sous fonction, pourquoi ne pas le mettre en dur directement.

Le contexte est le suivant :
Je souhaite en fonction d'un profil connecté faire en sorte que le menu s'adapte en terme de contenu.
je ne vois pas comment faire autrement pour le moment...

Par contre je n'arrive toujours pas à arriver à mes fins.

si je veux intégrer tout ce qui suit :

Code :

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

1
2
3
4
5
6
7
 
<li class="write"><a href="#" title="Write">Write</a>
<ul>
<li><a href='javascript:loadHTML("ajax-modal.html");' title="Articles">Articles</a></li>
<li><a href='javascript:loadHTML("ajax-modal.html");' title="Add article">Add article</a></li>
</ul>
</li>

quel devrait être le code js ?
Moi j'en suis là mais bof bof niveau résultat

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
function update_menu(){
        // je repère l'élément dans lequel se fera l'ajout
        menu = document.getElementById("menu");
        // je créé un élément de type <li>
        menuenplus = document.createElement('li');
        menuenplus.className="users";
        // je créé un élément de type <a> avec ses paramêtres href et title et lien
        pluslink = document.createElement('a');
        pluslink.setAttribute('href','javascript:loadHTML("ajax-tab.html");');
        pluslink.setAttribute('title','infobulle');
        pluslink.appendChild(document.createTextNode('Write'));
        menu.appendChild(menuenplus);
 
        ul = document.createElement('ul');
        ulli1 = document.createElement('li');
        ulli2 = document.createElement('li');
        ul.appendChild(ulli1);
        ul.appendChild(ulli2);
        menu.appendChild(ul);
 
     }

**NoSmoking** · 15/01/2011, 20h37

quel devrait être le code js ?

voila à quoi cela pourrait ressembler

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
function update_menu() {
    // recup conteneur
    var oParent = document.getElementById("menu");
    // creation LI
    var oLI = document.createElement('li');
    // affectation de la classe
    oLI.className = "write";
        // creation de A
        var oA_LI = document.createElement('a');
        // affecte attribut
        oA_LI.href = '#';
        oA_LI.title = 'Write';
        // creation text
        var oTxt = document.createTextNode('Write');
        // ajout text
        oA_LI.appendChild( oTxt);
        // ajout A
        oLI.appendChild( oA_LI);
        // creation UL
        var oUL_LI = document.createElement('ul');
            // creation LI
            var oLI_UL = document.createElement('li');
                // creation A
                oA_LI = document.createElement('a');
                // affecte attribut
                oA_LI.setAttribute( 'href', '#');
                oA_LI.setAttribute( 'title', 'Articles');
                // la fonction sur le click
                oA_LI.onclick = function(){
                    loadHTML("ajax-modal.html");
                    return( false);
                }
                // creation text
                oTxt = document.createTextNode('Articles');
                // ajout text -> A
                oA_LI.appendChild( oTxt);
                // ajout A -> LI
                oLI_UL.appendChild( oA_LI);
            // ajout LI -> UL
            oUL_LI.appendChild( oLI_UL);
 
            // creation LI
            oLI_UL = document.createElement('li');
                // creation A
                oA_LI = document.createElement('a');
                // affecte attribut
                oA_LI.setAttribute( 'href', '#');
                oA_LI.setAttribute( 'title', 'Add Article');
                // la fonction sur le click
                oA_LI.onclick = function(){
                    loadHTML("ajax-modal.html");
                    return( false);
                }
                // creation text
                oTxt = document.createTextNode('Add article');
                // ajout text -> A
                oA_LI.appendChild( oTxt);
                // ajout A -> LI
                oLI_UL.appendChild( oA_LI);
            // ajout LI -> UL
            oUL_LI.appendChild( oLI_UL);
 
        // ajout UL -> LI
        oLI.appendChild( oUL_LI);
    // ajout LI -> Parent
    oParent.appendChild( oLI);
}

c'est peu être simplifiable mais c'est pour te montrer la rigueur qu'il faut avoir dans ce genre de construction.

Tout cela pour faire

Code :

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

1
2
3
4
5
6
7
8
<ul id="menu">
  <li class="write"><a title="Write" href="#">Write</a>
    <ul>
      <li><a title="Articles" href="#">Articles</a></li>
      <li><a title="Add Article" href="#">Add article</a></li>
    </ul>
  </li>
</ul>

il faut avouer que c'est plus long, mais si besoin exige.

Dans l'exemple les fonctions sont appelées sur le onclick et non sur le href ce qui fait qu'elles n'apparaissent pas dans le code final

(*) merci de m'excuser si il y a des coquilles dans les commentaires

**iviewclear** · 15/01/2011, 21h15

Merci NoSmoking

c'est peut être long mais c'est lisible et très compréhensible
Je regarde cela et te tiens au courant

dans tous les cas je te remercie de ton implication pour m'aider dans mon apprentissage

Ceci dit, jusqu'à maintenant je ne m'étais pas servi de JS pour manipuler les éléments de ma page

On en apprends tous les jours

merci encore
je vais essayer ça

**iviewclear** · 15/01/2011, 22h58

Alors il y a du mieux car mon élément de menu réagit quand je passe la souris dessus.
Mais c'est tout !!

Je pense qu'il doit y avoir autre chose avec javascript qui cloche car du coup je ne vois pas ce qui pourrait se passer (ceci dit quand je dis ça je ne crois pas à mes chances d'en être totalement sur non plus

)

Voici la page à partir de laquelle je travaille et qui reprend exactement le menu du haut. c'est un template donc.

http://www.display-inline.fr/demo/co...late/forms.php

cela montre exactement le rendu ainsi que le fonctionnement
Je pense que cela peut aider sur ce qui reste à faire

Avec mes maigres connaissances je penche pour un souci js, peut être ou alors de CSS car c'est vrai qu'il y a des choses bizarres dedans, mais dans le même temps cela marche bien dans l'original, alors ben oui je suis perdu...

Merci de ton aide qui me fait malgré tout beaucoup avancer

**NoSmoking** · 16/01/2011, 14h49

Alors il y a du mieux car mon élément de menu réagit quand je passe la souris dessus.
Mais c'est tout !!

qu'attend tu de plus, que la fonction se déclenche sur le click.
As tu mis l'action sur le onclick des liens comme indiqué?

Code :

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

1
2
3
4
5
// la fonction sur le click
oA_LI.onclick = function () {
  loadHTML("ajax-modal.html");
  return (false);
}

**iviewclear** · 16/01/2011, 19h05

Envoyé par NoSmoking

qu'attend tu de plus, que la fonction se déclenche sur le click.
As tu mis l'action sur le onclick des liens comme indiqué?

Code :

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

1
2
3
4
5
// la fonction sur le click
oA_LI.onclick = function () {
  loadHTML("ajax-modal.html");
  return (false);
}

Normalement le fonctionnement quand on clique sur le menu c'est qur cela fait apparaitre les items dans un sous menu
Je t'ai mis une page en exemple justement pour que tu te fasses une idée du fonctionnement
Pour le lien oui j'ai su faire

**NoSmoking** · 16/01/2011, 22h15

quand on clique sur Write, on a bien les sous menus
Articles | Add article | Posts | Add post
qui apparaissent!

**iviewclear** · 16/01/2011, 22h45

Envoyé par NoSmoking

quand on clique sur Write, on a bien les sous menus
Articles | Add article | Posts | Add post
qui apparaissent!

Tu l'as testé de ton côté ?
parce que chez moi...euh rien n'apparaît après le clic
j'ai cherché le pourquoi sans trouver encore le pourquoi
Désolé....
je continue à chercher
Merci

Edit : d'ailleurs j'ai une question : je suppose qu'il est normal de ne pas voir dans le code source les lignes ajoutées ?

**NoSmoking** · 16/01/2011, 23h02

j'ai testé à partir du lien que tu as fourni, sur les principaux navigateurs.

**iviewclear** · 16/01/2011, 23h14

Envoyé par NoSmoking

j'ai testé à partir du lien que tu as fourni, sur les principaux navigateurs.

Ah ben oui j'ai du très mal l'expliquer alors
Car là c'est le template dont je me sers
Donc tu regardes le site commercial
Et pas ce que tu penses que j'ai mis en ligne