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

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

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, 17h01

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, 17h13

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, 17h27

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, 17h36

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, 17h53

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

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

**mikaweb** · 09/10/2011, 18h21

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
<?php
if (isset($_POST['player']) && check_admin_referer('phpleague'))
{
    $positions  = ( ! empty($_POST['positions']))  ? maybe_serialize($_POST['positions']) : NULL;
 
    $db->edit_player_settings($id_league, $positions);
    $message[] = __('Players settings updated successfully!', 'phpleague');
}
 
// If the player mode is enabled...
if ($setting->player_mod === 'yes')
{    
    $output =
    '<table id="positions-table" class="widefat">
        <thead>
            <tr>
                <th>'.__('ID', 'phpleague').'</th>
                <th>'.__('Name', 'phpleague').'</th>
                <th>'.__('Order', 'phpleague').'</th>
                <th>'.__('Show', 'phpleague').'</th>
                <th><a href="#position" onclick="jQuery.add_position();">'.__('New Position', 'phpleague').'</a></th>
            </tr>
        </thead>
        <tbody>';
 
    $positions = $db->get_positions($id_league);
    foreach (maybe_unserialize($positions) as $position)
    {
        if ($position != 'NULL')
        {
            foreach (maybe_unserialize($position) as $key => $row)
            {
                $key++;
                $output .= '<tr id="position-'.$key.'">';
                $output .= '<td>'.$fct->input('positions['.$key.'][id]', $row['id'], array('size' => '4')).'</td>';
                $output .= '<td>'.$fct->input('positions['.$key.'][name]', $row['name']).'</td>';
                $output .= '<td>'.$fct->input('positions['.$key.'][order]', $row['order'], array('size' => '4')).'</td>';
                $output .= '<td>'.$fct->select('positions['.$key.'][show]', $yes_no, $row['show']).'</td>';
                $output .= '<td>'.$fct->input('remove_position', __('Remove', 'phpleague'), array('type' => 'button', 'class' => 'button', 'onclick' => 'jQuery.remove_position('.$key.');')).'</td>';
                $output .= '</tr>';
            }
        }
        else
        {
            $output .= '<tr id="position-1">';
            $output .= '<td>'.$fct->input('positions[1][id]', 1, array('size' => '4')).'</td>';
            $output .= '<td>'.$fct->input('positions[1][name]', '').'</td>';
            $output .= '<td>'.$fct->input('positions[1][order]', 0, array('size' => '4')).'</td>';
            $output .= '<td>'.$fct->select('positions[1][show]', $yes_no, 'yes').'</td>';
            $output .= '<td>'.$fct->input('remove_position', __('Remove', 'phpleague'), array('type' => 'button', 'class' => 'button', 'onclick' => 'jQuery.remove_position(1);')).'</td>';
            $output .= '</tr>';
        }
    }    
 
    $output .= '</tbody></table><div class="submit">'.$fct->input('player', __('Save', 'phpleague'), array('type' => 'submit')).'</div>';
    $output .= $fct->form_close();
 
    $data[] = array(
        'menu'  => __('Settings', 'phpleague'),
        'title' => __('Player Positions', 'phpleague'),
        'text'  => $output,
        'class' => 'full'
    );
}
 
echo $ctl->admin_container($menu, $data, $message);

La facon dont j'ai codé la chose avec jQuery, je ne voie pas où ajouter cette fonction delegate(). Je bidouille seulement avec jQuery, loin de maitriser la chose

Devrais-je recoder la chose autrement ? Supprimer les onclick="jQuery." et jouer sur les événements dans mon code ci-dessous? De même pour add_position?

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);

Merci pour ton aide en tout cas, c'est fortement apprécié.

EDIT:

