question d'ergonomie

SAM

22/03/2008 à 15:19

J-F Portala a écrit :

Bonjour
je travaille avec wamp

Wikipedia me dit que ce n'est qu'un package :
Apache + PHP + MySql
... un serveur Web à la maison quoi.

J'affiche une table article dans un tableau.
Chaque ligne correspond à la description de l'article et en fin de ligne ,
j'ai mis un lien "modifier" qui permet d'ouvrir une boite de
dialogue permettant de modifier l'article.

Plus de précision ?
Qu'est-ce que c'est que cette boite de dialogue ?
(qu'il y a t-il dedans, comment sait-elle qu'on veut modifier l'article
et non pas son prix ou la quantité ? comment et où renvoie-t'elle la
modif ?)

Lorsque je valide ce formulaire, je rafraichis mon tableau avec les
nouvelles informations.

Le probleme est que lorsque j'ai plusieurs centaines d'articles, lorsque je
réaffiche la page avec le tableau,
j'ai perdu la position de la ligne que je venais de modifier, ce qui fait
que si je veux modifier l'article juste au dessus ou en dessous
pour modifier un prix par exemple, je dois à nouveau chercher dans tout le
tableau.

Ben ! Aussi ! c't'idée de valider alors que c'est pas fini !
Frénétique de la touche Entrée ?

Je peux mettre en évidence le dernier article modifié en mettant la ligne
d'une autre couleur, mais il faut quand
meme faire du scrolling pour le rechercher.

Je sais que le top serait de modifier directement dans le tableau
d'affichage sans passer par le formulaire, mais cela me parait
depasser mes compétences.

Le top, puisque tu sembles en gestion d'un futur formulaire de commande,
serait de tout mettre dans un vrai formulaire avec réf, descriptif, prix
dans des champs de formulaires qui sont alors directement modifiables.

Pour la modif d'affichage :

function ecrire(rang, cel, texte) { // cel = N° de cellule de la rangée
rang = rang.parentNode;
while(rang.tagName!='TD') rang = rang.parentNode;
rang.cells[cel-1].innerHTML = texte;
}

<button onclick="ecrire(this, 2, 'Paire de chaussettes')">

Alors ... par l'exemple :

CSS :

.hide { visibility: hidden; height: 0px; overflow: hidden; z-index: 0; }
td { position: relative }
td div { position: absolute; top: 0; border:1px solid; z-index: 100; }

HTML :

<form action="articles.php" name="f_art">
<table id="articles">
<tr><th>Ref</th>Desrc.</th><th>Px</th><th>Quant</th><th>Total</th><th>Modif</th></tr>
<tr><td><?php echo $Numero[] ?></td><td><?php echo $Descro[] ?></td> ...
<tr><td> ...
... ... ... </tr>
</table>
<input type=submit>
</form>

