Ecrire dynamiquement dans un div les éléments d'un tableau javascript

27 mai 2009, 18:00

Je suis rentrer @home , je met le code et tableaux dès demain matin!

Merci! Bonne soirée à tous!

EDIT : BONJOUR!!

Alors une partie de mon code :

le php :

<?php 
header("Content-type:text/html; charset=UTF-8");	
	mysql_connect("localhost", "root", "");
	mysql_query("SET NAMES 'utf8'"); 
	mysql_select_db("clients");
	
$query = "SELECT 

departements.id,
departements.Nom_Departement,
departements.Nb_Clients,

informations.Nom_Maintenance,
informations.Num_Maintenance,
informations.Nom_Travaux,
informations.Num_Travaux,
informations.Adresse

FROM departements 

LEFT JOIN informations 

ON departements.Nom_Departement = informations.Nom_Departement";

$ressource = mysql_query($query);

$StrInfo = array();

$donnees = array();

while ($resultat = mysql_fetch_assoc($ressource)) 

    {
    $num_dep = sprintf("%02d", $resultat['id']); 

    $StrInfo[$num_dep] = $resultat['Nom_Departement'].' : '.$resultat['Nb_Clients'].' contact(s) dans le d&eacute;partement';

    $donnees[$num_dep]['Nom_Departement'] = $resultat['Nom_Departement'];
    $donnees[$num_dep]['Nb_Clients'] = $resultat['Nb_Clients'];
    $donnees[$num_dep]['Nom_Maintenance'] = $resultat['Nom_Maintenance'];
    $donnees[$num_dep]['Num_Maintenance'] = $resultat['Num_Maintenance'];
    $donnees[$num_dep]['Nom_Travaux'] = $resultat['Nom_Travaux'];
    $donnees[$num_dep]['Num_Travaux'] = $resultat['Num_Travaux'];
    $donnees[$num_dep]['Adresse'] = $resultat['Adresse'];
    }

// pour contrôle du contenu du tableau en phase de test 
//echo '<pre>';
//print_r($donnees);
//echo '</pre>'; 

//echo '<pre>';
//print_r($StrInfo);
//echo '</pre>'; 

 json_encode($donnees);

Bon c'est parti pour les div

RE EDIT (8h49) :

La fonction JS fonctionne, j'ai un magnifique affichage onclick!! Par contre, j'ai du retirer des areas mes

Code : Tout sélectionner

href="index.php?d=**"

ce qui je pense est normal ^^

28 mai 2009, 12:22

Je te disais de donner une petite partie du tableau, c'est à dire un extrait du résultat

Code : Tout sélectionner

//echo '<pre>';
//print_r($donnees);
//echo '</pre>';

28 mai 2009, 13:37

Ah oui bien sur ^^ ...

Array
(
[01] => Array
(
[Nom_Departement] => Ain
[Nb_Clients] => 3
[Nom_Maintenance] => johnnny
[Num_Maintenance] => 77555
[Nom_Travaux] =>
[Num_Travaux] => 0
[Adresse] =>
)

[02] => Array
(
[Nom_Departement] => Aisne
[Nb_Clients] => 1
[Nom_Maintenance] => david
[Num_Maintenance] => 876543
[Nom_Travaux] => Loul
[Num_Travaux] => 7766
[Adresse] => ru des arcivau
)

Voilà le debut de ce que cela m'affiche en debut de page index.

28 mai 2009, 16:32

Bon je te donne un exemple à tester dans une page séparée puis à adapter à tes besoins.

Pour comprendre les fonctions javascript utilisées tapes le nom de la fonction suivi de selfhtml dans google ex : 'createElement selfhtml' car je n'ai pas le temps de commenter aujourd'hui.

Je me suis amusé à faire un peu de css en complément pour te montrer le positionnement des éléments créés en javascript.

<?php
header('Content-type: text/html; charset=UTF-8');
   // soit un tableau sous PHP
    $donnees['18']['Nom_Departement'] = 'Cher';
    $donnees['18']['Nb_Clients'] = 5;
    $donnees['18']['Nom_Maintenance'] = 'Nom_Maintenance 18';
    $donnees['18']['Num_Maintenance'] = 1258;
    $donnees['18']['Nom_Travaux'] = 'Nom_Travaux 18';
    $donnees['18']['Num_Travaux'] = 'Num_Travaux 18';
    $donnees['18']['Adresse'] = 'Adresse 18'; 
	
	$donnees['03']['Nom_Departement'] = 'Allier';
    $donnees['03']['Nb_Clients'] = 7;
    $donnees['03']['Nom_Maintenance'] = 'Nom_Maintenance 03';
    $donnees['03']['Num_Maintenance'] = 1612;
    $donnees['03']['Nom_Travaux'] = 'Nom_Travaux 03';
    $donnees['03']['Num_Travaux'] = 'Num_Travaux 03';
    $donnees['03']['Adresse'] = 'Adresse 03'; 
   
?> 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<?php echo '<script type="text/javascript"> var tab_js = ', json_encode($donnees), '</script>'?>


<script type="text/javascript">
function Affiche(num_dep)
{
if (this.conteneur = document.getElementById('info_comp'))
    {

	if (tab_js[num_dep])
		{

	     this.int = document.createElement('div');	
	
		 for (var cle in tab_js[num_dep])
			{
			var ligne = document.createElement('p');
			
			var texte = document.createTextNode(cle+' : '+tab_js[num_dep][cle]);
			
			ligne.appendChild(texte);	
					
			this.int.appendChild(ligne); 		    
			}
			
		if (this.noeud)	this.conteneur.removeChild(this.noeud);
		
		this.noeud = this.conteneur.appendChild(this.int); 
		
		this.conteneur.style.display = 'block';
			
		}
		
		else this.conteneur.style.display = 'none';
    
    }
} 

function Efface()
{
if (this.conteneur = document.getElementById('info_comp')) this.conteneur.style.display = 'none';
}

</script>

<style type="text/css">
#info_comp {
position:absolute; 
top:50px; 
left:50px; 
border:1px solid black;display:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:0.8em;
background: #CCCCCC;
}
#info_comp div {
border:2px solid #FFFFFF;
}
#info_comp p {
margin:0;
padding : 0.5em;
background:#FFFFCC;
border-bottom:1px solid #CCCCCC;
}
#info_comp span {
position:absolute;
right:0;
top:0;
font-size:9px;
font-weight:bold;
background:#000000;
color:#FFFFFF;
padding:0.2em;
cursor:pointer;
}
.menu span {
cursor:pointer;
}
</style>

