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

Version imprimable

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:calim2:

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:

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:

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:

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'

09/10/2011, 16h01
danielhagnoul

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);
09/10/2011, 16h13
mikaweb

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 ?:oops:

Le souci vient bien du append().

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:

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>

09/10/2011, 16h36
mikaweb

Ben mon souci est là :D

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
09/10/2011, 16h53
danielhagnoul

Citation:

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

C'est peut-être logique. Il faut utiliser delegate(). Où est ce bout de 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
<?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 :P

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:

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:

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?

09/10/2011, 18h14
danielhagnoul

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.
09/10/2011, 18h20
mikaweb

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.
09/10/2011, 18h32
danielhagnoul

Citation:

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.

Tout est là, enfin l'essentiel:
Code:

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à.

09/10/2011, 18h47
danielhagnoul

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.
09/10/2011, 19h04
mikaweb

J'ai effectué un test hors WordPress pour tout le processus et étonnamment cela fonctionne sans souci :mouarf:

Je vais aller devoir me plonger dans ce foutu code:cry:

Merci de ton aide.

Bonne soirée,
Mika'
09/10/2011, 19h08
danielhagnoul

Bonne soirée ! :aie:
09/10/2011, 20h45
mikaweb

J'en suis venu à bout:ccool:
2 jours de merde pour une broutille...