dernière cellule de 125ième rangée :
(le php devra écrire '125' partout où c'est nécessaire)

<td class="modif">
<button onclick="modifier(125)">modifier</button>
<div class="hide" id="modif_125">
<p>Article N° : <input name="Num_125" value="125"> -
Prix : <input name="Prx_125" value="31.25">€
<input name="Mem_125" type=hidden>
<p>Descriptif : <textarea name="Txt_125">
Apprendre le JavaScript, mais c'est facile.
</textarea>
<input type=button onclick="return modif(125)"
value="valider la modification">
<input type=button onclick="return annule(125)"
value="annuler la modification">
</div>
</td>

JS :

<script type="text/javascript">
function $(id) { return document.getElementById(id); }

function modifier(num) { $('modif_'+num).className = ''; }

function modif(num) {
var rang = $('articles).rows[num].getElementsByTagName('TD');
var F = document.forms['f_art'].elements;
// sauvegarde des originaux
F['Mem_'+num].value = F['Num_'+num].value + '|' +
F['Txt_'+num].value + '|' +
F['Prx_'+num].value;
// ecriture des modifs
rang[0].innerHTML = F['Num_'+num].value;
rang[1].innerHTML = F['Txt_'+num].value;
rang[2].innerHTML = F['Prx_'+num].value;
$('modif_'+num).className = 'hide';
return false;
}

function annule(num) {
var rang = $('articles).rows[num].getElementsByTagName('TD');
var F = document.forms['f_art'].elements;
// récupération des originaux
var Mem = F['Mem_'+num].value.split('|');
// ecriture des modifs
rang[0].innerHTML = F['Num_'+num].value = Mem[0];
rang[1].innerHTML = F['Txt_'+num].value = Mem[1];
rang[2].innerHTML = F['Prx_'+num].value = Mem[2];
$('modif_'+num).className = 'hide';
return false;
}
</script>

et pour vraiment confirmer tout d'un coup
le boutton de submit est après le table

Le PHP n'aura qu'à redistribuer à la BdD les données qui sont dans les
champs des divs de modification

Bon, après on peut compliquer avec une double validation :
- réaffichage via PHP pour être sûr que tout est OK
- validation pour enregistrement

Auriez vous des pistes ?

Sinon, par méthode "fébrile", mettre dans le head :

<?php
# script php pour récupérer 'num'
$num = $POST[ ... ; // ou je ne sais quoi kivabien en php
?>
<script type="text/javascript">
var num ='<?php echo $num ?>';
function repere(val) { document.form.num.value = val;}
function init() {
if(num != '') {
num = document.forms['f_art'].elements['Num_'+num];
num.focus();
setTimeout(function(){num.blur();},200);
}
}
window.onload = init;
</script>

et mettre qque part dans le form :

<input type=hidden name="num" value="">

puis dans les boutons de submit de chaque rangée :

(exemple rangée N°125)
<input type=submit onclick="repere(125);">

Soit en PHP qque chose comme :

<input type=submit onclick="repere(<?php echo $Numero[] ?>);">

Le PHP, au retour du formulaire, devra avoir récupéré la variable
attachée 'num' et la ré-écrire oussavabien dans le JS du head.

--
sm

J-F Portala a écrit :

Bonjour
je travaille avec wamp

Wikipedia me dit que ce n'est qu'un package :
Apache + PHP + MySql
... un serveur Web à la maison quoi.

J'affiche une table article dans un tableau.
Chaque ligne correspond à la description de l'article et en fin de ligne ,
j'ai mis un lien "modifier" qui permet d'ouvrir une boite de
dialogue permettant de modifier l'article.

Plus de précision ?
Qu'est-ce que c'est que cette boite de dialogue ?
(qu'il y a t-il dedans, comment sait-elle qu'on veut modifier l'article
et non pas son prix ou la quantité ? comment et où renvoie-t'elle la
modif ?)

Lorsque je valide ce formulaire, je rafraichis mon tableau avec les
nouvelles informations.

Le probleme est que lorsque j'ai plusieurs centaines d'articles, lorsque je
réaffiche la page avec le tableau,
j'ai perdu la position de la ligne que je venais de modifier, ce qui fait
que si je veux modifier l'article juste au dessus ou en dessous
pour modifier un prix par exemple, je dois à nouveau chercher dans tout le
tableau.

Ben ! Aussi ! c't'idée de valider alors que c'est pas fini !
Frénétique de la touche Entrée ?

Je peux mettre en évidence le dernier article modifié en mettant la ligne
d'une autre couleur, mais il faut quand
meme faire du scrolling pour le rechercher.

Je sais que le top serait de modifier directement dans le tableau
d'affichage sans passer par le formulaire, mais cela me parait
depasser mes compétences.

Le top, puisque tu sembles en gestion d'un futur formulaire de commande,
serait de tout mettre dans un vrai formulaire avec réf, descriptif, prix
dans des champs de formulaires qui sont alors directement modifiables.

Pour la modif d'affichage :

function ecrire(rang, cel, texte) { // cel = N° de cellule de la rangée
rang = rang.parentNode;
while(rang.tagName!='TD') rang = rang.parentNode;
rang.cells[cel-1].innerHTML = texte;
}

<button onclick="ecrire(this, 2, 'Paire de chaussettes')">

Alors ... par l'exemple :

CSS :

.hide { visibility: hidden; height: 0px; overflow: hidden; z-index: 0; }
td { position: relative }
td div { position: absolute; top: 0; border:1px solid; z-index: 100; }

HTML :

<form action="articles.php" name="f_art">
<table id="articles">
<tr><th>Ref</th>Desrc.</th><th>Px</th><th>Quant</th><th>Total</th><th>Modif</th></tr>
<tr><td><?php echo $Numero[] ?></td><td><?php echo $Descro[] ?></td> ...
<tr><td> ...
... ... ... </tr>
</table>
<input type=submit>
</form>

dernière cellule de 125ième rangée :
(le php devra écrire '125' partout où c'est nécessaire)

<td class="modif">
<button onclick="modifier(125)">modifier</button>
<div class="hide" id="modif_125">
<p>Article N° : <input name="Num_125" value="125"> -
Prix : <input name="Prx_125" value="31.25">€
<input name="Mem_125" type=hidden>
<p>Descriptif : <textarea name="Txt_125">
Apprendre le JavaScript, mais c'est facile.
</textarea>
<input type=button onclick="return modif(125)"
value="valider la modification">
<input type=button onclick="return annule(125)"
value="annuler la modification">
</div>
</td>

JS :

<script type="text/javascript">
function $(id) { return document.getElementById(id); }

function modifier(num) { $('modif_'+num).className = ''; }

function modif(num) {
var rang = $('articles).rows[num].getElementsByTagName('TD');
var F = document.forms['f_art'].elements;
// sauvegarde des originaux
F['Mem_'+num].value = F['Num_'+num].value + '|' +
F['Txt_'+num].value + '|' +
F['Prx_'+num].value;
// ecriture des modifs
rang[0].innerHTML = F['Num_'+num].value;
rang[1].innerHTML = F['Txt_'+num].value;
rang[2].innerHTML = F['Prx_'+num].value;
$('modif_'+num).className = 'hide';
return false;
}

function annule(num) {
var rang = $('articles).rows[num].getElementsByTagName('TD');
var F = document.forms['f_art'].elements;
// récupération des originaux
var Mem = F['Mem_'+num].value.split('|');
// ecriture des modifs
rang[0].innerHTML = F['Num_'+num].value = Mem[0];
rang[1].innerHTML = F['Txt_'+num].value = Mem[1];
rang[2].innerHTML = F['Prx_'+num].value = Mem[2];
$('modif_'+num).className = 'hide';
return false;
}
</script>

et pour vraiment confirmer tout d'un coup
le boutton de submit est après le table

Le PHP n'aura qu'à redistribuer à la BdD les données qui sont dans les
champs des divs de modification

Bon, après on peut compliquer avec une double validation :
- réaffichage via PHP pour être sûr que tout est OK
- validation pour enregistrement

Auriez vous des pistes ?

Sinon, par méthode "fébrile", mettre dans le head :

<?php
# script php pour récupérer 'num'
$num = $POST[ ... ; // ou je ne sais quoi kivabien en php
?>
<script type="text/javascript">
var num ='<?php echo $num ?>';
function repere(val) { document.form.num.value = val;}
function init() {
if(num != '') {
num = document.forms['f_art'].elements['Num_'+num];
num.focus();
setTimeout(function(){num.blur();},200);
}
}
window.onload = init;
</script>

et mettre qque part dans le form :

<input type=hidden name="num" value="">

puis dans les boutons de submit de chaque rangée :

(exemple rangée N°125)
<input type=submit onclick="repere(125);">

Soit en PHP qque chose comme :

<input type=submit onclick="repere(<?php echo $Numero[] ?>);">

Le PHP, au retour du formulaire, devra avoir récupéré la variable
attachée 'num' et la ré-écrire oussavabien dans le JS du head.

--
sm

Vous avez filtré cet utilisateur ! Consultez son message

J-F Portala a écrit :

Bonjour
je travaille avec wamp

Wikipedia me dit que ce n'est qu'un package :
Apache + PHP + MySql
... un serveur Web à la maison quoi.

J'affiche une table article dans un tableau.
Chaque ligne correspond à la description de l'article et en fin de ligne ,
j'ai mis un lien "modifier" qui permet d'ouvrir une boite de
dialogue permettant de modifier l'article.

Plus de précision ?
Qu'est-ce que c'est que cette boite de dialogue ?
(qu'il y a t-il dedans, comment sait-elle qu'on veut modifier l'article
et non pas son prix ou la quantité ? comment et où renvoie-t'elle la
modif ?)

Lorsque je valide ce formulaire, je rafraichis mon tableau avec les
nouvelles informations.

Le probleme est que lorsque j'ai plusieurs centaines d'articles, lorsque je
réaffiche la page avec le tableau,
j'ai perdu la position de la ligne que je venais de modifier, ce qui fait
que si je veux modifier l'article juste au dessus ou en dessous
pour modifier un prix par exemple, je dois à nouveau chercher dans tout le
tableau.

Ben ! Aussi ! c't'idée de valider alors que c'est pas fini !
Frénétique de la touche Entrée ?

Je peux mettre en évidence le dernier article modifié en mettant la ligne
d'une autre couleur, mais il faut quand
meme faire du scrolling pour le rechercher.

Je sais que le top serait de modifier directement dans le tableau
d'affichage sans passer par le formulaire, mais cela me parait
depasser mes compétences.

Le top, puisque tu sembles en gestion d'un futur formulaire de commande,
serait de tout mettre dans un vrai formulaire avec réf, descriptif, prix
dans des champs de formulaires qui sont alors directement modifiables.

Pour la modif d'affichage :

function ecrire(rang, cel, texte) { // cel = N° de cellule de la rangée
rang = rang.parentNode;
while(rang.tagName!='TD') rang = rang.parentNode;
rang.cells[cel-1].innerHTML = texte;
}

<button onclick="ecrire(this, 2, 'Paire de chaussettes')">

Alors ... par l'exemple :

CSS :

.hide { visibility: hidden; height: 0px; overflow: hidden; z-index: 0; }
td { position: relative }
td div { position: absolute; top: 0; border:1px solid; z-index: 100; }

HTML :

<form action="articles.php" name="f_art">
<table id="articles">
<tr><th>Ref</th>Desrc.</th><th>Px</th><th>Quant</th><th>Total</th><th>Modif</th></tr>
<tr><td><?php echo $Numero[] ?></td><td><?php echo $Descro[] ?></td> ...
<tr><td> ...
... ... ... </tr>
</table>
<input type=submit>
</form>

dernière cellule de 125ième rangée :
(le php devra écrire '125' partout où c'est nécessaire)

<td class="modif">
<button onclick="modifier(125)">modifier</button>
<div class="hide" id="modif_125">
<p>Article N° : <input name="Num_125" value="125"> -
Prix : <input name="Prx_125" value="31.25">€
<input name="Mem_125" type=hidden>
<p>Descriptif : <textarea name="Txt_125">
Apprendre le JavaScript, mais c'est facile.
</textarea>
<input type=button onclick="return modif(125)"
value="valider la modification">
<input type=button onclick="return annule(125)"
value="annuler la modification">
</div>
</td>

JS :

<script type="text/javascript">
function $(id) { return document.getElementById(id); }

function modifier(num) { $('modif_'+num).className = ''; }

function modif(num) {
var rang = $('articles).rows[num].getElementsByTagName('TD');
var F = document.forms['f_art'].elements;
// sauvegarde des originaux
F['Mem_'+num].value = F['Num_'+num].value + '|' +
F['Txt_'+num].value + '|' +
F['Prx_'+num].value;
// ecriture des modifs
rang[0].innerHTML = F['Num_'+num].value;
rang[1].innerHTML = F['Txt_'+num].value;
rang[2].innerHTML = F['Prx_'+num].value;
$('modif_'+num).className = 'hide';
return false;
}

function annule(num) {
var rang = $('articles).rows[num].getElementsByTagName('TD');
var F = document.forms['f_art'].elements;
// récupération des originaux
var Mem = F['Mem_'+num].value.split('|');
// ecriture des modifs
rang[0].innerHTML = F['Num_'+num].value = Mem[0];
rang[1].innerHTML = F['Txt_'+num].value = Mem[1];
rang[2].innerHTML = F['Prx_'+num].value = Mem[2];
$('modif_'+num).className = 'hide';
return false;
}
</script>

et pour vraiment confirmer tout d'un coup
le boutton de submit est après le table

Le PHP n'aura qu'à redistribuer à la BdD les données qui sont dans les
champs des divs de modification

Bon, après on peut compliquer avec une double validation :
- réaffichage via PHP pour être sûr que tout est OK
- validation pour enregistrement

Auriez vous des pistes ?

Sinon, par méthode "fébrile", mettre dans le head :

<?php
# script php pour récupérer 'num'
$num = $POST[ ... ; // ou je ne sais quoi kivabien en php
?>
<script type="text/javascript">
var num ='<?php echo $num ?>';
function repere(val) { document.form.num.value = val;}
function init() {
if(num != '') {
num = document.forms['f_art'].elements['Num_'+num];
num.focus();
setTimeout(function(){num.blur();},200);
}
}
window.onload = init;
</script>

et mettre qque part dans le form :

<input type=hidden name="num" value="">

puis dans les boutons de submit de chaque rangée :

(exemple rangée N°125)
<input type=submit onclick="repere(125);">

Soit en PHP qque chose comme :

<input type=submit onclick="repere(<?php echo $Numero[] ?>);">

Le PHP, au retour du formulaire, devra avoir récupéré la variable
attachée 'num' et la ré-écrire oussavabien dans le JS du head.

--
sm

Denis Beauregard

22/03/2008 à 15:54

Le Sat, 22 Mar 2008 10:18:41 +0100, "J-F Portala"
écrivait dans fr.comp.infosystemes.www.auteurs:

Le probleme est que lorsque j'ai plusieurs centaines d'articles, lorsque je
réaffiche la page avec le tableau,
j'ai perdu la position de la ligne que je venais de modifier, ce qui fait
que si je veux modifier l'article juste au dessus ou en dessous
pour modifier un prix par exemple, je dois à nouveau chercher dans tout le
tableau.

Une solution simple : saisir dans le tableau la date et l'heure de la
dernière modification et s'en servir pour afficher les n dernières
modifications ou pour repositionner le tableau au même endroit.

Denis

SAM

22/03/2008 à 20:58

Denis Beauregard a écrit :

Le Sat, 22 Mar 2008 10:18:41 +0100, "J-F Portala"
écrivait dans fr.comp.infosystemes.www.auteurs:

Le probleme est que lorsque j'ai plusieurs centaines d'articles, lorsque je
réaffiche la page avec le tableau,
j'ai perdu la position de la ligne que je venais de modifier,

Une solution simple : saisir dans le tableau la date et l'heure de la
dernière modification et s'en servir pour afficher les n dernières
modifications ou pour repositionner le tableau au même endroit.

J'a rien compris de rien compris !

Comment fais-tu pour te repositionner au "même endroit" ?
Tu as une molette automatique et réglée sur ta pendule ?

Ceci étant, au rechargement de la même page ça devrait s'afficher pareil
qu'avant, non ?

Si on avait une url de test ... ce serait plus facile de comprendre-voir
de quoi il retourne.

--
sm

Denis Beauregard

22/03/2008 à 21:30

Le Sat, 22 Mar 2008 20:58:19 +0100, SAM
écrivait dans
fr.comp.infosystemes.www.auteurs:

Denis Beauregard a écrit :
Le Sat, 22 Mar 2008 10:18:41 +0100, "J-F Portala"
écrivait dans fr.comp.infosystemes.www.auteurs:

Le probleme est que lorsque j'ai plusieurs centaines d'articles, lorsque je
réaffiche la page avec le tableau,
j'ai perdu la position de la ligne que je venais de modifier,

Une solution simple : saisir dans le tableau la date et l'heure de la
dernière modification et s'en servir pour afficher les n dernières
modifications ou pour repositionner le tableau au même endroit.

J'a rien compris de rien compris !

Comment fais-tu pour te repositionner au "même endroit" ?
Tu as une molette automatique et réglée sur ta pendule ?

Ceci étant, au rechargement de la même page ça devrait s'afficher pareil
qu'avant, non ?

Si on avait une url de test ... ce serait plus facile de comprendre-voir
de quoi il retourne.

D'après ce que j'ai compris du problème, c'est qu'il a une base de
données, qu'il édite un élément à la fois, et il voudrait se
repositionner au même endroit + 1 une fois que les données ont été
saisies.

Soit il note quelque part le numéro de la dernière entrée, soit
il peut classer par date les dernières modifications comme je
suggère.

Ensuite, il affiche tout bonnement la position suivant la dernière
modif.

S'il affiche plusieurs éléments à la fois, il suffirait d'avoir
un "set focus" en javascript (mais je ne sais pas comment le faire).

Denis

SAM

22/03/2008 à 23:29

Denis Beauregard a écrit :

Le Sat, 22 Mar 2008 20:58:19 +0100, SAM
écrivait dans
fr.comp.infosystemes.www.auteurs:

J'a rien compris de rien compris !

D'après ce que j'ai compris du problème, c'est qu'il a une base de
données, qu'il édite un élément à la fois, et il voudrait se
repositionner au même endroit + 1 une fois que les données ont été
saisies.

C'est ce qu'il semble.

S'il affiche plusieurs éléments à la fois, il suffirait d'avoir
un "set focus" en javascript (mais je ne sais pas comment le faire).

J'ai compris qu'on était dans ce cas de figure.

Je proposais d'entrer dans un hidden le N° de la dernière ligne vue.
Le fichier PHP étant supposé, au retour, le re-donner à un JS qui
placerait le focus sur un des éléments de la rangée visée.
On a bien la même façon de voir la chose.

Mais je n'ai pas trop compris l'histoire de la date+heure.

--
sm

Denis Beauregard

22/03/2008 à 23:43

Le Sat, 22 Mar 2008 23:29:37 +0100, SAM
écrivait dans
fr.comp.infosystemes.www.auteurs:

Mais je n'ai pas trop compris l'histoire de la date+heure.

L'an dernier, j'avais développé (mais pas terminé) un petit logiciel
en PHP pour gérer une liste de liens. Je prévoyais ajouter l'heure du
dernier ajout pour annuler les dernières corrections. J'ai répondu
avec ce concept en tête.

Denis

Fredchou

23/03/2008 à 12:31

Le probleme est que lorsque j'ai plusieurs centaines d'articles, lorsque
je réaffiche la page avec le tableau,
j'ai perdu la position de la ligne que je venais de modifier, ce qui fait
que si je veux modifier l'article juste au dessus ou en dessous
pour modifier un prix par exemple, je dois à nouveau chercher dans tout le
tableau.

Il me semble que tu peux faire ça, tout simplement, avec une "ancre"
(http://www.la-grange.net/w3c/html4.01/struct/links.html#h-12.1). Tu créer
un formulaire pour chaque fiche, tu associes une ancre à chaque formulaire
et tu mets sur le lien "action" de ton formulaire l'ancre de la fiche
suivante.

<FORM action="modif_fiches.php#fiche2" method="post" id="fiche1">
...le formulaire de la fiche n°1...
</FORM>

<FORM action="modif_fiches.php#fiche3" method="post" id="fiche2">
...
</FORM>

--
Fredchou
mailto:

SAM

23/03/2008 à 12:54

Fredchou a écrit :

Le probleme est que lorsque j'ai plusieurs centaines d'articles, lorsque
je réaffiche la page avec le tableau,
j'ai perdu la position de la ligne que je venais de modifier, ce qui fait
que si je veux modifier l'article juste au dessus ou en dessous
pour modifier un prix par exemple, je dois à nouveau chercher dans tout le
tableau.

Il me semble que tu peux faire ça, tout simplement, avec une "ancre"
(http://www.la-grange.net/w3c/html4.01/struct/links.html#h-12.1). Tu créer
un formulaire pour chaque fiche, tu associes une ancre à chaque formulaire
et tu mets sur le lien "action" de ton formulaire l'ancre de la fiche
suivante.

<FORM action="modif_fiches.php#fiche2" method="post" id="fiche1">
...le formulaire de la fiche n°1...
</FORM>

<FORM action="modif_fiches.php#fiche3" method="post" id="fiche2">
...
</FORM>

Ha oui ! pas mal !
dans la mesure où c'est le php qui écrit tout ça (redondance des forms).

Avantage : pas besoin de JS

faudra juste refaire tout le tableau
(à moins que ce fussent déjà des tables individuels pour chaque article)

Mais ...
et les autres articles (de tous les autres forms) comment ça se passe ?

--
sm

J-F Portala

24/03/2008 à 07:49

Merci de votre aide.

Pour plus de précision, le formulaire affiche sur click du lien modifier
affiche le formulaire
de modification de l'article avec toutes ses caractéristiques (stock
description famille prix...)
C'est la validation du formulaire qui renvoie la pag principale dans
laqualle les modifications sont enregistrées
dans la table, puis la liste des tous les articles sest affichées.

Je peux mettre dans une variable globale le numero de l'article, mais
comment puis je faire pour me positionner à l'endroit de l'article.

Si j'ai bien compris , SAM propose dans se premiere reponse de gérer le
tableau comme un enorme formulaire dans lequel tous les champs sont
modifiables en direct. Ce qui permet de ne valider l'ensemble des
modifications qu'une seule fois.
La page n'est pas rafraichie et on reste navigue dans le tableau.

C'est une solution intéressante mais cela suppose que tous les champs soient
gérés de cette façon. (certains champs correspondent à des boutons radios,
d'autres à des select
liés à d'autres tables...)
Est ce que cela ne risque pas d'etre un peu lourd.
Si plusieurs personnes travaillent sur ce tableau en meme temps, toutes les
modifications de l'une seront perdues lorsque le second validera.
Le fait de ne modifier les articles qu'un par un permet de limiter ce
risque.
Dans les diffrentes responses , on a parle d'un setfocus().
J'ai essayé dans chaque ligne de générer un champ texte et replacer le focus
sur la ligne venant d'etre modifiée. La ligne a bien le focus, mais
il n'y a pas de scrolling automatique permettant de centrer la ligne sur la
page.
Actuellement, mon tableau depasse la page du navigateur. Si je limite mon
tableau au sein d'un div, est ce que l'on a plus de controle pour gerer les
positions des ascenceurs.

J'ai vu des exemples réalisés avec ajax permettant d'éditer directement des
lignes d'un tableau comme sur un tableur.
Avez vous déjà utilisé cette technique.

Merci de vos conseils

Jeff

Vous avez filtré cet utilisateur ! Consultez son message

Lea GRIS

24/03/2008 à 09:06

J-F Portala a écrit :

Dans les diffrentes responses , on a parle d'un setfocus().
J'ai essayé dans chaque ligne de générer un champ texte et replacer le focus
sur la ligne venant d'etre modifiée. La ligne a bien le focus, mais
il n'y a pas de scrolling automatique permettant de centrer la ligne sur la
page.
Actuellement, mon tableau depasse la page du navigateur. Si je limite mon
tableau au sein d'un div, est ce que l'on a plus de controle pour gerer les
positions des ascenceurs.

Tu peux ajouter un attribut name et ou un identifiant idà chaque ligne
du tableau. Par exemple :
<tr id="ed12"><td><a href="editionarticle...">La vie des pucerons
unijambistes en Patagonie de l'ouest</a></td></tr>
<tr id="edt13"><td><a href="editionarticle...">Le venin de serpent
rose</ha></td></tr>

Après la validation du formulaire de modifications, il te faudra
renvoyer vers lapage#aedt12 au lieu de renvoyer vers lapage quant tu
retourne de l'édition de l'article 12 et vers lapage#edt13 quant tu
revien de l'édition de l'article 13...

Ainsi le navigateur se placera automatiquement pour afficher en haut
l'écran la ligne du tableau dont l'identifiant ou le nom correspond.

--
Léa Gris

question d'ergonomie

10 réponses

Veuillez sélectionner un problème