J'ai modifié mon JS, tout est maintenant dans un et même fichier. J'ai supprimé les onclick sur ma page et je me retrouve avec le même comportement qu'avant et bien évidemment, cela ne fonctionne pas lors de la validation...

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
var panel;
(function ($) {
    panel = {
        init: function () {
            var title;            
            $(".adminpanel-menu-link").each(function() {
                if ($(".adminpanel-menu-link:first").attr("href") == "#") {
                    $(".adminpanel-menu-link:first").addClass("visible");
                    $(".adminpanel-content-box:first").addClass("visible");
                } else {
                    title = $(this).attr("id").replace("adminpanel-menu-", "");
                    if ($(this).attr("href") == "#") {
                        $(this).addClass("visible");
                        $("#adminpanel-content-" + title).addClass("visible");
                    }
                }
            });
 
            $(".adminpanel-menu-link").click(function (event) {
                if ($(this).attr("href") == "#") {
                    event.preventDefault();
                    title = $(this).attr("id").replace("adminpanel-menu-", "");
                    $(".adminpanel-menu-link").removeClass("visible");
                    $("#adminpanel-menu-" + title).addClass("visible");
                    $(".adminpanel-content-box").removeClass("visible");
                    $(".adminpanel-content-box").hide();
                    $("#adminpanel-content-" + title).fadeIn("fast");
                    $(".adminpanel-content-box").removeClass("visible")
                }
            });
 
            $("h3.heading").each(function() {
                $(this).click(function (event) {
                    $(this).next().toggle('slow');
                })
            });
 
			$(".remove_position").live('click', function(event) {
				$(this).parent().parent().remove();
			});
 
			$("#positions-table").delegate("#add_position", "click", function() {
				if ($('#positions-table tbody tr:last').length > 0)
				    var getNumber = parseInt($('#positions-table tbody tr:last').attr('id').replace('position-', ''), 10);
				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 remove_position" /></td></tr>');
			});
        }
    };
 
    $(document).ready(function() {
        panel.init();
    })
})(jQuery);

J'en deviens fou. Plein de tutoriel, mon ancien code, y a aucune raison pour que cela ne fonctionne pas, que ce soit avec ou sans cette fonction delegate ou toutes autres d'ailleurs. Est-ce une config de mon serveur de dév (MAMP) qui ferait planter la chose?

**danielhagnoul** · 09/10/2011, 19h14

Bonsoir

Je ne comprends pas bien les codes que vous me donnez, mais vous dites que c'est développé sous WordPress que je ne connais pas.

Sur une page web normale, pour envoyer les informations au serveur il doit y avoir une transaction AJAX qui renvoie la table avec ses ajouts au serveur. Je ne vois rien qui ressemble à cela.

**mikaweb** · 09/10/2011, 19h20

Il n'y aucun envoi en AJAX à la base de donnée.

J'affiche ou enlève mes lignes de la table, les remplis et ensuite avec un bête bouton submit, je valide le tout en PHP qui s'occupe de l'envoi en base de donnée.

Ce qui ne fonctionne pas c'est que ce qui est affiché à l'écran n'est pas parsé (car inexistant aux yeux du navigateur) lors de la validation ce qui fait que la variable $_POST['positions'] qui est supposée être un array se retrouve vide.

Ce qui est étrange c'est que ce qui n'a pas été ajouté par jQuery est existant et correctement parsé pour être inséré dans la base de donnée.

**danielhagnoul** · 09/10/2011, 19h32

J'affiche ou enlève mes lignes de la table, les remplis et ensuite avec un bête bouton submit, je valide le tout en PHP qui s'occupe de l'envoi en base de donnée.

D'accord, mais ou se trouve le code qui traite la soumission au serveur après le clic sur le bouton soumettre. Je crois que c'est là que les ajouts à la table ne sont pas pris en compte, et c'est pour ce point-là que je pensais à delegate.

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

Tout est là, enfin l'essentiel:

Code :

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

1
2
3
4
5
6
7
8
<?php
if (isset($_POST['player']) && check_admin_referer('phpleague'))
{
    $positions  = ( ! empty($_POST['positions']))  ? maybe_serialize($_POST['positions']) : NULL;
 
    $db->edit_player_settings($id_league, $positions);
    $message[] = __('Players settings updated successfully!', 'phpleague');
}

Je teste si la valeur existe et si ce n'est pas vide, puis en fonction du résultat, je lui donne la valeur NULL ou je sérialize via WordPress. J'ai testé avec un var_dump avant ce test et la variable est vide donc le souci ne provient pas de là.

**danielhagnoul** · 09/10/2011, 19h47

Ce que vous me montrez (et que j'avais déjà aperçu plus haut) c'est le code serveur (PHP ici) qui traite les données envoyées par la page web.

Moi je parle du code HTML (le submit) et du code jQuery qui envoie les données au serveur.

Je crois que l'on va en rester là, car on ne se comprend pas, sans doute la faute au système WordPress que je ne connais pas.