Plugin Jquery Footable - Edition de ligne

**JujuPomme** · 12/05/2016, 09h59

Bonjour à tous,

J'utilise le plugin jquery footable (http://fooplugins.com/plugins/footable-jquery/) pour réaliser un tableau dans lequel j'inscris des interlocuteurs (personnes) avec tout un tas d'informations, Nom, prénom, téléphone, mail, etc...

J'en suis au point ou, il est pleinement responsive, les fonctions de tri marchent, de recherches également. Mais l'édition de ligne non...

Tout d'abord, voici le code en question :

Le 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
$(document).ready(function() {

	var $modal = $('#editor-modal'),
	$editor = $('#editor'),
	$editorTitle = $('#editor-title'),
	ft = FooTable.init('#editing-example', {
		"sorting": { "enabled": true },
		columns: $.get('columns.json'),
		rows: $.get('test.json'),
		editing: {
			"addText": "Ajouter un nouvel interlocuteur",
			enabled: true,
			addRow: function(){
				$modal.removeData('row');
				$editor[0].reset();
				$editorTitle.text('Ajouter un nouvel interlocuteur');
				$modal.modal('show');
			},
			editRow: function(row){
				var values = row.val();
				$editor.find('#id').val(values.id);
				$editor.find('#firstName').val(values.firstName);
				$editor.find('#lastName').val(values.lastName);
				$editor.find('#jobTitle').val(values.jobTitle);
				$editor.find('#startedOn').val(values.startedOn);
				$editor.find('#dob').val(values.dob);

				$modal.data('row', row);
				$editorTitle.text('Modifier #' + values.id);
				$modal.modal('show');
			},
			deleteRow: function(row){
				if (confirm('Voulez-vous vraiment supprimer cet interlocuteur?')){
					row.delete();
				}
			}
		}
	}),
	uid = 10;

$editor.on('submit', function(e){
	if (this.checkValidity && !this.checkValidity()) return;
	e.preventDefault();
	var row = $modal.data('row'),
		values = {
			id: $editor.find('#id').val(),
			firstName: $editor.find('#firstName').val(),
			lastName: $editor.find('#lastName').val(),
			jobTitle: $editor.find('#jobTitle').val(),
			startedOn: moment($editor.find('#startedOn').val(), 'YYYY-MM-DD'),
			dob: moment($editor.find('#dob').val(), 'YYYY-MM-DD')
		};

	if (row instanceof FooTable.Row){
		row.val(values);
	} else {
		values.id = uid++;
		ft.rows.add(values);
	}
	$modal.modal('hide');
});
});

Le code en rouge est le code qui pose problème, que j'expliquerais plus tard.

L'html :

Code html :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Example</title>
 
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet">
	<!-- Prism -->
	<link href="footable.standalone.css" rel="stylesheet">
 
	<!-- FooTable Bootstrap CSS -->
	<link href="footable.core.css" rel="stylesheet">
 
	<!-- Custom styles for this template -->
	<link href="docs.css" rel="stylesheet">
 
	<script src="demo-rows.js"></script>
</head>
<body>
 
	<table id="editing-example" class="table" data-sort="true" data-editing-show-text='<span class="fooicon fooicon-pencil" aria-hidden="true"></span> Edit rows' data-editing="true" data-editing-always-show="true" data-editing-add-test="Ajouter un nouvel interlocuteur" data-filtering="true" data-editing-edit-text='<span class="fooicon fooicon-pencil" aria-hidden="true"></span>' data-paging="true"></table>
 
 
	<div class="modal fade" id="editor-modal" tabindex="-1" role="dialog" aria-labelledby="editor-title">
		<style scoped>
			/* provides a red astrix to denote required fields - this should be included in common stylesheet */
			.form-group.required .control-label:after {
				content:"*";
				color:red;
				margin-left: 4px;
			}
		</style>
		<div class="modal-dialog" role="document">
			<form class="modal-content form-horizontal" id="editor">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
					<h4 class="modal-title" id="editor-title">Ajouter un nouvel interlocuteur</h4>
				</div>
				<div class="modal-body">
					<input type="number" id="id" name="id" class="hidden"/>
					<div class="form-group required">
						<label for="firstName" class="col-sm-3 control-label">Nom</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required>
						</div>
					</div>
					<div class="form-group required">
						<label for="lastName" class="col-sm-3 control-label">Prénom</label>
						<div class="col-sm-9">
							<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required>
						</div>
					</div>
					<div class="form-group">
						<label for="jobTitle" class="col-sm-3 control-label">Téléphone</label>
						<div class="col-sm-9">
						<input type="text" class="form-control" id="jobTitle" name="jobTitle" placeholder="Job Title">
					</div>
					</div>
					<div class="form-group required">
						<label for="startedOn" class="col-sm-3 control-label">Portable</label>
						<div class="col-sm-9">
							<input type="date" class="form-control" id="startedOn" name="startedOn" placeholder="Started On" required>
						</div>
					</div>
					<div class="form-group">
						<label for="dob" class="col-sm-3 control-label">E-mail</label>
						<div class="col-sm-9">
							<input type="date" class="form-control" id="dob" name="dob" placeholder="Date of Birth">
						</div>
					</div>
					<div class="form-group">
						<label for="dob" class="col-sm-3 control-label">Fonction carte de visite</label>
						<div class="col-sm-9">
							<input type="date" class="form-control" id="dob" name="dob" placeholder="Date of Birth">
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary">Sauvegarder les changements</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
				</div>
			</form>
		</div>
	</div>
 
 
