tableau de resultat modifiable a la volee

[Eagle1]

Bonjour a tous !

J'ai un petit script a faire pour ma boite, et c'est quelque chose que je n'ai jamais vraiment fait alors je viens demander conseil.

J'ai une table mysql qui contient des infos. Le but est d'afficher cette table dans un tableau. pas bien dur. Le truc c'est que dans ce tableau je vais avoir 3 boutons :

- editer : rend la ligne editable dans le document meme (AJAX ?) un reclic sur edit sauve le tout dans la DB

- dupliquer : ben duplique la ligne, c a d en rajoute une en dessous, avec les memes caracteristiques

- supprimer : enleve la ligne de la table

un bouton save en dessous sauvegarde les nouvelles donnees dans la base.

J'ai un peu regarder le javascript pour modifier tout ca, et j'ai cru comprendre qu'un tableau classique table tr td n'etait pas des plus recommande... un enchainement de div serait meilleur....

votre avis ?

[Yangzebul]

Je ne vois pas pourquoi un tableau n'irai pas.

Il n'y a absolument aucune raison de faire ca avec autre chose.

Et je parle d'expérience puisque je l'ai déjà fait : datagrid éditable à la volée, avec gestion du double-clic pour rentrer en mode édit, ajout de nouvelles lignes, suppression et gestion des contraintes.

L'utilisation d'un tableau n'a posé aucun problème.

[Shtong]

Pour ce qui est du choix table/div pas d'hésitation pour moi : il faut utiliser une table puisque tu dois bien afficher un tableau de données (tu as du voir des gens conseiller l'utilisation de div plutôt que des tables dans des cas de mise en page, sans affichage de données en tableau, où c'est effectivement la meilleure pratique)

Et si tu veux faire toutes tes opérations d'édition sans recharger la page, en effet il te faudra de l'AJAX, pas le choix :]

[Yangzebul]

Et puis quitte à faire de l'ajax, c'est vraiment le cas d'école pour une interface REST.

GET > consulter la ressource

POST > nouvelle ressource

PUT > update de la ressource

DELETE > suppression de la ressource

[Eagle1]

salut

merci pour vos reponses

l'affichage avec les div me paraissait en effet tres complique...

question javascript :

comment modifier, ajouter supprimer des cellules et modifier leur contenu ?

il y a le classique getElementById (avec ca je ne connais que innerHTML)

il y a aussi il me semble un moyen d'aller a une cellule par des noeuds ?

[Eagle1]

Encore moi !

j'ai pas mal progresse dans ma journee...

Je travail pour le moment sur les boutons duplicate et del. Ils font leur effets dans la base de donnee, pas de probleme.

Seulement, le bouton duplicate recopie juste le code html sans refaire une vrai request a la db pour recharger reelement les donnees. oui comme vous le voir j'utilise smarty, je suis pas vraiment libre de toutes mes actions... mais je verrai ca demain.

Je voudrai juste savoir comment je peux enlever la ligne sur laquelle est le bouton del lorsque je clic dessus. J'ai essaye plusieurs methode mais rien ne marche. si je reprend le code de la function duplicate ca m'enleve la ligne en dessous... un lien pour que je puisse comprendre corectement le DOM ?

merci

{literal}
<script>
var xmlhttp

function duplicate(r,num,id)
{

xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
	  alert ("Your browser does not support AJAX!");
	  return;
  }
var url="/kidoons/twitter/new/duplicate?id="+id;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
var contentType = "application/x-www-form-urlencoded; charset=UTF-8";
xmlhttp.setRequestHeader("Content-type", contentType);
xmlhttp.setRequestHeader("Content-length",id.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(null);

var root = r.parentNode;//the root
var allRows = root.getElementsByTagName('tr');//the rows' collection
var cRow = allRows[num].cloneNode(true)//the clone of the 1st row
root.appendChild(cRow);//appends the cloned row as a new row

}
function remove(rows,num,id)
{

xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
	  alert ("Your browser does not support AJAX!");
	  return;
  }
var url="/kidoons/twitter/new/remove?id="+id;
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
var contentType = "application/x-www-form-urlencoded; charset=UTF-8";
xmlhttp.setRequestHeader("Content-type", contentType);
xmlhttp.setRequestHeader("Content-length",id.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(null);

var _row = rows.parentElement.parentElement;
document.getElementById('result_table').deleteRow(_row.rowIndex);

}


