jQuery append() - S'affiche à l'écran mais impossible à sauver

**mikaweb** · 09/10/2011, 13h11

Bonjour,

J'utilise la petite fonction suivante afin d'ajouter ou d'enlever dynamiquement des champs à mon tableau malheureusement, bien que à l'écran tout soit en ordre, lorsque je valide, aucune donnée n'est présente - rien n'existe

Le but est de créer sur le nouveau "New Position" pour ajoute une nouvelle ligne, possibilité de l'enlever si on clique sur le bouton "Remove" correspondant.

A noter que si il y a déjà une ligne en base de donnée, que je l'enlève et sauve, tout fonctionne comme prévu. C'est vraiment la partie "append()" qui ne joue pas.

Pour l'ajout en base de donnée, c'est du super basique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
elseif (on fait nos tests ici...)
{
    $positions  = ( ! empty($_POST['positions']))  ? maybe_serialize($_POST['positions']) : NULL;
    // on ajoute dans la bdd nos donnés - seul souci est que j'ai droit uniquement à NULL :mrgreen:
}

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
(function ($) {
	$.fn.exists = function() {
		return $(this).length > 0;
	};	
	$.remove_position = function(position_id) {
		$('#position-' + position_id).remove();
	};	
	$.add_position = function() {
		if ($('#positions-table tbody tr:last').exists())
		    var getNumber = $('#positions-table tbody tr:last').attr('id').replace('position-', '');
		else
			var getNumber = 0;
 
		var addNumber = getNumber + 1;
 
		$('#positions-table > tbody:first').append('<tr id="position-' + addNumber + '"><td><input type="text" name="positions[' + addNumber + '][id]" value="1" size="4" /></td><td><input type="text" name="positions[' + addNumber + '][name]" value="" /></td><td><input type="text" name="positions[' + addNumber + '][order]" value="0" size="4" /></td><td><select name="positions[' + addNumber + '][show]"><option value="no">No</option><option value="yes" selected="selected">Yes</option></select></td><td><input type="button" name="remove_position" value="Remove" class="button" onclick="jQuery.remove_position(' + addNumber + ');" /></td></tr>');
	};
})(jQuery);

Mon tableau ressemble à cela :

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
<table id="positions-table" class="widefat">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Order</th>
                <th>Show</th>
                <th><a href="#position" onclick="jQuery.add_position();">New Position</a></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Order</th>
                <th>Show</th>
                <th><a href="#position" onclick="jQuery.add_position();">New Position</a></th>
            </tr>
        </tfoot>
        <tbody><tr id="position-66"><td><input type="text" name="positions[66][id]" value="2" size="4" /></td><td><input type="text" name="positions[66][name]" value="Latéral Droit II" /></td><td><input type="text" name="positions[66][order]" value="1" size="4" /></td><td><select name="positions[66][show]">
<option value="no">No</option>
<option value="yes" selected="selected">Yes</option>
</select></td><td><input type="button" name="remove_position" value="Remove" class="button" onclick="jQuery.remove_position(66);" /></td></tr></tbody></table>

Est-ce que vous auriez la moindre idée d'ou peut venir le souci ? J'utilise une fonction similaire sur des paragraphes pour un systèmes de sondage où les champs sont ajoutés dynamiquement et aucun souci. A noter, je ne sais pas si cela a son importance, que c'est développé sous WordPress (l'autre fonction de sondage est en standalone PHP5 sur du code perso.).

Merci beaucoup,
Max'

**danielhagnoul** · 09/10/2011, 16h01

Bonjour

L'append n'est pas en cause.

Dans votre programme, addNumber est un texte, car getNumber est un texte, exemple : "66"+1 = "661".

var getNumber = parseInt($('#positions-table tbody tr:last').attr('id').replace('position-', ''), 10);

**mikaweb** · 09/10/2011, 16h13

Merci Daniel pour ta réponse, en effet, il y avait une erreur de type mais cela ne change rien au problème car maintenant j'ai un 6 au lieu de 51 mais cela reste un entier.

