[Jquery]Où déclaré les Evénements [Fait]

**llaffont** · 07/11/2008, 11h45

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.

**Bovino** · 07/11/2008, 12h15

Bonjour,
Tout d'abord, pour que ce soit plus facile de repérer ton problème, il est préférable de poster le code HTML généré plutôt que le PHP.

Ensuite,

Ensuite j'ai créé mes fonctions Java

Non, javascript n'a rien à voir avec Java !

Sinon :

Code :

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

1
2
3
4
$("td").bind("dblclick",function(){modeModif(this);});
$("th[@title=active]").bind("click",function(){ActivityModif(this);});
$("th[@title=infoAgent]").bind("click",function(){showInfo(this);});
$("td").bind("dblclick",function(){modeModif(this);});

Tu affectes 2 fois le même événement...

Mais au lieu de bind, tu peux utiliser les événements spécifiques :

Code :

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

1
2
3
$("td").dblclick(function(){modeModif(this);});
$("th[@title=active]").click(function(){ActivityModif(this);});
$("th[@title=infoAgent]").click(function(){showInfo(this);});

**llaffont** · 07/11/2008, 13h01

Je te remercie.

Effectivement lapsus ! Java n'est pas Javascript...
Pour le doublon evenement erreur de copier-coller qui avait dût se glisser dans mon script. Je l'ai constaté lorsque j'ai relue mon Post.

Je tente les évenements comme mentionné.

**llaffont** · 07/11/2008, 13h22

Arf ! Il ne semble pas que ce soit la bonne solution.

Je détail un peu plus mon problème.
L'interface du navigateur se bloque le temps de charger ou de fermer la page bloquage plus sur la fermeture.

Je pense que la raison est que le gestionnaire d'evenement lors de la fermeture de la page. Vérifie toutes les balise <TD> de mon tableau pour voir s'il ne s'agit pas d'un action sur une cellule. Ce qui bloquerai mon interface.

Mais s'il s'avere que le problème est bien ça je ne vois pas comment gérer mes Event's

**Bovino** · 07/11/2008, 13h46

Combien y a-t-il de balises td / th dans la page ? Car il n'y a pas de raison particulière pour que ça ralentisse exagérément...

**llaffont** · 07/11/2008, 13h53

J'ai 425 lignes dans ma base donc dans mon tableau.
5 <td> et 2 <th> par ligne.
Ce qui fait 2125 evenement sur les <td> et plus 425 pour un cellule <TH> et 425 de plus pour l'autre cellule <TH>.

Donc nous avons 2975

evenement pour toute la page nombre qui va augmenter puisque ma base est en perpétuel évolution.

Il va sans doute falloir que je réduise le nombre de cellule afficher sur ma page...

[Jquery]Où déclaré les Evénements [Fait]

jQuery

Vue hybride

Discussions similaires

Partager

Partager