function stateChanged()
{
if (xmlhttp.readyState==4)
 {
if (xmlhttp.status == 200) {
	console.log(xmlhttp.responseText);		  
 } else {
	alert('There was a problem with the request.');
 }
 }
}

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
 {
 // code for IE7+, Firefox, Chrome, Opera, Safari
 return new XMLHttpRequest();
 }
if (window.ActiveXObject)
 {
 // code for IE6, IE5
 return new ActiveXObject("Microsoft.XMLHTTP");
 }
return null;
}
</script>
{/literal}


<div id="navigation"><a href="/kidoons/twitter/new/add/">Add a new twitt </a> --
<a href="/kidoons/twitter/new">Saved twitt overview</a>--
</div>

<br />
<br />
<div id="overview_container">


<table width=90% id="result_table">
<tr>
<th width=5%>Frequency</th><th width=10%>Date</th><th width=5%>Time</th><th width=5%>Type</th><th width=65%>Message</th><th width=5%>Active</th><th width=5%>Edit</th><th width=5%>Duplicate</th><th width=5%>Retwit</th><th>Del</th>
</tr>

{foreach from=$show key=myId item=i}
{if $i.isDel eq 0}
{$row_count++}

<tr>
<td>{$i.frequency}</td>


{if $i.frequency eq unique}
<td>On the {$i.specific_day} {$i.specific_month} {$i.specific_year}</td>
<td>At {$i.specific_hour}:{$i.specific_minut}</td>
{/if}

{if $i.frequency eq daily}
<td>Every {$i.day_week}</td>
<td>At {$i.specific_hour}:{$i.specific_minut}</td>
{/if}

{if $i.frequency eq weekly}
<td>Every {$i.day_week} of each week</td>
<td>At {$i.specific_hour}:{$i.specific_minut}</td>
{/if}

{if $i.frequency eq monthly}
<td>Every {$i.specific_day} of each month</td>
<td>At {$i.specific_hour}:{$i.specific_minut}</td>
{/if}

{if $i.frequency eq yearly}
<td>Every {$i.specific_day} of {$i.specific_month}</td>
<td>At {$i.specific_hour}:{$i.specific_minut}</td>
{/if}

<td>{$i.type_stuff}</td>
<td>{$i.twit_message} <a href="{$i.link}">later</a></td>

{if $i.activateornot==0}
<td>No</td>
{/if}

{if $i.activateornot==1}
<td>Yes</td>
{/if}

<td><input type="submit" value="edit"/></td>

<td><input type="submit" value="duplicate" onclick="duplicate(this.parentNode.parentNode,{$row_count},{$myId})"/></td>

<td><input type="submit" value="retwit" /></td>

<td><input type="submit" value="Del" onclick="remove(this,{$row_count},{$myId})"/></td>

</tr> 

{/if}


{/foreach}

</table>



</div>

[Yangzebul]

Bah c'est normal vu que tu met l'index en statique dans ton AttributeNode que tu duplique.

Essaye plutôt de na pas utiliser du tout d'index et de retrouver ta row juste avec le target contenu dans l'évènement que tu lèves.

Cela te permettra de ne pas avoir ce genre de problème et de déléguer tes évènements au niveau de ton tableau plutôt qu'au niveau de chaque ligne (1 seul évènement au lieu de n).

https://developer.mozilla.org/En/DOM/Node.removeChild

[Shtong]

Juste un truc en passant avant de parler du DOM : à moins de vraiment ne pas avoir le choix, enlève tous ces attributs de taille dans ton tableau (du genre width=10%). D'une part parce qu'il ne sont plus supportés dans la dernière version de HTML, et un peu aussi parce que tu n'a pas mis de guillemets autour de la valeur (il faut TOUJOURS en mettre).

Bref, pour ce qui est du DOM il s'agit en pratique d'un ensemble de propriétés et de méthodes que tu vas retrouver dans toutes les variables javascript qui contiennent un morceau de HTML (que tu récupère par exemple avec getElementById), et qui te permettent de parcourir l'arbre HTML c'est à dire d'aller chercher le tag suivant, précedent, parent ou enfants, ou de modifier cet arbre (ajouter ou supprimer des tags).

Tu trouveras une liste complète des possibilités de DOM ici

Prenons un arbre HTML simple :

<table>
 <tr>
   <td>Valeur 1</td>
   <td><a href="#">Supprimer</a></td>
 </tr>
 <tr>
   <td>Valeur 2</td>
   <td><a href="#">Supprimer</a></td>
 </tr>
