[AJAX] tableau HTML Dynamique

**llaffont** · 06/05/2008, 11h11

Merci Guardian d'avoir retoucher mon post. bon je le reprends afin de donner un complément d'info.

Bonjour,

Merci de vos réponse. Elles m'ont permis de me mettre à l'ajax.

Bon j'ai déjà pas mal progressé dans la génération de mon tableau.

Mon Gros point noir c'est qu'il affiche le tableau une fois toutes les interrogations lancée.

je suppose que cela indique que mon tableau est Synchrone et mes interrogations asynchrones puisque les résultat s'affiche petit à petit.

Je n'arrive pas a lui faire charger dans un premier temps le tableau et ensuite les interrogations. Tableau constitué de 30 lignes de 18 cases dont autant d'interrogation je vous laisse imaginer le délai que mais la page a être affiché...

Donc je suis preneur d'idée.

j'ai également trouvé ce bout de code qui pourrait peut être m'aider.

<%= observe_field(:sexe,
:frequency => 0.1,
:update => :table,
:url => {:action => 'test'}
) %>

Mais je ne sais pas a quel code appartiennent les balise <% %> il me semble que c'est de l'ASP et perso je code en PHP.

Deuxieme question observe_field() est une fonction tiré d'où ?

Si vous tester mon code vous remarquerez ce petit lap's de temps ou la page ne change pas d'aspect.

Ou est ma faute ?

Merci d'avance.

Voici mon code bien simplifié :

index.php

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style type="text/css">
table{
width: 200px;
}
 
 
td{
text-align:center;
padding:0px 10px 0px 10px;
height:10px;
border: 1px solid black;
}
 
td.site{
color: #FF7E00;
cursor:pointer;
}
</style>
 
</head>
<body>
	<div id="contenaire">
		<div id="barre_menu">
			<a style="cursor:pointer;" class="linkmenu"  onclick="TabPing('contenu');"> Ping</a> &nbsp;
		</div>
 
		<div id="contenu">
			contenu
		</div>
 
	</div>	
<SCRIPT TYPE="text/javascript" SRC="test_requests.js"></SCRIPT>
	</body>
</html>

test_ping.php

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
 
<?php
include "test_connect.php";
 
function popinfo($id){//retourne au format JSON les infos du serveur désigné a destination du popup.
$query = "SELECT site, ip FROM test_ping where id=$id";
$result = mysql_query($query)or die("La requête SQL a échoué !<br>query : $query<br>");
$line = mysql_fetch_assoc($result);
$retour = '{"serveur": {
	"site": \''.htmlentities($line[site]).'\',
	"server": \''.htmlentities($line[server]).'\',
	"gep": \''.htmlentities($line[gep]).'\',
	"host": \''.htmlentities($line[host]).'\',
	"ip": \''.$line[ip].'\'
	}}';
 
echo $retour;
}
 
function infotableau(){// retourne les Id BDD des serveurs actif sur la page principale.
$query = "SELECT id FROM test_ping where active=1";
$result = mysql_query($query)or die("La requête SQL a échoué !<br>query : $query<br>");
	while($line = mysql_fetch_array($result))
	{
		if ($retour !="")
		{
			$retour .= "~".$line[id];
		}
		else
		{
			$retour = $line[id];
		}
	}
echo($retour);
}
 
function ping_single($ip='')
{  
 
  $package = "\x08\x00\x19\x2f\x00\x00\x00\x00\x70\x69\x6e\x67";
 
  /* create the socket, the last '1' denotes ICMP */
    $socket = socket_create(AF_INET, SOCK_RAW, 1);
 
  /* set socket receive timeout to 1 second */
  socket_set_option($socket, SOL_SOCKET, SO_RCVTIMEO, array("sec" => 1, "usec" => 800000));
 
  /* connect to socket */
   if ( (@socket_connect($socket, $ip, null)) === FALSE )
     {
       socket_close($socket);
       echo' { "ping": \'NOK\'}';
	   return false;
     }
 
  /* record start time */
  list($start_usec, $start_sec) = explode(" ", microtime());
  $start_time = ((float) $start_usec + (float) $start_sec);
 
  /*send Socket*/
  if ( (@socket_send($socket, $package, strlen($package), 0)) === FALSE )
     {
       socket_close($socket);
      echo' { "ping": \'NOK\'}';
	   return false;
     }
  /*Read socket*/
  if ( (@socket_read($socket, 255)) === FALSE )
     {
       socket_close($socket);
		echo' { "ping": \'NOK\'}';
	   return false;
     }
 
  list($end_usec, $end_sec) = explode(" ", microtime());
  $end_time = ((float) $end_usec + (float) $end_sec);
  $total_time = $end_time - $start_time;
  socket_close($socket);    
	/*fin ping*/
 echo' { "ping": \'OK\'}';
 return true;
}
 
 
$action = $_GET['action'];
switch ($action)
{
 
case 'popinfo' :
popinfo($_GET[id]);
break;
 
case 'infotab' :
infotableau();
break;
 
case 'identifi' :
popinfo($_GET[id]);
break;
 
case 'ping' :
ping_single($_GET[ip]);
break;
}
?>

