Undefined variable ft ?

Version imprimable

Bonjour à tous,

Je me retrouve avec un undefined variable des plus mystiques. Tout d'abord, voici le code :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
$('a#interlocuteurs_id_unique').click( function() {
	
	var $modal = $('#editor-modal'),
	$editor = $('#editor'),
	$editorTitle = $('#editor-title'),
	//ft = FooTable.init('#editing-example', {
	ft = $("#interlocuteur_table").footable({
		columns: $.get('interlocuteur_table/columns.json'),
		rows: $.ajax({
			url :'interlocuteur_table/server_side_interlocuteur.php', 
			dataType: 'json',
			success: function(){
			}
		}),
		paging: {
			limit: 5,
			size: 10
		},
		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('#nom').val(values.I_NOM);
				$editor.find('#prenom').val(values.I_PRENOM);
				$editor.find('#telephone').val(values.I_TEL1);
				$editor.find('#portable').val(values.I_TEL3);
				$editor.find('#email').val(values.I_EMAIL);
				$editor.find('#fonction').val(values.I_ADRESSE4);
				$editor.find('#code').val(values.I_CODE);
				$modal.data('row', row);
				$editorTitle.text('Modifier ' + values.I_PRENOM + ' ' + values.I_NOM);
				$modal.modal('show');
				},
			deleteRow: function(row){
				var values = row.val();
				$.ajax({
					url: 'interlocuteur_table/delete_in_bdd.php',
					dataType: 'json',
					data: { code: values['I_CODE'] },
					success: function(data) {
						if (data.statut == 'OK') {
							if (confirm('Voulez-vous vraiment supprimer cet interlocuteur?')){
								row.delete();
								$("#delete_interlocuteur").html(data.message).show();
							}
						} else
							$("#delete_interlocuteur_fail").html(data.message).show();
					}
				});
				// mettre I_EMAIL dans I_COMMENTAIRE
				
			}
		}
	}).data("__FooTable__");
	
	//uid = 10;
	$editor.on('submit', function(e){
		if (this.checkValidity && !this.checkValidity()) 
			return;
		e.preventDefault();
		
		var row = $modal.data('row'),
			values = {
				I_TITRE: $editor.find('#interlocuteur_titre_id').val(),
				I_NOM: $editor.find('#nom').val(),
				I_PRENOM: $editor.find('#prenom').val(),
				I_TEL1: $editor.find('#telephone').val(),
				I_TEL3: $editor.find('#portable').val(),
				I_EMAIL: $editor.find('#email').val(),
				I_ADRESSE4: $editor.find('#fonction').val(),
				I_CODE: $editor.find('#code').val()
			};

		if (row instanceof FooTable.Row){
		// edit
			$.ajax({
				url: 'interlocuteur_table/update_in_bdd.php',
				dataType: 'json',
				data: { nom: values['I_NOM'], prenom: values['I_PRENOM'], telephone: values['I_TEL1'], portable: values['I_TEL3'], email: values['I_EMAIL'], fonction: values['I_ADRESSE4'], code: values['I_CODE']},
				success: function(data) {
					if (data.statut == 'OK'){
						$("#edit_interlocuteur").html(data.message).show();
					}else 
						$("#edit_interlocuteur_fail").html(data.message).show();
				}
			});
			row.val(values);
			
		} else {
			// add
			$.ajax({
				url: 'interlocuteur_table/insert_in_bdd.php',
				dataType: 'json',
				
				data: { titre: values['I_TITRE'], nom: values['I_NOM'], prenom: values['I_PRENOM'], telephone: values['I_TEL1'], portable: values['I_TEL3'], email: values['I_EMAIL'], fonction: values['I_ADRESSE4'] }
				/*success : function(data) {
					if (data.statut == 'OK')
						$("#ajout_interlocuteur").html(data.message).show();
					else
						$("ajout_interlocuteur_fail").html(data.message).show();
				}*/
			});
			$modal.modal('hide');
			ft.rows.add(values);
		}
		$modal.modal('hide');
	});
		$('.footable-edit').hide();
	$('.footable-delete').hide();

});

Vous y verrez trois couleurs dans le code.

Le code en rouge, est la ou est mon undefined variable.

Celui en vert, c'est le cas ou j'ai cette erreur, et en bleu, je ne l'ai plus. Du coup, si quelqu'un avait une explication à me fournir...

Merci en tout cas de m'avoir lu !

26/05/2016, 11h07
Invité

Bonjour,

FooTable ou Footable ?
26/05/2016, 11h09
JujuPomme

Bonjour Jreaux !

Non non, c'est bien footable pour initialiser ici mon tableau.
26/05/2016, 11h13
Invité

Code:

