Bonjour,

Je suis actuellement sur un projet AJAX. (je débute dans ce domaine)

Mon projet consiste à afficher une page contenant un tableau de plus de 300 lignes représentant des serveurs extrait depuis une base SQL.
Via des cliques je dois changer des paramètre en base.

Ma structure de fichier prends forme comme suit :

_ index.php
_ Action.js
_ Jquery.js

Je donc structuré mon script de la façons suivante :

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
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
 
<?php
include "../scripts/_connect.php"; //Variable d'authification SQL
 
 
	$query = "SELECT * FROM serveur "; //id 	application 	ip 	alias 	hostname 	port 	user 	date 	active
	$result = mysql_query($query)or die('La requ&ecirc;te SQL a &eacute;chou&eacute; !<br>query : '.$query.'<br>');
	echo '<html><head>
		<script TYPE="text/javascript" SRC="./jquery-1.2.6.js"></script>
 
	</head>
	<body><fieldset><legend ><b>Administration des agents Patrol</b></legend>
			<TABLE border="1" align="center" >';
	echo '<tbody id="adminPatrol">';
	echo '<TR class="titre_table" align="center">
			<TH class="thAgent" colspan="2">&nbsp;Etat&nbsp;</TH>
			<TH class="thAgent" >&nbsp;Application&nbsp;</TH>
			<TH class="thAgent" >&nbsp;Adresse IP&nbsp;</TH>
			<TH class="thAgent" >&nbsp;Alias&nbsp;</TH>
			<TH class="thAgent" >&nbsp;Hostname&nbsp;</TH>
			<TH class="thAgent" >&nbsp;Port&nbsp;</TH>
		</TR>'."\n";
	while ($line = mysql_fetch_assoc($result)){
	if($line['active']==1){
		$image = './images/ball.green.gif';
		$etat = 'ON';
	}else{
		$image = './images/ball.red.gif';
		$etat = 'OFF';
	}
 
		echo'<TR id='.$line['id'].'>
			<TH title="active" ><img src="'.$image.'" alt="'.$etat.'"></TH>
			<TH title="infoAgent" ><img name="'.$line['user'].'~'.$line['date'].'" src="./images/info_20px.png" alt="info"></TH>
			<TD align="center" width="390" id="appli">'.$line['application'].'</TD>
			<TD align="center" id="ip">'.$line['ip'].'</TD>
			<TD align="center" id="alias">'.$line['alias'].'</TD>
			<TD align="center" id="host">'.$line['hostname'].'</TD>
			<TD align="center" id="port">'.$line['port'].'</TD>		
		</TR>';
	}
 
    echo '<script TYPE="text/javascript" SRC="./test.js"></script></tbody></TABLE></body></html>'."\n";
 
function updateAgent($DataArray){
	$idAgent = $DataArray['idAgent'];
	$appliAgent = $DataArray['appliAgent'];
	$ipAgent = $DataArray['ipAgent'];
	$aliasAgent = $DataArray['aliasAgent'];
	$hostAgent = $DataArray['hostAgent'];
	$portAgent = $DataArray['portAgent'];
	$etatAgent = $DataArray['etatAgent'];
	$user = $DataArray['user'];
	$date = date("Y-m-d");
	$query = "UPDATE `serveur` SET `application`='".$appliAgent."',`ip`='".$ipAgent."',`alias`='".$aliasAgent."',`hostname`='".$hostAgent."',`port`='".$portAgent."',`active`='".$etatAgent."',`user`='".$user."',`date`='".$date."' WHERE `id`='".$idAgent."'";
	echo $query;
	$result = mysql_query($query) or die("La requête SQL a échoué !<br>query : $query<br>");
}
 
 
if (isset($_REQUEST['action'])){
 
	$action = $_REQUEST['action'];
	switch ($action){		
		case 'afficher' :
			aspectAdminPat();
		break;
 
		case 'update' : 
			updateAgent($_REQUEST);
		break;
	}
 
}
 
?>
Je structure donc la représentation de mon tableau.

Ensuite j'ai créé mes fonctions Java

