JQuery récupérer id parent

Maljuna Kris · 26-10-2012 14:16:57

Bon, résumé de la situation.

Comme je n'arrive pas à récupérer dans jQuery le nom de la table de BD qui devenait l'id de la <table> HTML où elle est censée s'afficher, je réplique ce nom dans l'attributs alt des <tr> du <tbody>.
De cette façon j'arrive à le récupérer pour les traitements AJAX (INSERT, UPDATE, DELETE), l'id de la ligne est l'attribut id de chaque <tr> du <tbody>.
Mais je ne parviens pas à faire fonctionner le plugin tabscroll dans la page générée par PHP.
Par contre, si je récupère le source HTML généré en y insérant quelques <tr>, là, le plugin opère bien, mais si, et seulement si, il y a déjà des <tr> dans le <tbody> au chargement de la page. Et encore faut-il que la hauteur déclarée du <tbody>

  $('#agents').tableScroll({height:350,width:550});

soit au plus égale à 340, sinon le scroll ne se fait pas.

Il y a de quoi se lamenter, alors je me lamente.

Pierrot · 26-10-2012 15:57:48

mon pti MK, je te conseil le plugin jqgrid
il fait tout ce dont tu as besoin

a++

Maljuna Kris · 26-10-2012 17:44:07

Ouh la ! Sacré bestiau !
Ce site de démo est assez bluffant, je dois dire.
Bon, bah y-a plus qu'à ...
Merci mon Pierrot, je te tiens au courant.

Pierrot · 26-10-2012 18:12:34

n'hésite pas à me demander conseil
c'est ce bestiau que j'utilise
c'est top
a++

Pierrot · 26-10-2012 18:20:44

voila ce que l'on peut faire :
voila ce que l'on peu faire

çà pète

a++

Maljuna Kris · 26-10-2012 23:11:20

Comme je te l'ai dit dans le coin des modos, j'hésite :
Voilà ce que j'obtiens avec le source récupéré de la génération de PHP (dans Firebug, onglet réseau, sous-onglet réponse, j'ai juste ajouté les <tr> en copiant collant à partir de la réponse de getStructure.php dans Firebug) et qui correspond ce à quoi je veux aboutir :

Mais voilà le rendu directement en provenance du serveur :

Et j'ai beau insérer des lignes l'ascenseur n'apparaît jamais.
En outre les entêtes des colonnes sont tout décalés.
Je ne comprends pas, c'est le même code.

Maljuna Kris · 28-10-2012 05:22:39

Première comparaison entre ce que pro-im-pose jQGrid et ce que j'essaye d'extrapoler du chapitre 12 : Exemple d'application utilisant jQuery, Ajax et PHP du livre jQuery 1.7 & jQuery UI (Eyrolles 2° édition) Une bibliothèque pour Javascript d'Éric Sarrion.

L'exemple consiste à gérer dynamiquement une liste de clients dans une seule page HTML. Un client est représenté par un nom, un prénom et un numéro de téléphone. Dès que l'un de ces éléments est modifié à l'écran, une requête Ajax est envoyé au serveur pour que la table clients de la base de données soit mise à jour.
Un bouton Insérer une ligne permet d'ajouter une ligne vierge permettant de saisir les données du nouveau client. En queue, à droite, de chaque ligne figure un bouton Supprimer permettant de supprimer le client de la table de la base de données.
Cinématique de l'application
Au départ, la table clients est vide, à l'écran s'affiche donc uniquement les entêtes des colonnes et le bouton Insérer une ligne.
A l'insertion d'une nouvelle ligne le curseur est positionné directement dans le premier champ de saisie nom.
Les champs de toutes les lignes affichées peuvent être modifiés dynamiquement. Aucun bouton de modification n'est requis, car c'est le fait de quitter le champ de saisie qui provoque la sauvegarde dynamique de la ligne.
L'action sur un bouton Supprimer occasionne la suppression de la ligne à l'écran et dans la table de la base de données.
Lors du rechargement de la page HTML, la liste des clients se ré-affiche telle qu'elle est dans la table de la base de données.