ft = FooTable.init('#editing-example', { // pas d'erreur

Code:

ft = $("#interlocuteur_table").footable({ // erreur

FooTable / footable
26/05/2016, 11h22
JujuPomme

Oui oui, j'en suis bien conscient. Mais la première ligne, c'est l'initialisation de la version 3.0.9. La deuxième étant celle de la 3.0.10
26/05/2016, 11h37
EddiGordo

C'est un problème de portée de variable, de "scope".
Ta variable ft est déclarée au sein de la fonction anonyme qui gère ton évènement click.
Tu veux y accéder dans la fonction anonyme qui gère ton évènement submit, or ce n'est pas le même scope et ta variable ft y est donc inconnue.
26/05/2016, 11h46
JujuPomme

Bonjour @eddiGordo !

Merci pour ton éclaircissement. J'ignorais qu'il y avait différents niveau d'accès de variable un peu comme en C++...

Tu as une idée pour que je puisse y accéder?

Tu peux essayer en déplaçant la déclaration de ta variable ft avant la pose de tes écouteurs.

Code:

1
2
3
4
5
6
7
8
9
 
var ft = $("#interlocuteur_table").footable({
		columns: $.get('interlocuteur_table/columns.json'),
		rows: $.ajax({
			url :'interlocuteur_table/server_side_interlocuteur.php', 
			dataType: 'json',
			success: function(){
			}
		});

Avant la ligne :

Code:

1
2
 
$('a#interlocuteurs_id_unique').click( function() {

26/05/2016, 12h09
JujuPomme

J'y avais bien pensé, le problème c'est que ça casse mon programme sachant que le but, est d'afficher ce tableau au clic sur un onglet (d'ou l'id #interlocuteur_id_unique). :/
26/05/2016, 13h07
Invité

A priori, il faut juste déclarer la variable en dehors.

Code:

var ft;

Le reste au click.

N.B. Par contre, je mettrais un nom de variable plus spécifique et "unique", car les variables globales sont, par définition, accessibles par tous les scripts
(donc s'il existe déjà un autre script utilisant une variable "ft", ça risuqe de poser des problèmes...)
26/05/2016, 14h20
JujuPomme

Aussi étonnant soit-il, j'ai également essayé cette solution, mais ma variable reste undefined...
26/05/2016, 14h31
EddiGordo
Ta déclaration, à l'intérieure de ta fonction 'click', est dans un var qui initialise plusieurs variables, ce faisant, tu crées une nouvelle variable ft dans ce scope précis.
Il faut que tu sortes la déclaration de ta variable de ta liste de var.

Pour prendre un exemple, actuellement tu as qq chose du genre :
Code:

1 2 3 4 5 6 var a = 12, b = 7, c = 237, ft = 'ma variable', d = 3;
alors qu'il te faudrait :
Code:

1 2 3 4 5 6 7 var a = 12, b = 7, c = 237, d = 3; ft = 'ma variable';
En conservant la déclaration

Code:

var ft;

en amont, à l'extérieur.

J'ai fais quelque chose comme ça ::

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
var ft;
 
$('a#interlocuteurs_id_unique').click( function() {
 
	var $modal = $('#editor-modal'),
	$editor = $('#editor'),
	$editorTitle = $('#editor-title');
	//ft = FooTable.init('#interlocuteur_table', {
	ft = $("#interlocuteur_table").footable({
		columns: $.get('interlocuteur_table/columns.json'),
		"sorting": { "enabled": true },
		rows: $.ajax({
			url :'interlocuteur_table/server_side_interlocuteur.php', 
			dataType: 'json',
			success: function(){
			}
		}),
		paging: {
			limit: 5,
			size: 10
		},
		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('#interlocuteur_titre_id').val(values.I_TITRE);
				$editor.find('#nom').val(values.I_NOM);
				$editor.find('#prenom').val(values.I_PRENOM);
				$editor.find('#telephone').val(values.I_TEL1);
				$editor.find('#portable').val(values.I_TEL3);
				$editor.find('#email').val(values.I_EMAIL);
				$editor.find('#fonction').val(values.I_ADRESSE4);
				$editor.find('#code').val(values.I_CODE);
				$modal.data('row', row);
				$editorTitle.text('Modifier ' + values.I_PRENOM + ' ' + values.I_NOM);
				$modal.modal('show');
				},
			deleteRow: function(row){
				var values = row.val();
				$.ajax({
					url: 'interlocuteur_table/delete_in_bdd.php',
					dataType: 'json',
					data: { code: values['I_CODE'] },
					success: function(data) {
						if (data.statut == 'OK') {
							if (confirm('Voulez-vous vraiment supprimer cet interlocuteur?')){
								row.delete();
								$("#delete_interlocuteur").html(data.message).show();
							}
						} else
							$("#delete_interlocuteur_fail").html(data.message).show();
					}
				});
				// mettre I_EMAIL dans I_COMMENTAIRE
			}
		}
	}).data("__FooTable__");
 
	$('#interlocuteur_table').footable().on('click', function(row) {
		alert($('tbody').val(row.I_NOM).text());
	});
	//uid = 10;
	$editor.on('submit', function(e){
		if (this.checkValidity && !this.checkValidity()) 
			return;
		e.preventDefault();
 
		var row = $modal.data('row'),
			values = {
				I_TITRE: $editor.find('#interlocuteur_titre_id').val(),
				I_NOM: $editor.find('#nom').val(),
				I_PRENOM: $editor.find('#prenom').val(),
				I_TEL1: $editor.find('#telephone').val(),
				I_TEL3: $editor.find('#portable').val(),
				I_EMAIL: $editor.find('#email').val(),
				I_ADRESSE4: $editor.find('#fonction').val(),
				I_CODE: $editor.find('#code').val()
			};
 
		if (row instanceof FooTable.Row){
		// edit
			$.ajax({
				url: 'interlocuteur_table/update_in_bdd.php',
				dataType: 'json',
				data: { nom: values['I_NOM'], prenom: values['I_PRENOM'], telephone: values['I_TEL1'], portable: values['I_TEL3'], email: values['I_EMAIL'], fonction: values['I_ADRESSE4'], code: values['I_CODE']},
				success: function(data) {
					if (data.statut == 'OK'){
						$("#edit_interlocuteur").html(data.message).show();
					}else 
						$("#edit_interlocuteur_fail").html(data.message).show();
				}
			});
			row.val(values);
 
		} else {
			// add
			$.ajax({
				url: 'interlocuteur_table/insert_in_bdd.php',
				dataType: 'json',
 
				data: { titre: values['I_TITRE'], nom: values['I_NOM'], prenom: values['I_PRENOM'], telephone: values['I_TEL1'], portable: values['I_TEL3'], email: values['I_EMAIL'], fonction: values['I_ADRESSE4'] }
				/*success : function(data) {
					if (data.statut == 'OK')
						$("#ajout_interlocuteur").html(data.message).show();
					else
						$("ajout_interlocuteur_fail").html(data.message).show();
				}*/
			});
			$modal.modal('hide');
			ft.rows.add(values);
		}
		$modal.modal('hide');
	});
 
	$('.footable-edit').hide();
	$('.footable-delete').hide();
 
});

Le résultat étant le même..

26/05/2016, 15h06
EddiGordo

Ca devrait pourtant coller.

Excuse-moi mais je ne comprends pas trop ton code en fait...
Tel que je le lis, ta variable ft ne peut-être renseignée que si tu as cliqué au moins une fois sur "a#interlocuteurs_id_unique"
A partir de ce constat, si on submit sans avoir cliqué au préalable, ft est bel et bien "undefined"

Ou alors j'ai raté un épisode ?
26/05/2016, 15h11
JujuPomme

C'est à peu près ça.

Le fonctionnement est celui qui suit :
- L'utilisateur fait une recherche, qui, lorsqu'il a trouvé son bonheur, lui affiche un menu avec différents onglets.
- Quand il clique sur interlocuteur (donc l'id interlocuteur_id_unique), un tableau s'affiche (sous la variable ft donc).
- Il à la possibilité d'ajouter un interlocuteur via un bouton add. Une fenêtre modale s'ouvre ensuite, et lorsque cette dernière est submit, la ligne s'ajoute à la fin du tableau.

Or ici, l'ajout se fait correctement en BDD, mais il n'ajoute pas dynamiquement le nouvel interlocuteur. Je suis obligé de refresh l'onget pour voir apparaître cette nouvelle personne.

A chaque clic donc, la variable ft est redéfinie avec des données qui sont chargées selon une requête AJAX.

(Merci de prendre le temps de te pencher sur mon problème, c'est très gentil de ta part!)
26/05/2016, 15h40
JujuPomme

J'ai une question supplémentaire :

Dans ma console de débuggage, à un moment j'obtiens quelque chose comme ça : https://gyazo.com/3dc7fcc2e6c0b65cab7bbfa336d42afa

Et en dépliant : https://gyazo.com/1863fc41485849ee86aa805a9b6d7c46

Et en dépliant ensuite contexte, tout un tas d'informations. De quelle manière je peux accéder à ces informations justement, celles contenues dans le contexte? (Tel que textContent, innerHtml...)
26/05/2016, 16h20
EddiGordo
Avec un sélecteur jQuery :

Code:

$('<monSélecteurJQuery>').<maFonction/maPropriété>

Par exemple, tu peux essayer dans la console :
Code:

1 2 3 4 5 $('a#interlocuteurs_id_unique').href ou $('a#interlocuteurs_id_unique').innerHTML
26/05/2016, 16h27
JujuPomme
Je procède de cette manière :
Code:

1 2 3 4 $('#interlocuteur_table').on('click', 'td', function() { var row = $(this); console.log(row.innerHtml); });
Afin de récupérer une information d'une cellule précise.

Or dans la console, le fameux undefined is back.

Lorsque je fais un simple console.log(row); après avoir cliqué sur la cellule voulu, j'ai bien ce que je souhaite dans textContent ou innerHtml. Mais je n'arrive pas à y accéder...
26/05/2016, 16h29
JujuPomme

Problème résolu :

Code:

console.log(row.context.innerHTML);

Il ne reste que le problème principal du post :)

Merci @EddiGorgo !