Action.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
 
 
var tabListAgentJSON;
var tab_i=0;
 
	$("td").bind("dblclick",function(){modeModif(this);});			
	$("th[@title=active]").bind("click",function(){ActivityModif(this);});
	$("th[@title=infoAgent]").bind("click",function(){showInfo(this);});	
 
function modeModif(boiteTD){
	$(boiteTD).unbind("dblclick");
	var idTR = $(boiteTD).parent("tr").attr("id"); //id du TR est indentique a l'id de l'agent afin de pouvoir faire le push SQL 
	var idTD = $(boiteTD).attr("id");
	var contenu = $(boiteTD).text();
	$(boiteTD).html('<input id="edition" type="text" cle="'+idTD+'" value="'+contenu+'">');
	$("#edition").focus();
	$("#edition").blur(function(){
		$(boiteTD).text($(this).val());
        $(boiteTD).bind("dblclick",function(){modeModif(this)});
		updateAgent(idTR);
	});
	$("#edition").keypress(function (e) {
		if(e.which==13){			
			$(boiteTD).text($(this).val());
            $(boiteTD).bind("dblclick",function(){modeModif(this)});
			updateAgent(idTR);
			}
	});	
}
 
function ActivityModif(activTD){
	var idTR = $(activTD).parent("tr").attr("id"); //id du TR est identique a l'id de l'agent afin de pouvoir faire le push SQL 
	var imgActivity = $(activTD).children("img");
	var etatAgent = imgActivity.attr("alt");
	if(etatAgent=='ON'){
		imgActivity.attr('src', './images/ball.red.gif').attr('alt', 'OFF');
		updateAgent(idTR);
	}else{
		imgActivity.attr('src', './images/ball.green.gif').attr('alt', 'ON');
		updateAgent(idTR);
	}
}
 
function updateAgent(IDAGENT){
	var AppliAgent =  $('#'+IDAGENT).children('#appli').text();
	var IpAgent = $('#'+IDAGENT).children('#ip').text();
	var AliasAgent = $('#'+IDAGENT).children('#alias').text();
	var HostAgent = $('#'+IDAGENT).children('#host').text();
	var PortAgent = $('#'+IDAGENT).children('#port').text();
	var EtatAgent =$('#'+IDAGENT).children('th[title=active]').children('img').attr('alt');
	if(EtatAgent=='ON'){EtatAgent=1}else{EtatAgent=0}; 
	var User = 'toto';	
 
	var url = './index.php';
	var parametres = 'action=update&idAgent='+IDAGENT+'&appliAgent='+AppliAgent+'&ipAgent='+IpAgent+'&aliasAgent='+AliasAgent+'&hostAgent='+HostAgent+'&portAgent='+PortAgent+'&etatAgent='+EtatAgent+'&user='+User;
	$.ajax({
		async: 'true',
		type: 'POST',
		url: url,
		data: parametres,
		error: AfficheErreur
	});
}
 
function showInfo(idCible){
	var data = $(idCible).children('img').attr('name').split('~');
	var user = data[0];
	var date = data[1];
	alert('user : '+user+' date : '+date);
}
Mon problème est que lorsque je commente les évènements la page est fluide et rapide a fermer.
Mais dès que je les dé-commentes la navigation deviens un vrai calvaire. La page est longue a chargé et le navigateur deviens instable et long a fermer.

J'ai tenté de déclarer mes évènements comme suit :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
 
$('#adminPatrol').ready(function(){
	$("td").bind("dblclick",function(){modeModif(this);});			
	$("th[@title=active]").bind("click",function(){ActivityModif(this);});
	$("th[@title=infoAgent]").bind("click",function(){showInfo(this);});					
 
});
Mais aucun changement le navigateur est instable.
Je ne trouve pas comment déclaré correctement la gestion des événements sans produire cet effet de lenteur.

Si ça ce trouve je m'y prends mal dès le début.
Dans ce cas j'aimerais si possible trouver une personne pour échanger, via la toile, sur le bon pattern à employer.
Car j'ai tout un outillage a produire semblable a ce principe.