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

Version imprimable

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:

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:

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:

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.

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,

Citation:

Ensuite j'ai créé mes fonctions Java

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

Sinon :
Code:

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... :roll:

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

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

07/11/2008, 13h01
llaffont

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é.
07/11/2008, 13h22
llaffont

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
07/11/2008, 13h46
Bovino

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...
07/11/2008, 13h53
llaffont

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 8O 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... :mrgreen:
11/11/2008, 09h21
marcha
Salut,

Une première remarque, il me semble que tu produits des balises
qui ont un id non unique (vérifie ta page au validateur html dans un
premier temps)

Ensuite pour la gestion des évènements tu utilises:

$("td").bind("dblclick",function(){modeModif(this);});

Ce qui en effet associe beaucoup de gestionnaire d'évènement.

Tu as une autre approche possible avec un seul gestionnaire:

$('table').click(function(event) {
var target = $(event.target); // élément sur lequel on a cliqué
event.preventDefault(); // éventuellement nécessaire
modeModif(target);
});

Les clics produits sur un élément enfant de chaque table (dans cet
exemple), vont remonter (bubbling) pour déclencher un clic sur
chaque élément parent, et chaque gestionnaire d'évènement sera
appelé dans la hiérarchie (si il sont définis).

L'objet event fourni l'attribut target qui permet de savoir quel élément
enfant est à l'origine du clic. Un peu de doc sur le sujet:

http://www.coursweb.ch/javascript/events.html

Donc tu peux t'en sortir avec un seul gestionnaire par type d'évènement.

Un petit problème reste à gérer. Si tu as un cellule de table dans le genre:

<td><img .../></td>

le target référencera la balise img et non la balise td. Pour contourner ce
problème tu peux tester target.tagName et si il s'agit pas d'un td, modifier
target par target.parent et refaire un test.

Moi j'utilise souvent des class pour identifier les éléments donc mon code
de traitement commence avec qqch du genre:
Code:

1 2 3 4 5 6 7 8 $(document.body).click(function(event) { var target = $(event.target); if(!target.hasClass('action')) target = target.parent(); if(target.hasClass('action')) { ... code ici ... } });