</head>

<body>
<div id="info_comp"><span onclick = "Efface()"> X </span></div>
<div class = "menu"><span onclick = "Affiche('18')">test 18</span>&nbsp;&nbsp;&nbsp;<span onclick = "Affiche('03')">test 03</span>&nbsp;&nbsp;&nbsp;<span onclick = "Affiche('12')">test 12</span></div>

</body>
</html>

J'ai mis intentionnellement un troisième "test 12" pour visualiser ce qui se passe si le département n'est pas renseigné.

28 mai 2009, 16:38

Merci bien, je teste sa demain matin.

Cet aprem j'ai avancé sur mon formulaire d'insertion dans la BDD, enfin j'ai fais la page avec les formulaires à remplir, avec une identification par mot de passe, il me faudra de l'aide en php/MySQL je pense pour l'insertion dans la base de données (syntaxe et placement)

EDIT : C'est le matin ^^

Alors j'ai adapté à ma page(insérer le JS, mis seulement le div id, décalé la fenêtre css), tout à l'air de marché(bizarre du premier coup),voici un petit screen :

Donc au clic ça affiche bien les infos, il faut maintenant que j'enlève chaque href et remplace par les onclick=affiche().... :S

Après il faut que je vois au niveau BDD, en effet il y aura des départements où plusieurs personnes où numéros seront renseignés, et donc j'avais testé pour l'AIN, en mettant deux enregistrements, mais ma démarche ne doit pas être la bonne...

screen BDD :

29 mai 2009, 13:08

Cela ne concerne pas l'affichage javascript : faut revoir la construction du tableau php de récupération des données.

Retour à ton précédent topic.

Et puis cette technique d'affichage javascript charge tous les éléments de ta bdd dans le navigateur du visiteur en une seule fois. C'est à dire qu'il y a des limites.
Si tu n'es pas certain de n'avoir que quelques lignes par département et pour ne pas être limité, il faudra changer de technique et donc ré ajouter les <a href ...

Cela dit cet exercice d'affichage javascript peut être utile dans ton travail :

Plutôt que de faire afficher le nb de clients par département dans les infobulles "title" qui ne sont pas formatables et mettent un peu de temps à s'afficher, tu pourrais le faire afficher avec cette technique onmouseover. Et pour les infos détaillées, faire une requête php qui affichera onclick le div d'informations complètes dans la même page avec reload.

Enfin là on parle plutôt de méthodologie. Tu aurait dû donner plus d'informations au départ. Notamment ce schéma de ta bdd avec ces quelques données aurait été utile dès le début de ton précédent topic. Reposte ce schéma à la fin de ton précédent topic.

Sur le principe celui-ci est résolu.

29 mai 2009, 14:04

suite et retour à l'autre topic :

http://www.phpfrance.com/forums/voir_re ... php#292561

Ecrire dynamiquement dans un div les éléments d'un tableau javascript

Qui est en ligne