Les différences entre cet exemple et ce que je cherche à en faire :

-. La page contient 8 <div> qui s'affichent dans des onglets gérés par jQuery UI,
-. Chacune de ces <div> permet(-tra) de gérer dynamiquement une des 8 tables de nomenclatures de l'application,
-. Je souhaite que le <tbody> de chacune des <table> soit scrollé au-delà d'une dizaine de lignes, pour ce faire j'essaye d'y incorporer le plugin jQuery tablescroll,
-. Je souhaite que tous les champs de type date fassent appel au datepicker de jQuery UI, (le problème, pour l'instant, réside dans le fait que quand on clique sur un champ de type date d'une autre ligne que la première, le calendrier s'affiche bien au bon endroit, sous le champ, mais c'est toujours le champ équivalent de la première ligne de la table qui est impacté, dommage !),
-. Certains champs résultent d'une sélection dans une liste restreinte ou issue d'une autre table de nomenclature,
-. Certains champs correspondent à des colonnes dans les table de la base de données auxquelles sont éventuellement appliquées des contraintes (NOT NULL ou DEFAULT, par exemple),
-. Bien entendu, c'est le même code PHP, qui génère les <table> en fonction de la structure de la table de base de données représentée,
-. Bien sûr c'est le même code Javascript (jQuerysé) et PHP invoqué par Ajax qui assure les INSERT, UPDATE, DELETE et SELECT en fonction de la table concernée,
-. Évidemment j'essaye de conserver tout cela dans une approche MVC.

On voit que JQGrid prend en charge très proprement l'aspect scroll et ajoute des outils de navigation, voire de recherche, qui pourraient ne pas s'avérer inutiles.

J'aime moins le recours à une popup pour l'édition des lignes (ajout, modif, suppression), les utilisateurs actuels étant habitués à gérer tout cela dans des feuilles de tableurs, l'édition en ligne fait partie du cahier des charges.

Y rencontrera-ton les mêmes difficultés pour y interfacer les champs de type date avec datepicker de jQuery UI ?

Quid des champs à choix multiples ?

Je vois mal comment faire rapidement la synthèse de tout cela avec jQGrid, d'où ma valse hésitation. D'autant que je me rends compte combien tout ce petit monde jQuery est éminemment évolutif et combien ça devient vite la pagaille pour s'y retrouver parmi la foultitude des paramètres, feuilles de style et/ou méthodes (pas toujours explicitement documentés) auxquelles viennent systématiquement s'agréger ceux de jQuery UI et de chacun de ses plugins.

De toutes façons, je vais faire une pause jusqu'à mardi. J'ai ma pelouse à tondre, mes abeilles à nourrir, la belle-mère et sa Dame 4in de fille à promener.
Bref, du taf. Et je n'ai toujours pas reçu l'immatriculation de ma SKYTEAM DAX 125, donc toujours pas de plaque et toujours pas d'assurance. Faut que je m'occupe de relancer tout cela dès lundi.

La vie de retraité, un enfer d'hyper-activité !

Pierrot · 28-10-2012 10:51:29

>>Au départ, la table clients est vide, à l'écran s'affiche donc uniquement les entêtes des colonnes et le bouton Insérer une ligne.
automatique avec jqgrid
>>A l'insertion d'une nouvelle ligne le curseur est positionné directement dans le premier champ de saisie nom.
automatique avec jqgrid
>>Les champs de toutes les lignes affichées peuvent être modifiés dynamiquement. Aucun bouton de modification n'est requis, car c'est le fait de quitter le champ de saisie qui provoque la sauvegarde dynamique de la ligne.
automatique avec jqgrid
>>L'action sur un bouton Supprimer occasionne la suppression de la ligne à l'écran et dans la table de la base de données.
automatique avec jqgrid
>>Lors du rechargement de la page HTML, la liste des clients se ré-affiche telle qu'elle est dans la table de la base de données.
automatique avec jqgrid

vé aller faire un tour en Bretagne moi :D
tu m'invites ?? :D
a++