test_requests.js

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
function $(id){
return document.getElementById(id);
}
 
function getrequeteAjax(){//initialise une requete ajax
var requeteAjax = null; 
if(window.XMLHttpRequest) // Firefox et autres
	requeteAjax = new XMLHttpRequest(); 
else if(window.ActiveXObject)
	{ // Internet Explorer 
		try 
		{
			requeteAjax = new ActiveXObject("Msxml2.XMLHTTP");
		} 
		catch (e)	
		{
			requeteAjax = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
else 
	{ // XMLHttpRequest non supporté par le navigateur 
		alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
		requeteAjax = false; 
	} 
return requeteAjax
}
 
function TabPing(Elem){// Affiche la page TSM
	$(Elem).innerHTML ="" //j'efface la div contenu
 
	var nouvElem = document.createElement('table');
	nouvElem.id='TSMTAB';
	$(Elem).appendChild(nouvElem); //j'ajoute un tableau
 
 
	var tabth = new Array('Site', 'Ping'); // je récupère mes intitulés de colonnes
 
	if (tabth.length >0){ // je vérifie si je dois générer un tableau
 
		nouvElem = ""
		nouvElem = document.createElement('tr');
		nouvElem.id='titreTSM';
		$('TSMTAB').appendChild(nouvElem); // j'ajoute une nouvelle ligne
 
		for (z=0; z<tabth.length; z++){
			nouvelElem ="";
			nouvElem = document.createElement('th');
			text = document.createTextNode(tabth[z]);
			nouvElem.appendChild(text);
			$('titreTSM').appendChild(nouvElem);
		}// je génere autant d'entête de colonne que j'ai d'intitulé 
 
		corpTSM(); // ensuite je lance le script pour le corps du tableau. Je pense que déjà là je suis pas bien bon dans la méthode.
	}
}
 
function corpTSM(){
 
	var NbElemTR = infotableau();// je récupère les éléments a vérifier que je converti en array
	var TabId = NbElemTR.split('~');
	var tabtd = new Array('site', 'ping');
 
	if (TabId.length >0){		
		var i=0;
		while (i<TabId.length){
 
			var idsite = TabId[i];
			var nouvElem = document.createElement('tr');
			nouvElem.id="tr_"+idsite;
			$('TSMTAB').appendChild(nouvElem);// pour chaque élément je crée une ligne.
 
			for (z=0; z<tabtd.length; z++){
				nouvelElem ="";
				nouvElem = document.createElement('td');
				nouvElem.id=tabtd[z]+'_'+idsite;
				nouvElem.className=tabtd[z];
				$("tr_"+idsite).appendChild(nouvElem); // pour chaque  élément je crée un td afin d'inscrire le résultat.
 
				action(tabtd[z], idsite);// et là ! la grosse faute je lance mon script d'interrogation. Mais actuellement je ne vois pas comment faire.
			}
			i++;
		}
	}
}
 
 
function popupinfo(idsite) {//Récupère les informations concernant le site 
var requeteAjax = getrequeteAjax();
var URL = 'test_ping.php';
URL += '?action=popinfo&id='+idsite;
URL += '&rnd='+Math.random();
requeteAjax.open('GET',URL,true);
requeteAjax.onreadystatechange = affichage;
requeteAjax.send(null);
 
function affichage(){//affiches les information serveur dans le popup
	if(requeteAjax.readyState == 4 && requeteAjax.status == 200)
	{
		data = eval('('+requeteAjax.responseText+')');
		$('site').innerHTML = data.serveur.site;
		$('serveur').innerHTML = data.serveur.server;
		$('gep').innerHTML = data.serveur.gep;
		$('hostname').innerHTML = data.serveur.host;
		$('ip').innerHTML = data.serveur.ip;
	}
	else
	{
		$('site').innerHTML = "Chargement...";
		$('serveur').innerHTML = "Chargement...";
		$('gep').innerHTML = "Chargement...";
		$('hostname').innerHTML = "Chargement...";
		$('ip').innerHTML = "Chargement...";
	}
}
 
}
 
function infotableau(){// reçois les Id BDD des serveurs actif sur la page principale.
var requeteAjax = getrequeteAjax();
var URL = 'test_ping.php';
URL += '?action=infotab&rnd='+Math.random();
requeteAjax.open('GET',URL,false);
requeteAjax.send(null);
data = requeteAjax.responseText;
return data;
}
 
function infoserveur(idsite){//reçois l'ip du serveur coorespondant a la cellule.
var requeteAjax = getrequeteAjax();
var URL = 'test_ping.php';
URL += '?action=identifi&id='+idsite+'&rnd='+Math.random();
requeteAjax.open('GET',URL,false);
requeteAjax.send(null);
data = eval('('+requeteAjax.responseText+')');
return data;
}
 
function ping(cible, idsite){//affiche le résultat du ping voulu. Dans la cellule cible
var requeteAjax = getrequeteAjax();
var ipsite = infoserveur(idsite).serveur.ip;
var URL = 'test_ping.php';
URL += '?action=ping&ip='+ipsite+'&rnd='+Math.random();
requeteAjax.open('GET',URL,true);
requeteAjax.onreadystatechange = affichagePing;
requeteAjax.send(null);
 
function affichagePing(){//affiches les information serveur dans le popup
	if(requeteAjax.readyState == 4 && requeteAjax.status == 200)
	{
	  data = eval('('+requeteAjax.responseText+')');
	  $(cible+"_"+idsite).innerHTML = data.ping;
	}
	else
	{
	 $(cible+"_"+idsite).innerHTML = "...";
	}
}
 
}
 
function site(cible, idsite){//affiche le nom du site dans la cellule cible
var requeteAjax = getrequeteAjax();
var namesite = infoserveur(idsite).serveur.site;
var nouvElem = document.createElement('p');
nouvElem.onclick = 'popupOn('+idsite+'); popupinfo('+idsite+');';
text = document.createTextNode(namesite);
nouvElem.appendChild(text);
$(cible+'_'+idsite).appendChild(nouvElem);
 
}
 
function action(cible, idsite){
	switch (cible){
		case 'site':
		site(cible,idsite);
		break;
 
		case 'ping':
		ping(cible,idsite);
		break;		
	}
}

test_connect.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
// Paramètres persos
$host = "localhost"; 
$user = "root"; 
$pass = ""; 
$bdd = "checklist"; 
 
// connexion
@mysql_connect($host,$user,$pass)
   or die("Impossible de se connecter en tant que $user");
@mysql_select_db("$bdd")
   or die("Impossible d'utiliser la base $bdd");
?>

puis la BDD

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
 
-- phpMyAdmin SQL Dump
-- version 2.10.1
-- http://www.phpmyadmin.net
-- 
-- Serveur: localhost
-- Généré le : Mar 06 Mai 2008 à 11:17
-- Version du serveur: 5.0.45
-- Version de PHP: 5.2.5
 
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
 
-- 
-- Base de données: `checklist`
-- 
 
-- --------------------------------------------------------
 
-- 
-- Structure de la table `test_ping`
-- 
 
CREATE TABLE `test_ping` (
  `id` int(11) NOT NULL auto_increment,
  `site` varchar(60) NOT NULL,
  `ip` varchar(60) NOT NULL,
  `active` tinyint(4) NOT NULL default '1',
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=6 ;
 
-- 
-- Contenu de la table `test_ping`
-- 
 
INSERT INTO `test_ping` (`id`, `site`, `ip`, `active`) VALUES 
(1, 'google.fr', '216.239.59.104', 1),
(2, 'developpez.net', '87.98.128.200', 1),
(3, 'inconue au bataillon', '99.105.62.31', 1),
(4, 'perdu ip', '85.85.85.85', 1),
(5, 'localhost', '127.0.0.1', 1);

**llaffont** · 06/05/2008, 16h16

re!

J'ai vraiment pas de chance chaque fois que je pause une question elle est trops chiante a trouvé une réponse.

Bon du nouveau sur mon script.

J'ai constaté que si je mets une alerte derrière chaque création d'une balise <td> ma page est affiché avec l'aspect en cours.

je pense que le fait d'avoir cette alerte qui s'affiche, rafraichi la présentation.

Est t'il possible de faire ça sans avoir une alerte qui s'ouvre ?

merci d'avance.

**llaffont** · 08/08/2008, 12h48

Bon j'ai résolu ça en lançant les traitements les uns derrieres les autres et cela fonction beaucoup mieux.

[AJAX] tableau HTML Dynamique

JavaScript

Discussions similaires

Partager

Partager