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

par **toone** » 29 mai 2009, 14:04

suite et retour à l'autre topic :

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

par AB » 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.

par **toone** » 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 :

par AB » 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é.

par **toone** » 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.

par AB » 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>';

par **toone** » 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 ^^

par AB » 27 mai 2009, 17:20

Bon ça à l'air ...

Tu pourras donc avoir un tableau javascript ayant la même structure et le même contenu que ton tableau php de $donnees.

Je serais toi je montrerais un petit extrait du tableau pour aider ceux qui veulent t'aider (sans qu'ils aient besoin de se référer au précédent post php)

Suffit maintenant d'écrire dans un div les éléments choisis du tableau en fonction de l'index du département.

Donc on veux une fonction javascript de type Affiche('12') qui onclick affiche les éléments du département 12.

Déjà crée et positionne le div (en html) qui sera le conteneur. Un truc du genre

Code : Tout sélectionner

<div id="info_comp" style="position:absolute; top:cequetuveux; left:cequetuveux; border:situveux">Test</div>

Quand tu l'aura positionné où tu veux, ajoute dans le style : 'display:none' et ton div deviendra invisible.

Ensuite on commence la fonction js

Code : Tout sélectionner

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

Et donc dans tout élément où tu auras ajouté le comportement onclick = "Affiche('un_numero')" ton div devrait apparaitre on click. C'est ok ?

par **toone** » 27 mai 2009, 16:38

ca m'affiche bien Lun\'éàçd"i€,ù' ... va bene?

par AB » 27 mai 2009, 16:11

C'est pas le pb des simple quotes c'est que tu avais mis des apostrophes à la place.

Alors ça avance ? Pour voir si ton encodage utf-8 fonctionne correctement, remplace 'lundi', par 'Lun\'éàçd"i€,ù' et regarde si l'affichage dans le alert javascript correspond bien. Si oui on pourra passer à l'étape suivante.

Sinon retour au tuto sur l'utf8

par **toone** » 27 mai 2009, 15:14

OHU!!!

C'est http://manuel-esteban.com/?p=71 qui mettait des simples quotes, mon ctrl-c ctrl-v fonctionne à merveille ^^ !

Bon ba 10 minutes de perdues pour des ptites barres, j'aime!

par **sadeq** » 27 mai 2009, 15:14

dans l'instruction : header(’Content-type:text/html; charset=UTF-8′);
Les quottes utilisés ne sont pas bien codés, remplaces-les par '

C'est ton éditeur qui te joue des tours

par AB » 27 mai 2009, 15:11

Elle fonctionne correctement ta fonction copié-collé ?

par **yaug** » 27 mai 2009, 15:10

[voix mode="outretombe"]
Tes quuooooooôôôôôtteeeeeeeeuuuuhhhhhh
[/voix]

par **toone** » 27 mai 2009, 15:04

erreur :

Code : Tout sélectionner

Parse error: parse error in C:\wamp\www\test\index.php on line 2

mes premières lignes, c'est bien au debut de la page index.php, mon html est plus loin...

Code : Tout sélectionner

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

Je sais que je suis pas loin AB...

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

Répondre

Étendre la vue Revue du sujet : Ecrire dynamiquement dans un div les éléments d'un tableau javascript