$.getJSON : passer en paramètre la value d’un input créé dynamiquement

**almoha** · 10/01/2012, 14h25

Bonjour,

Je suis en train de mettre en place un système d'insertion de livres dans une base de données pour un site de gestion de bibliothèque perso. L'insertion d'un livre commence par le choix de l'auteur dans une liste (autocompletion). Si l'auteur n'existe pas dans cette liste, j'ai la possibilité, en cliquant sur un "lien" "Auteur absent de la liste ?", de faire apparaitre 2 champs input pour renseigner le prénom et nom de l'auteur. Puis en cliquant sur un "lien "ajouter" l'identité de cet auteur s'affiche. Je peux ensuite supprimer l'affichage de cet auteur en cliquant sur un "lien" "supprimer". Je peux ajouter et supprimer autant d'auteurs que je souhaite. Je précise que, grâce à une fonction $.getJSON, le fait de cliquer sur "ajouter" entraine aussi une insertion de l'auteur dans ma base de données et me permet de récuperer l'ID du dernier auteur inséré (= ID_auteur ). J'affecte cet ID_auteur à la value de l'input hidden créé dynamiquement par la fonction "affichage_contrib" (cette value me sera utile pour un traitement php ultérieur).

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
91
92
93
94
 
<script type="text/javascript">
 
 $(document).ready(function(){
 
	$('.ajout').click (function() {
 
		var prenom = $('#prenom_contrib').val();
		var nom = $('#nom_contrib').val();
 
		affichage_contrib(prenom+' '+nom,"_"+prenom+nom);
 
			function affichage_contrib(prenom_nom,id)
 
			{
			$('#contributeurs').append('<br/><div id="contrib'+id+'"> \
			<span>'+prenom_nom+'</span> \
			<span style="cursor:pointer;" onclick="javascript:supp_contrib(\'contrib'+id+'\' );">supprimer</span>\
			<input type="hidden" name="contrib_post[]" id="contrib_post'+id+'" value="" ></div>');
 
			$('#contrib_search').val('');
			}
 
 
		$.getJSON(
 
			'ajax_traitementPHP_add.php',       
			{prenom: prenom, nom: nom},
 
			function(data)
			{
 
			var id= prenom+nom;
 
			$('#contrib_post_'+id).val(data.id_auteur );
 
			$('#prenom_contrib').val("");
			$('#nom_contrib').val("");  
			$('#ajout_new').hide();
 
			}             
 
				);
 
 
								});
 
});
 
 
function supp_contrib(id)
{
 
	$.getJSON(
 
    'ajax_traitementPHP_supp.php',       
	{id_suppr: $('#contrib_post'+id).val()},
 
	function(data){
 
	$('#'+id).remove();
 
	}  
 
			);
 
} 
 
 
</script>
 
 
</head>
 
 
<body>
 
	<div id="contributeurs"></div>
 
	<div id="ajout_new" style="display:none;clear:left;">
 
		<input id="prenom_contrib" type="text"><br/>
 
		<input id="nom_contrib" type="text">
 
		<span class="ajout"style="cursor:pointer;">ajouter</span>
 
	</div>
 
	<br/>
 
	<input id="contrib_search" type="text"><br/>
 
	<span style="cursor: pointer;" onclick="$('#ajout_new').show();"> Auteur absent de la liste ? </span>

Grâce à la 2nd fonction $.getJSON, je souhaite gérer le cas du clic sur "supprimer" qui est censé déclencher une suppression de l'auteur dans ma bdd en passant comme paramètre la value de l'input (qui contient ID_auteur), précédemment affectée lors de l'insertion (fonction "affichage_contrib"). Firebug me signale que la requête se fait mais elle est vide car le paramètre n'est pas transmis. Pouvez-vous m'aider à trouver ce qui ne va pas dans mon code (je suis débutant) ? Merci.

**ticroch** · 10/01/2012, 14h40

Je crois que ca vient de la :

Code :

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

1
2
 
onclick="javascript:supp_contrib(\'contrib'+id+'\' );"

Donc quand tu exécute al fonction supp_contrib il va cherché l'identifiant de l'élément "contrib_postcontrib3" par exemple.

Change ton code :

Code :

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

1
2
 
onclick="javascript:supp_contrib(' + id + ');"

Et un petit conseil indente un peu plus ton code avant de l'envoyer, sinon c'est vraiment chiant à lire ... (t'as de la chance que je me fasse chi.. au boulot :p)

**almoha** · 10/01/2012, 15h21

Merci de ta proposition mais la modification du code aboutit à une erreur : _xxxxx is not defined
(où xxxx est la valeur accolée des champs prenom_contrib et nom_contrib.)
Voyez-vous d'autres raisons au dysfonctionnement ? Merci.

**ticroch** · 10/01/2012, 15h23

ba c'est quoi l'identifiant de ton element, c'est bien contrib_post3 par exemple ??

**almoha** · 10/01/2012, 15h44

Si dans le champ :

Code :

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

1
2
 
<input id="prenom_contrib" type="text">

je tape "stephen"

et dans le champ

Code :

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

1
2
 
<input id="nom_contrib" type="text">,

je tape "king",

voici le code html généré une fois cliqué sur "ajouter" :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="contributeurs">
 
<br>
    <div id="contrib_stephenking">
    <span>stephen king</span>
    <span onclick="javascript:supp_contrib('contrib_stephenking' );"    style="cursor: pointer;">supprimer</span>
    <input id="contrib_post_stephenking" type="hidden" value="1287" name="contrib_post[]">
    </div>
</div>

Le champ hidden a été complétée dynamiquement par la requête ajax (value "1287"). Cette valeur correspond au dernier ID auteur inséré. Je souhaite que ce dernier ID me permette d'identifier l'auteur à supprimer de ma base lors du clic sur "supprimer" (déclenchement ajax : requête sql de suppression). Merci de votre intérêt.

**ticroch** · 10/01/2012, 15h54

ah d'accord, comme les identifiants sont des chaînes de caratères il faut ajouter des ' dans mon code :

Code :

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

1
2
 
onclick="javascript:supp_contrib(\'' + id + '\' );"

De plus tu as oublié un _ dans ta fonction supp_contrib

Code :

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

1
2
 
{id_suppr: $('#contrib_post_'+id).val()},

La ca devrait marcher. Tu peux vérifier que c'est le bon element en faisant des alert() dans ta fonction supp_contrib, ca permet de débuger.
Exemple :

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 supp_contrib(id){
    alert('contrib_post_'+id); // doit te renvoyer contrib_post_stephenking
    alert($('#contrib_post_'+id).length()); // doit te renvoyer 1 normalement, ca signifie que l'élément existe
	$.getJSON(
 
    'ajax_traitementPHP_supp.php',       
	{id_suppr: $('#contrib_post'+id).val()},
 
	function(data){
 
	$('#'+id).remove();
 
	}  
 
			);
 
}

**almoha** · 11/01/2012, 21h27

Grâce au debug que tu m'as suggéré et à ton aide, je suis arrivé à mes fins. Merci

$.getJSON : passer en paramètre la value d’un input créé dynamiquement

jQuery

Discussions similaires

Partager

Partager