</table>

Donc tu veux supprimer une ligne quand le type clique sur le lien supprimer. Lors de l'évenement du clic, tu obtiendra le lien qui a été cliqué dans les propriétés de l'évènement. A partir de ce lien, tu vas utiliser DOM pour parcourir l'arbre HTML et désigner les tags à supprimer :

1. Tu as ton point de départ (le lien) : lien = e.target

2. Tu prends son parent, la balise td qui le contient : td = lien.parentNode

3. Tu prends le parent du td, le tr. C'est lui qu'il faut supprimer : tr = td.parentNode

4. Tu prends la table, et tu appelles sur celle-ci la méthode pour supprimer le tr : table = tr.parentNode puis table.removeChild(tr);

On peut faire plus concis mais la j'ai bien décomposé pour l'exemple.

Si tu as bien compris le délire tu auras déduit que tu peux aussi te baser sur un numéro de ligne comme tu le fais plus haut plutôt que sur le lien cliqué :

function supprimeLigne(rowIndex)
{
 table = document.getElementById("monTableau");
 table.removeChild(table.getElementsByTagName("tr")[rowIndex]);
}

On récupère la table contenant la ligne à supprimer, on récupère la liste de tous les tr qu'elle contient, et on supprime le Xème.

Ah oui autre note : n'utilise pas parentElement (pas standard), remplace le par parentNode qui sera supporté partout. Et je ne sais pas où tu as trouvé ta fonction deleteRow je l'ai jamais croisée donc je ne sais pas si elle marche à tous les coups.

Ca va être le même principe pour l'édition, à ceci près qu'au lieu de supprimer une ligne tu vas remplacer le texte des cellules par des champs modifiables.

[Eagle1]

merci pour vos reponses ! j'ai compris maintenant comment fonctionne le dom j'ai reussi a faire des trucs correctes

petite question ajax : dans mon fichier serveur php je retourne mes variables. comment je les recupere dans javacsript ?

[Yangzebul]

Avec les propriétés "ResponseText" ou "ResponseXML" de l'objet retourné en argument de ton callback.

[Eagle1]

ca je le fais oui.

mon probleme c'est que si dans mon fichier php je fais echo, je vois les donnees dans mon xmlhttp.responseText

par contre je voudrai obtenir des variables dans mon javascript.par exemple je return un array, mon esponsetext est vide...

[Shtong]

Attention hein : tu ne peux véhiculer QUE du texte pur. Du coup ton tableau il faut que tu le transforme en texte.

Sinon tu as des librairies qui font le travail à ta place : par exemple l'encodeur JSON de php, qui transforme ton tableau en texte spécialement formatté, que tu peux ensuite envoyer à ta page web et une fois coté javascript tu utilises la fonction eval(responseText) qui va te re-transformer le texte en tableau ou objet.

[Yangzebul]

Attention hein : tu ne peux véhiculer QUE du texte pur. Du coup ton tableau il faut que tu le transforme en texte.

Sinon tu as des librairies qui font le travail à ta place : par exemple l'encodeur JSON de php, qui transforme ton tableau en texte spécialement formatté, que tu peux ensuite envoyer à ta page web et une fois coté javascript tu utilises la fonction eval(responseText) l'API JSON qui va te re-transformer le texte en tableau ou objet.

fixed

Eval is evil (et potentiellement une faille XSS aussi) : http://json.org/

PS : je te conseille json2.js, l'original qui a été normalisé et inclut en natif dans les navigateurs récents (IE8, Fx3, etc).

[Eagle1]

une question a la con qui a rien avoir avec le sujet mais je vouali pas en cree pour ca

ca fait 3 heure que je code et je bloque sur un truc, alors avant d'aller me coucher :

le formulaire

<div class="verif_user">
<FORM action="verif_user.php" method="POST">
<P>
<LABEL for="firstname">pseudo: </LABEL>
		  <INPUT type="text" name="pseudo" id="pseudo"><BR>
<LABEL for="lastname">Last name: </LABEL>
		  <INPUT type="password" name="passwd"><BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">
</P>
</FORM>
</div>

le php :

<?php

if(!isset($_POST['pseudo']))
{
include_once('form_verif.html');
echo "ohoh";
}

quoique je fasse le !isset est vrai et me remet le form...

je suis trop grave ou il ya un souci plus grave ?