Maljuna Kris · 28-10-2012 13:35:26

Bon, l'édition dans une pop-up semble ne plus soulever une opposition aussi farouche que jusqu'alors.

Mais je ne remettrai probablement pas le nez dans cette affaire avant mercredi.

Là je suis en pause déjeuner.

@pluche

Pierrot a écrit :

vé aller faire un tour en Bretagne moi :D
tu m'invites ?? :D
a++

C'est pas déjà fait ?

Tu sais que tu viens quand tu veux, ici, au moins, il ne neige pas.

Ceci dit, Marckolsheim->Plomodiern on doit friser les 1000 bornes, non ?

Et puis, Marckolsheim, ce n'est pas là qu'il y a une centrale électrique ? T'es pas irradié au moins ? Ah non c'est vrai, c'est de la houille blanche chez toi, c'est à Fessenheim que c'est tout pourri.

Bon, bah bon voyage, alors.

Maljuna Kris · 29-10-2012 07:53:54

Bon, je viens de me télécharger la doc et les spécifications de jQGrid, (127 pages tout de même).
RDV après la lecture.

Maljuna Kris · 29-10-2012 09:51:28

Première lacune, comment interfacer une cellule d'un tableau en mode édition 'inline' avec UI DatePicker.
La doc est carrément muette à ce sujet, se contentant de mettre un titre : UI DatePicker et un paragraphe vide (en haut de la page 66).
Heureusement, en demandant à l'ami Gxxxxe : "jQuery UI Datepicker & jQgrid" on obtient quelques réponses explicites dont celle-ci :Problem with JQuery datepicker inside jqGrid.
Je poursuis ma découverte.

Pierrot · 29-10-2012 11:21:14

function pickdatesProchainContact(id){
$("#"+id+"_date_prochain_contact","#"+tablelisteevenements).
datepicker({dateFormat:"yy-mm-dd"});
}

.navButtonAdd('#'+pagerlistevenement,
{caption:"",
buttonicon:"ui-icon-pencil",
title:"",
cursor: "pointer",
onClickButton: function(rowid){
var id = jqgridevenement.jqGrid('getGridParam','selrow');
if(id){
jqgridevenement.
jqGrid('restoreRow',lastsel3);
jqgridevenement.
jqGrid('editRow',id,true,pickdatesProchainContact);/<--ici
lastsel3=id;
}
}
})

Quand tu demande l’édition de la ligne, tu appel la fonction qui applique de datepicker.

a++

Maljuna Kris · 29-10-2012 14:57:49

Merci Pierrot.
Juste une précision, dans le cas d'une nouvelle ligne (futur INSERT) il n'y a pas encore d'id dans la BD, donc que passer en argument à la méthode pickdatesProchainContact(id) ?

Pierrot · 29-10-2012 17:57:28

dans ce cas, tu met un id a zéro ou -1

a++

Maljuna Kris · 30-10-2012 11:01:09

Pierrot a écrit :

dans ce cas, tu met un id a zéro ou -1

Ça sera plutôt 0 car je ne sais pas trop les effets que pourraient inférer des ids du genre '-1nom'.
Je pensais effectivement à quelque chose comme ça, Merci.

Sinon, les options seront parfois (souvent) identiques pour tous les grids, je pense à datefmt:"yyyy-mm-dd", hidegrid:false, height:230, loadtext:"traitement en cours", loadui:block | enable | disable, mtype:"POST", scroll:true, toolbar{true,"bottom"}, usw;
Si j'ai bien compris il suffit de faire

