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 :

[AJAX] tableau HTML Dynamique


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de llaffont
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juin 2007
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2007
    Messages : 702
    Par défaut [AJAX] tableau HTML Dynamique
    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);

  2. #2
    Membre éclairé Avatar de llaffont
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juin 2007
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2007
    Messages : 702
    Par défaut
    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.

  3. #3
    Membre éclairé Avatar de llaffont
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juin 2007
    Messages
    702
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2007
    Messages : 702
    Par défaut
    Bon j'ai résolu ça en lançant les traitements les uns derrieres les autres et cela fonction beaucoup mieux.

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

Discussions similaires

  1. Compter et parcourir les lignes d'un tableau HTML "dynamique"
    Par symfonyc dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 10/08/2012, 15h15
  2. [AJAX] javascript-ajax & tableau html
    Par gcgcgc dans le forum AJAX
    Réponses: 13
    Dernier message: 11/06/2010, 09h27
  3. Créer un tableau html dynamiquement
    Par bdaboah dans le forum ASP
    Réponses: 8
    Dernier message: 07/02/2008, 09h17
  4. [Javascript] Connaître la hauteur d'un tableau HTML dynamique ?
    Par renaud26 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 21/04/2006, 17h35
  5. [Tableaux] Tableau HTML dynamique
    Par gunth dans le forum Langage
    Réponses: 2
    Dernier message: 14/12/2005, 16h59

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