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 :

probleme avec puces crées en javascript


Sujet :

JavaScript

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    194
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 194
    Points : 83
    Points
    83
    Par défaut probleme avec puces crées en javascript
    Bonjour a tous,

    j'ai déja exposé mon probleme sur le forum php mais ils n'ont pu m'aidé.

    Je dispose d'une fonction PHP qui qui a partir d'une base de données crée une liste de catégories sous forme de liste de puces. Chaque ul et li sont crées en javascript et placés dans une div.

    Lors de l'affichage de mes catégories principales, tout marche correctement, mais ma fonction est récursive (il y a des sous catégories) et la ça pose probleme.

    En effet, mon affichage est de ce type:

    categorie 1
    categorie 2
    categorie 3

    sous-categorie 1 de la categorie 1
    sous-categorie 2 de la categorie 1
    sous-categorie 3 de la categorie 1

    sous-categorie 1 de la categorie 2
    sous-categorie 2 de la categorie 2

    sous-categorie 1 de la categorie 3
    sous-categorie 2 de la categorie 3
    sous-categorie 3 de la categorie 3




    au lieu de ceci:

    categorie 1
    sous-categorie 1 de la categorie 1
    sous-categorie 2 de la categorie 1
    sous-categorie 3 de la categorie 1

    categorie 2
    sous-categorie 1 de la categorie 2
    sous-categorie 2 de la categorie 2

    categorie 3
    sous-categorie 1 de la categorie 3
    sous-categorie 2 de la categorie 3
    sous-categorie 3 de la categorie 3

    voici mon code:

    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
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    $categparent=$_GET["categparent"];	
    affichercateg($categparent);
     
     
    //Fonction d'affichage des catégories
    function affichercateg($categparent) {
     
     
    	//Debut de liste
    	echo "<div id='$categparent' class ='verdana2' style='background-color:#c0cad4;'></div>";
    	?>
    	<script type="text/javascript" language="javascript" charset="utf-8">
    	// <![CDATA[
     	var new_ul_id<?php echo $categparent ?> =  '<?php echo $categparent ?>'; 
      	var ul_<?php echo $categparent ?> = document.createElement("ul");
      	var ul_id = document.createAttribute("id");
      	ul_id.nodeValue = new_ul_id<?php echo $categparent ?>;
      	ul_<?php echo $categparent ?>.setAttributeNode(ul_id);
       </script>
       <?php
      
            
            if ($categparent==0) {
                    ?>
       	<script>
       		var new_ul_style =  'list-style-image:url(./img_pack/secteur-24.gif);cursor:pointer;'; 
      			var ul_style = document.createAttribute("style");
       		ul_style.nodeValue = new_ul_style;
       		ul_<?php echo $categparent ?>.setAttributeNode(ul_style);
     		</script>
     		<?php   
                    
            } else {        
                    
                    ?>
    		<script type="text/javascript" language="javascript" charset="utf-8">  	 	  	
      			var new_ul_class =  'invisible'; 
      			var ul_class = document.createAttribute("class");
      			ul_class.nodeValue = new_ul_class;
       		ul_<?php echo $categparent ?>.setAttributeNode(ul_class); 	
      	 		var new_ul_style =  'class:invisible;list-style-image:url(./img_pack/rubrique-24.gif);cursor:pointer;'; 
      			var ul_style = document.createAttribute("style");
      	 		ul_style.nodeValue = new_ul_style;
       		ul_<?php echo $categparent ?>.setAttributeNode(ul_style);
     		</script>
     		<?php
            }
     
            //Requete affichant les catégories de la catégorie categparent
            $quer = "SELECT id_rubrique, titre, id_parent FROM spip_rubriques WHERE id_parent=$categparent ORDER BY id_parent, id_rubrique,titre";
     
            $resul = spip_query($quer);
     
     
            //Lecture de la requete
            while ($row = spip_fetch_array($resul)) {
            
                    $titre = typo($row['titre']);                                           //titre de la rubrique
                    $id_rub=substr($titre,0,strpos($titre,"."));    //id titre de la rubrique
                    $id_rubrique = $row['id_rubrique'];                             //id de la rubrique
                    $long=strlen($id_rubrique);
                    $id_parent=$row['id_parent'];                                           //id de la rubrique parente en cours
     
     
                    
                    //Puce affichant le titre de la rubrique
                    if ($id_parent==$categparent) {
                    
                            ?>
    			<script type="text/javascript" language="javascript" charset="utf-8"> 
      			var li<?php echo $id_rubrique ?> = document.createElement("li");
      			li<?php echo $id_rubrique ?>.setAttribute("id", "<?php echo $categparent ?>_<?php echo $id_rubrique ?>");
      			li<?php echo $id_rubrique ?>.appendChild(document.createTextNode("<?php echo $titre ?>"));
      			ul_<?php echo $categparent ?>.appendChild(li<?php echo $id_rubrique ?>);	
      			</script>
    			<?php
                            
                    }
     
                    /*
                    //Requete affichant les articles de la catégorie categparent
                    $quera = "SELECT id_article, titre, statut FROM spip_articles WHERE id_rubrique=$id_rubrique GROUP BY id_article ORDER BY id_article, titre";
    
                    $resula = spip_query($quera);
                    
                    //Lecture de la requete
                    while ($rowa = spip_fetch_array($resula)) {
                    
                            $id_article=$rowa['id_article'];
                            $id_rub=$rowa['id_rubrique'];   
                            $titrea = typo($rowa['titre']);                         
                            ?>
    			<script type="text/javascript" language="javascript" charset="utf-8"> 
      			var lia<?php echo $id_article ?> = document.createElement("li");
      			lia<?php echo $id_article ?>.setAttribute("id", "<?php echo $id_rub ?>_<?php echo $id_article ?>");
      			lia<?php echo $id_article ?>.appendChild(document.createTextNode("<?php echo $titrea ?>"));
      			ul_<?php echo $categparent ?>.appendChild(lia<?php echo $id_article ?>);	
      			</script>
    			<?php
                    }
                    */
     
                    affichercateg($id_rubrique);
            }
            ?>
    	<script type="text/javascript" language="javascript" charset="utf-8">
    	$('<?php echo $categparent ?>').appendChild(ul_<?php echo $categparent ?>);
    	Sortable.create(new_ul_id<?php echo $categparent ?>, { onUpdate: function() {xhr=Sortable.serialize('<?php echo $categparent ?>');convertir(xhr, '<?php echo $categparent ?>'); } });
    	</script>
     
     
    <?php
    }
    ?>
    pouvez-vous m'aider?

    merci d'avance

  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 637
    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 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    Ce serait plus simple si tu nous donnais uniquement le code javascript ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    194
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 194
    Points : 83
    Points
    83
    Par défaut
    voici la création d'un ul:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    	<script type="text/javascript" language="javascript" charset="utf-8">
    	// <![CDATA[
     	var new_ul_id<?php echo $categparent ?> =  '<?php echo $categparent ?>'; 
      	var ul_<?php echo $categparent ?> = document.createElement("ul");
      	var ul_id = document.createAttribute("id");
      	ul_id.nodeValue = new_ul_id<?php echo $categparent ?>;
      	ul_<?php echo $categparent ?>.setAttributeNode(ul_id);
       </script>
    d'un li:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    			<script type="text/javascript" language="javascript" charset="utf-8"> 
      			var li<?php echo $id_rubrique ?> = document.createElement("li");
      			li<?php echo $id_rubrique ?>.setAttribute("id", "<?php echo $categparent ?>_<?php echo $id_rubrique ?>");
      			li<?php echo $id_rubrique ?>.appendChild(document.createTextNode("<?php echo $titre ?>"));
      			ul_<?php echo $categparent ?>.appendChild(li<?php echo $id_rubrique ?>);	
      			</script>
    et mon drag and drop(pour déplacer mes catégories:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    	<script type="text/javascript" language="javascript" charset="utf-8">
    	$('<?php echo $categparent ?>').appendChild(ul_<?php echo $categparent ?>);
    	Sortable.create(new_ul_id<?php echo $categparent ?>, { onUpdate: function() {xhr=Sortable.serialize('<?php echo $categparent ?>');convertir(xhr, '<?php echo $categparent ?>'); } });
    	</script>

  4. #4
    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 637
    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 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    merci de l'effort ...
    mais je voulais dire un code javascript généré ... sans le php ...
    fais afficher la page par ton browser fais un afciher source et copie le code javascript généré !
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    194
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 194
    Points : 83
    Points
    83
    Par défaut
    ah ok dsl:

    voici pour mes catégories principales:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div id="0" class="verdana2" style="background-color: rgb(192, 202, 212);">
    <ul style="list-style-image: url(./img_pack/secteur-24.gif); cursor: pointer;" id="0">
    <li style="position: relative;" id="0_1">Français</li>
    <li style="position: relative; z-index: 0; left: 0px; top: 0px; opacity: 0.999999;" id="0_27">Espagnol</li>
    <li style="position: relative;" id="0_13">English</li>
    </ul>
    </div>
    Pour les sous-catégories, meme chose, elle se mettent a la suite avec le meme type de code et récrés une div, une ul...
    comme ceci:
    .
    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
    <div id="1" class="verdana2" style="background-color: rgb(192, 202, 212);">
    <ul style="list-style-image: url(./img_pack/rubrique-24.gif); cursor: pointer;" class="visible" id="1">
    <li style="position: relative;" id="1_2">10. La Société</li>
    <li style="position: relative;" id="1_3">20. Lignes de produits</li>
    <li style="position: relative;" id="1_7">40. Savoir-Faire</li>
    <li style="position: relative;" id="1_8">50. Entretien et traitement</li>
    <li style="position: relative;" id="1_9">30. Revendeurs</li>
    <li style="position: relative;" id="1_10">00. home</li>
    <li style="position: relative;" id="1_11">60. Documentation</li>
    <li style="position: relative;" id="1_12">70. Contact</li>
    <li style="position: relative;" id="1_40">80. Actualités</li>
    <li style="position: relative;" id="1_41">90. Espace Pro</li>
    <li style="position: relative;" id="1_42">100. Galerie photos</li>
    </ul>
    </div>
    et ainsi de suite..

  6. #6
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    194
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 194
    Points : 83
    Points
    83
    Par défaut
    quelqu'un peut m'aider?

  7. #7
    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 637
    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 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    restons calmes ...

    je parlais du scirp javascript generé pas ton php ...
    ici ce n'est pas un forum php, mais javascript ...

    montre nous la fonction javascript en javascript et pas en php ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  8. #8
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    194
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 194
    Points : 83
    Points
    83
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
     	var new_ul_id0 =  '0'; 
      	var ul_0 = document.createElement("ul");
      	var ul_id = document.createAttribute("id");
      	ul_id.nodeValue = new_ul_id0;
      	ul_0.setAttributeNode(ul_id);
     
    var li1 = document.createElement("li");
      			li1.setAttribute("id", "0_1");
      			li1.appendChild(document.createTextNode("Français"));
      			ul_0.appendChild(li1);
    ...

  9. #9
    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 637
    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 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    ben c'est juste un souci de boucle, tu n'appende pas au bon endroit ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  10. #10
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    194
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 194
    Points : 83
    Points
    83
    Par défaut
    et je dois appender ou?

  11. #11
    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 637
    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 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    ben ton problème majeur est que tu fais une boucle en php mais que la creation des li se fait en javascript ...

    donc il faut soit faire les boucles en php et construire le code html avec php
    soit mettre les resultat de la requete dans une variable javascript et faire les boucles en javascript !
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  12. #12
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2004
    Messages
    194
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2004
    Messages : 194
    Points : 83
    Points
    83
    Par défaut
    ok merci de ton aide

  13. #13
    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 637
    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 637
    Points : 66 661
    Points
    66 661
    Billets dans le blog
    1
    Par défaut
    si tu veux le faire en javascript ça donnerait un truc du genre:

    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
    <script type='text/javascript'>
    function populate(){
    var menu= new Array()
    menu['categorie1']=new Array ("sous cat 1_1","sous cat 1_2","sous cat 1_3")
    menu['categorie2']=new Array ("sous cat 2_1","sous cat 2_2")
    menu['categorie3']=new Array ("sous cat 3_1","sous cat 3_2","sous cat 3_3")
     
    for (cat in menu){
    	var Menu =document.createElement('ul')
    	Menu.innerHTML=cat
       		j=0 
    		while (menu[cat][j]){
    			var ssmenu = document.createElement('li');
    			ssmenu.innerHTML=menu[cat][j];
    			Menu.appendChild(ssmenu);
    			j++;
    			}
    		document.body.appendChild(Menu);	
     
    		}
    }
    </script>
     
    </head>
     
    <body onload="populate()">
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

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

Discussions similaires

  1. Probleme avec sitemap crée dynamiquement
    Par kaygee dans le forum ASP.NET
    Réponses: 0
    Dernier message: 03/08/2009, 15h06
  2. [PHP-JS] probleme avec les variable dans javascript
    Par aminobobo dans le forum Langage
    Réponses: 3
    Dernier message: 22/07/2008, 12h02
  3. Réponses: 7
    Dernier message: 04/10/2007, 11h31
  4. Probleme avec un script javascript->php
    Par leluis dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 23/03/2006, 15h32
  5. Probleme avec mes textbox en javascript
    Par WaZz dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 24/02/2006, 09h37

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