$.jgrid.default({datefmt:"yyyy-mm-dd", hidegrid:false, height:230,

 loadtext:"traitement en cours", loadui:block, mtype:"POST", scroll:true, toolbar{true,"bottom"});

Par ailleurs l'option url, définit le script (PHP ici) qu'invoquera AJAX pour récupérer les données auprès du SGBD dans un format XML, ça, ça semble clair.
Mais je n'ai pas encore bien saisi comment se gèrera la mise à jour (INSERT-UPDATE-DELETE), à quel(s) évènement(s) on doit raccorder ces appels AJAX et sous quel format les données sont transmises à PHP.
D'autant que je tiens à conserver le polymorphisme initial.

CM-709-HV, c'est, enfin, l'immatriculation de mon SKYTEAM DAX 125. Ouf !

Pierrot · 30-10-2012 11:11:19

pour update et delete c'est :

editurl : 'lescript.php'

de plus, je te conseil pluto de travailler en JSON plutôt que XML

a++

Maljuna Kris · 30-10-2012 11:35:19

Pierrot a écrit :

pour update et delete c'est :
editurl : 'lescript.php'
De plus, je te conseille de travailler en JSON plutôt qu'en XML

Ok, Merci pour editurl, je l'avais zappé celui-là.
C'est du XML par défaut, donc il faut modifier l'option datatype:json et sinon le jsonReader type

jsonReader : { root: "rows",

               page: "page", 

               total: "total", 

               records: "records", 

               repeatitems: true, 

               cell: "cell",

               id: "id",

               userdata: "userdata"

               }

c'est lui qui le génère pour les (INSERT/UPDATE) ?
Où y trouve-t-on le nom de la page ?
Il faut le passer en GET dans (editurl : 'lescript.php?page='+page) ?
Là, on n'est plus vraiment dans le polymorphisme.

Pour les DELETE on a juste besoin du nom de la table et de l'id de la ligne.

Quels sont les avantages du JSON par rapport au XML ?

Pierrot · 30-10-2012 14:41:39

la datatype:json suffit

a++

Pierrot · 30-10-2012 14:50:20

fichier généric update_table.php

<?php

require_once('init.php');
$path = getcwd().DIRECTORY_SEPARATOR;
$id = isset($_POST['id']) ? $_POST['id'] : 0;
$oper = isset($_POST['oper']) ? $_POST['oper'] : '';
if ($oper > '') unset($_POST['oper']);
unset($_POST['id']);
$fields = array();
$table = isset($_GET['table']) ? $_GET['table'] : '';
unset($_GET['table']);
$pretraitement = isset($_GET['pretraitement']) ? $path.$_GET['pretraitement'].'.php' : '';
$posttraitement = isset($_GET['posttraitement']) ? $path.$_GET['posttraitement'].'.php' : '';
unset($_GET['pretraitement']);
unset($_GET['posttraitement']);

$result = array_merge($_POST, $_GET);

if( $pretraitement>'' && file_exists($pretraitement)){
include_once($path.$pretraitement);
}

if ($oper == 'del') {
try{
$stmnt = "DELETE FROM $table WHERE id=$id";
$count = $connexion->exec($stmnt);
}
catch (Exception $exc) {
$msgerr .= $exc->getMessage();
}
} else {
foreach ($result as $key => $value) {
array_push($fields, "$key = '" . addslashes($value) . "'");
}
$fields_str = join($fields, ', ');
if ($id >= 0) {
try {
$stmnt = "UPDATE $table SET $fields_str WHERE id = $id";
$count = $connexion->exec($stmnt);
} catch (Exception $exc) {
$msgerr .= $exc->getMessage();
}
}
// Si on recoit -1 dans record_id alors c'est une insertion
else {
try {
$stmnt = "INSERT INTO $table SET $fields_str";
$count = $connexion->exec($stmnt);
$id = $connexion->lastInsertId();
} catch (Exception $exc) {
$msgerr .= $exc->getMessage();
}
}
}

$ar = array();
if( $posttraitement > '' && file_exists($posttraitement)){
include_once($posttraitement);
}

$ar['msgerr']=$msgerr;
$ar['path']=$path;
$ar['sql']=$stmnt;
$ar['id']=$id;
echo json_encode($ar);
?>

voila un editurl standart

dans init.php tu fait une connection mysql ($connexion) et se renseigne comme ca :

editurl : 'update_table.php?table=unetable&pretraitement=lenomduficherquiferalepretraitemtsansextension&posttraitement=lenomduficherquiferaleposttraitemtsansextension'

pretraitement et posttraitement son facultatif, seul table est obligatoire.

en retour

msgerr : je comment pas
id : l'id qui a été inseré ou modifié
sql : la requete générée et utilisée pour faire le traitement.

ce script passe dans 100% des cas, tu peux même l'utiliser tel quel

je l'utilise aussi pour mes formulaires et tel quel.

a++

Maljuna Kris · 30-10-2012 17:22:15

Merci mon Pierrot,

En résumé l'id est transmise en POST['id'] et le type d'action SQL (UPDATE, INSERT ou DELETE) en POST['oper'] et les valeurs éventuelles des colonnes en JSON ?

Parce que ce $result = array_merge($_POST, $_GET) me semble assez rock'n roll !
Bon, je vois bien que tu fais le ménage un peu avant avec 4 unset, mais pourquoi ce ramasse-miettes ? Normalement avec l'option mtype on devrait savoir où sont les données, non ?

Et pourquoi qu'il s'emmerde à les passer dans un jsonReader si c'est pour finalement les balancer en POST (ou GET) à l'ancienne ?

Et que contiendra donc $ar['sql'], le code de la requête ?

Ouh là, MK, on se calme, ça fait beaucoup de questions, là !

Sinon, tu es d'accord que puisque le nom de la table est passé en GET dans editurl, on ne peut pas mettre editurl dans le $.jgrid.default({}) ?

Bon de toutes façons je me replongerais dans tout ça demain à Taulé.

Ça y est, j'ai fixé ma belle plaque toute neuve sur ma petite SKYTEAM DAX 125, je n'attends plus que le courriel de mon assureur.

Amike, MoKo.

Pierrot · 30-10-2012 18:19:40

>>Parce que ce $result = array_merge($_POST, $_GET) me semble assez rock'n roll !

pk ????

c'est un script générique

et preuve qu'il est très générique, puisque qu'il fonctionne avec jqgrid et avec mes formulaires.

il fonctionne en total transparence, mais rien ne t’empêche de passer des param supplementaire.

par $_GET par exemple.

>>Et pourquoi qu'il s'emmerde à les passer dans un jsonReader si c'est pour finalement les balancer en POST (ou GET) à l'ancienne ?

là, je te donne la permission de réfléchir

et te casse pas la gueule avec ta super moto

a++

PHP|Débutant :: Forums

Advertisement

#26 26-10-2012 14:16:57

Re : JQuery récupérer id parent

#27 26-10-2012 15:57:48

Re : JQuery récupérer id parent

#28 26-10-2012 17:44:07

Re : JQuery récupérer id parent

#29 26-10-2012 18:12:34

Re : JQuery récupérer id parent

#30 26-10-2012 18:20:44

Re : JQuery récupérer id parent

#31 26-10-2012 23:11:20

Re : JQuery récupérer id parent

#32 28-10-2012 05:22:39

Re : JQuery récupérer id parent

#33 28-10-2012 10:51:29

Re : JQuery récupérer id parent

#34 28-10-2012 13:35:26

Re : JQuery récupérer id parent

#35 29-10-2012 07:53:54

Re : JQuery récupérer id parent

#36 29-10-2012 09:51:28

Re : JQuery récupérer id parent

#37 29-10-2012 11:21:14

Re : JQuery récupérer id parent

#38 29-10-2012 14:57:49

Re : JQuery récupérer id parent

#39 29-10-2012 17:57:28

Re : JQuery récupérer id parent

#40 30-10-2012 11:01:09

Re : JQuery récupérer id parent

#41 30-10-2012 11:11:19

Re : JQuery récupérer id parent

#42 30-10-2012 11:35:19

Re : JQuery récupérer id parent

#43 30-10-2012 14:41:39

Re : JQuery récupérer id parent

#44 30-10-2012 14:50:20

Re : JQuery récupérer id parent

#45 30-10-2012 17:22:15

Re : JQuery récupérer id parent

#46 30-10-2012 18:19:40

Re : JQuery récupérer id parent

Pied de page des forums