<script src="jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
  <script src="footable.js"></script>
<script src="prism.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
  <script src="footable.sort.js"></script>
  <script src="script_test.js" charset="utf-8"></script>
 
 </body>
</html>

Pour revenir dans le code en rouge, c'est le code venu de l'exemple donné. A la différence, c'est que dans l'exemple fourni, les données sont en local alors que pour ma part, j'exécute une requête AJAX et récupère le tout.
Du coup, vous l'auriez deviner, je ne peux pas retrouver mes éléments par ID puisque toutes les lignes sont générées automatiquement et après avoir jeté un coup d'oeil à l'HTML qui est généré, les lignes n'ont aucun ID, les cellules non plus...

Du coup, je ne sais pas de quelle manière récupérer mes données pour, au clic sur le bouton "Editer", avoir les informations pré-remplis de la ligne.

Si quelqu'un à déjà eu affaire à ça, où à éventuellement une idée...
Je tiens à dire que je n'ai pas de longues années de Javascript encore, et donc j'ai pu passer à côté d'une notion...

Merci à toute aide qui sera apportée

Bonne journée à tous !

**JujuPomme** · 12/05/2016, 10h01

C'est en postant mon code que j'ai trouvé mon erreur... J'ai repris la fenêtre d'édition tel quel de celle de l'exemple, sans changé les ID...

Je suis fatiguant parfois...

Désolé, j'espère au moins, que vous avez bien rigolé (au moins un peu

)

A une prochaine !!

**JujuPomme** · 12/05/2016, 16h43

(re)Bonjour à tous,

Je me permets de réouvrir le sujet pour un problème qui peut paraître simple, charger les données de mon tableau avec une requête AJAX.

Comme j'ai mis dans mon premier post, le code :

rows: $.get('test.json'),

Je chargeais ça en dur dans un fichier .json, que j'appellais ensuite. Tout marchait bien, pagination, édition, recherche...

Mais maintenant j'essaie de charger ça depuis un fichier .php ou j'exécute directement ma requête dedans, et rien, j'ai même plus les headers de mon tableau, plus rien ne s'affiche, sans un réel message d'erreur... aucun message d'erreur à vrai dire.

Voici le fichier php en question :

Code php :

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
<?php
 
	require '_inc_config.php';
 
 
 
	$dbh = new PDO('firebird:host=localhost;dbname=db;charset=UTF8', 'user', 'mdp');
 
	$dbh->exec("set names utf8");
	$contactId = 'uncontact';
 
	$_INTERLOCUTEURS_CHAMPS = "I.I_CODE as I_CODE,
								I.I_CODECONTACT as I_CODECONTACT,
								I.I_NOM as I_NOM,
								I.I_PRENOM as I_PRENOM,
								I.I_TEL1 as I_TEL1,
								I.I_TEL3 as I_TEL3,
								I.I_EMAIL as I_EMAIL,
								I.I_ADRESSE4 as I_ADRESSE4";
 
	// $sOrder = ' order by I.I_NOM, I.I_PRENOM';
 
	$sQuery = "select ".$_INTERLOCUTEURS_CHAMPS." from INTERLOCUTEUR I where I_CODECONTACT = '".StringTools::CleanInjectionFirebird(strtoupper(utf8_decode(trim($contactId))))."' and I.I_INACTIF = 'F' order by I.I_NOM, I.I_PRENOM";
 
 
 
	$sth = $dbh->prepare($sQuery);
	$sth->execute();
	$arr = array();
	while ($row = $sth->fetch(PDO::FETCH_ASSOC)) {
		$arr[] = $row;
	}
	$sth = $dbh->prepare($sQuery);
	$sth->execute();
	$nb = $sth->fetchAll();
	$count = count($nb);
	$arr = str_replace(" ", "", (json_encode(utf8_encode_recursive($arr))));
 
	echo($arr);
 
 
	function utf8_encode_recursive ($array) {
 
		$result = array();
		foreach ($array as $key => $value)
			{
				if (is_array($value))
				{
					$result[$key] = utf8_encode_recursive($value);
				}
				else if (is_string($value))
				{
					$result[$key] = utf8_encode($value);
				}
				else
				{
					$result[$key] = $value;
				}
			}
		return $result;
	}
 
?>

(Il peut y avoir des lignes un peu suspicieuse, qui sont là en cas de test ,j'ai peut-être oublié d'en enlever, mais ce fichier me retourne bien un JSON valide. A vrai dire, exactement le même que celui de test.json, mis à part qu'il n'est pas sur une seule ligne...)

Donc voilà, je sèche un peu pour le coup...

Merci à tout intérêt porté à mon post.

Bonne journée à tous !

Plugin Jquery Footable - Edition de ligne

jQuery

Vue hybride

Discussions similaires

Partager

Partager