Comme je ne valide pas via jQuery mais par "bête" PHP, le souci doit venir du fait que le navigateur (DOM) n'interprète pas ce qui est ajouté par append() mais pour quelle raison ?

Le souci vient bien du append().

**danielhagnoul** · 09/10/2011, 16h27

Ci-dessous mon code de test, lorsque j'examine le code HTML généré après plusieurs clics sur le bouton "Append" je ne vois aucune erreur et la numérotation est correcte : 67, 68, ...

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
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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2'>
	<style>
		/* Base */
		html {font-size:62.5%; } /* Pour 62.5% 1rem =~ 10px */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgb(122, 79, 79); color:#000000; font-family:sans-serif; font-size:1.4rem; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:0.6rem; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2.4rem; text-shadow: 0.4rem 0.4rem 0.4rem #bbbbbb; text-align:center; }
		p {padding:0.6rem; }
		.conteneur {width:95%; min-width:80rem; min-height:30rem; margin:1.2rem auto; background-color:#ffffff; color:#000000; border:0.1rem solid #666666; }
		footer {margin-left:3.6rem; }
 
		/* --- */
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<table id="positions-table" class="widefat">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Order</th>
					<th>Show</th>
					<th><a href="#position" onclick="jQuery.add_position();">New Position</a></th>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>Order</th>
					<th>Show</th>
					<th><a href="#position" onclick="jQuery.add_position();">New Position</a></th>
				</tr>
			</tfoot>
			<tbody>
				<tr id="position-66">
					<td>
						<input type="text" name="positions[66][id]" value="2" size="4" />
					</td>
					<td>
						<input type="text" name="positions[66][name]" value="Latéral Droit II" />
					</td>
					<td>
						<input type="text" name="positions[66][order]" value="1" size="4" />
					</td>
					<td>
						<select name="positions[66][show]">
							<option value="no">No</option>
							<option value="yes" selected="selected">Yes</option>
						</select>
					</td>
					<td>
						<input type="button" name="remove_position" value="Remove" class="button" onclick="jQuery.remove_position(66);" />
					</td>
				</tr>
			</tbody>
		</table>
 
		<button id="btn">Append</button>
 
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.7b1.min.js"></script>
	<script>
		$(function(){
 
			$("#btn").click(function(){
				var getNumber = parseInt($('#positions-table tbody tr:last').attr('id').replace('position-', ''), 10),
					addNumber = getNumber + 1;
 
				$('#positions-table > tbody').append('<tr id="position-' + addNumber + '"><td><input type="text" name="positions[' + addNumber + '][id]" value="1" size="4" /></td><td><input type="text" name="positions[' + addNumber + '][name]" value="" /></td><td><input type="text" name="positions[' + addNumber + '][order]" value="0" size="4" /></td><td><select name="positions[' + addNumber + '][show]"><option value="no">No</option><option value="yes" selected="selected">Yes</option></select></td><td><input type="button" name="remove_position" value="Remove" class="button" onclick="jQuery.remove_position(' + addNumber + ');" /></td></tr>');
			});
 
		});
	</script>
</body>  
</html>

**mikaweb** · 09/10/2011, 16h36

Ben mon souci est là

Comme toi, je n'ai aucun problème à l'écran. Mon souci vient du fait que lorsque je balance le tout à valider en PHP, $_POST revient vide à chaque fois pour les nouvelles lignes.

J'ai testé sous jsfiddle pour le JS avec l'HTML et aucun souci.

D'où ma question, est-ce que WordPress peut jouer un rôle là-dedans? Je n'ai pas testé mais je suppose que si je monte from scratch une page php avec PDO, mes tables, etc..., je n'aurais aucun souci avec le code utilisé.

edit: J'ai le même souci que le dernier message dans ce post: http://forum.jquery.com/topic/can-t-...amically-added

**danielhagnoul** · 09/10/2011, 16h53

$_POST revient vide à chaque fois pour les nouvelles lignes.

C'est peut-être logique. Il faut utiliser delegate(). Où est ce bout de code*?

jQuery append() - S'affiche à l'écran mais impossible à sauver

jQuery

Vue hybride

Discussions similaires

Partager

Partager