Comment passer un paramètre dans cette popup ?

**SpaceFrog** · 10/01/2014, 10h31

Code :

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

1
2
 $.post(url,{idPopup:id,popup:true},function(data){
       },"json");

la fonction de callback ne fait rien ?

Code :

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

1
2
$.post(url,{idPopup:id,popup:true},function(data){
alert( data['id']);       },"json");

**drogba72** · 10/01/2014, 19h02

La fonction alert() ne renvoie rien... Bizarre

Je ne sais pas trop comment, où et pourquoi cela bloque ...
Je suis un peu perdu pour tout vous dire :/

Code javascript :

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

1
2
3
4
5
6
$("#passeJson").onload(function(){
            	id = $(this).find("span[name=id]").val();
                url = $(this).attr("action");
                $.post(url,{idPopup:id,popup:true},function(data){
                	alert( data['id']);},"json");
            });

Code html :

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

<form class="form-horizontal" action="produits.php" method="post" name="form_pdts" onsubmit="return valider()" id="passeJson">

Code php :

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

1
2
3
4
5
6
7
<?php 
//Traitement popup
if( $_POST['popup'] == true)
{
echo 'id : ',$_POST['idPopup'];
}
?>

Code html :

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

<span id="foo" name="id" ></span>

Merci d'avance

**NoSmoking** · 11/01/2014, 07h55

Bonjour,

Envoyé par drogba72

La fonction alert() ne renvoie rien... Bizarre

la fonction alert n'a jamais retourné de valeur si ce n'est undefined

Code :

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

alert( alert('Yes!'));

tu peux avantageusement la remplacer par un console.log( data['id']).

**drogba72** · 11/01/2014, 10h36

Bonjour,

J'ai testé les deux solutions rien n'y fait.

Je me suis demandé si ce n'était pas le onload() dans ce bout de code qui serait peut être pas la bonne formule en jQuery. Qu'en pensez vous ?

Code javascript :

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

1
2
3
4
5
6
$("#passeJson").onload(function(){
            	id = $(this).find("span[name=id]").val();
                url = $(this).attr("action");
                $.post(url,{idPopup:id,popup:true},function(data){
                	console.log( data['id']);},"json");
            });

Pour préciser :

Dans la console, voici ce qui s'affiche quand je clique sur le lien qui ouvre le popin :

« none » ou URL attendu, mais « alpha( » trouvé. Erreur d'analyse de la valeur pour « filter ». Déclaration abandonnée.

**NoSmoking** · 11/01/2014, 14h27

Ceci est un message d'erreur CSS sans influence sur le reste du script.

**drogba72** · 11/01/2014, 14h57

Effectivement je n'avais pas vu la correspondance des couleurs.
Et en fait le javascript était désactivé dans la console :
Voici ce que j'ai trouvé :

L'API de la console de journalisation (console.log, console.info, console.warn, console.error) a été désactivée par un script sur cette page

Cela vous parle svp ?

En cherchant, j'ai trouvé que firebug pouvait poser problème, je l'ai désactivé et relancé et voici ce que j'ai maintenant lorsque je clique sur le lien pour ouvrir le popin :

- SyntaxError: missing : in conditional expression charisma.js:28
- TypeError: $(...).onload is not a function produits.php:325
- L'utilisation de « getPreventDefault() » est obsolète. Utiliser « defaultPrevented » à la place.

Par rapoprt à la deuxième erreur, le onload pose problème, c'est bien ça ?

**SpaceFrog** · 13/01/2014, 08h28

Je reviens sur ma remarque précédente : la réponse reçue n'est pas formatée correctement !!

Code :

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

echo 'id : ',$_POST['idPopup'];

il manque les {}

ensuite en jquery il n'existe pas de methode onload() => c'est load()

**drogba72** · 13/01/2014, 18h38

il manque les {}

Dans la ligne php mentionné, je vois pas vraiment où ces accolades iraient...

Afin d'avancer car je commence à me noyer, je vous joint le code ma page.
J'espère ne pas abuser de votre bonté en vous demandant où cela bloque t'il car toujours impossible de récupérer à l'ouverture de mon code l'id de ma ligne ...

Code php :

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
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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<?php 
 
include('header.php'); 
 
//Traitement popup
//if( $_POST['popup'] == true)
//{
//	echo 'id : ',$_POST['idPopup'];
//}
//else // Traitement de la fenêtre principale
//{
 
	if( isset($_POST) && !empty($_POST['code']) && !empty($_POST['nom']))
	{
		extract($_POST);
 
		echo 'code ',$code,'<br>';
		echo 'nom ',$nom,'<br>';
		echo 'description ',$description,'<br>';
		echo 'statut ',$statut,'<br>';
		echo 'px_vente ',$px_vente,'<br>';
		echo 'contexte ',$contexte_popup_produit,'<br>';
		echo 'user ',$username,'<br>';
		echo 'user2 ',$_SESSION['Authentification']['username'],'<br>';
 
		if ($statut == 'Actif')
		{
			$insert_statut = 1;
		}
		else 
		{
			$insert_statut = 0;
		}
 
		$insert = $connection->prepare('INSERT INTO KS_PRODUITS VALUES(
		:id, :code, :statut, :descr, :px_vente, :px_achat, :user_creat, :date_creat, :user_modif, :date_modif, :stock, :nom)');
 
		try 
		{
	  		// On envois la requète
	  		$success = $insert->execute( array
	  										(
	  										'id'=>'',
	  										'code'=>$code,
	  										'statut'=>$insert_statut,
	  										'descr'=>$description,
	  										'px_vente'=>$px_vente,
	  										'px_achat'=>0,
	  										'user_creat'=>$username,
	  										'date_creat'=>date("Y-m-d"),
	  										'user_modif'=>'',
	  										'date_modif'=>'',
	  										'stock'=>0,
										    'nom'=>$nom
											 )
										);
 
	  		if( $success ) 
	  		{
	    		echo "Enregistrement réussi";
	  		} 
		} 
		catch( Exception $e )
		{
	  		echo 'Erreur de requète : ', $e->getMessage();
		}
 
	}
//}
 
?>
 
	<style>
		/* TEST */
        .voile-noir {
            position: fixed;
            display: none;
            left: 0;
            top: 0; 
            width: 100%;
            height: 100%;
            opacity: 0.75;
            background: gray; 
            z-index: 9999;
        }
        .popup-block{
            position: fixed;
            display: none;
            top: 50%;
            left: 50%;
            padding: 20px; 	
            z-index: 99999;
            font-size: 1em;
            background: #000;
            border: 20px solid #ddd;
            -webkit-box-shadow: 0px 0px 20px #000;
            -moz-box-shadow: 0px 0px 20px #000;
            box-shadow: 0px 0px 20px #000;
            -webkit-border-radius: 10px;
            -moz-border-radius: 10px;
            border-radius: 10px;
        }
        .popup p {
            padding: 5px 10px;
            margin: 5px 0;
        }
        .popup-btn-close {
            float: right; 
            margin: -55px -55px 0 0;
        }
    </style>
 
	<div>
		<a class="brand"> <span>Produits</span></a>
	</div>
 
	<div class="row-fluid sortable">	
		<div class="box span12">
			<div class="box-header well" data-original-title>
				<h2>Produits</h2>
				<div class="box-icon">
					<div class="btn btn-setting btn-round">
        				<a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="700px"><i class="icon-plus-sign"></i></a>
        			</div>
				</div>
			</div>
 
			<div class="box-content">
				<table class="table table-bordered table-striped table-condensed">
				  	<thead>
					  	<tr>
					  		<th style="display:none">Id </th>
					  	  	<th>Code</th>
						  	<th>Nom produit</th>
						  	<th>Prix de vente</th>
						  	<th>Statut</th> 
						  	<th>Actions</th>                                          
					  	</tr>
				  	</thead> 
 
				  	<tbody>
				   		<?php 
						// Récupération des données
						try 
						{
						  	// On envois la requète
						  	$select = $connection->query("SELECT * FROM KS_PRODUITS");
 
						  	// On indique que nous utiliserons les résultats en tant qu'objet
						  	$select->setFetchMode(PDO::FETCH_OBJ);
 
						  	// Nous traitons les résultats en boucle
						  	while( $enregistrement = $select->fetch() )
						  	{	
							    // Affichage des enregistrements
								echo '<tr>';
							  	// Affichage d'un des champs
							  	echo '<td style="display:none">', $enregistrement->PDT_ID, '</td>';
							  	echo '<td>', $enregistrement->PDT_CODE, '</td>';
							  	echo '<td>', $enregistrement->PDT_NOM, '</td>';
							  	echo '<td>', $enregistrement->PDT_PRIX_VENTE, ' €</td>';
 
							  	if ($enregistrement->PDT_ACTIF == '0')
							  	{
							  		echo '<td> Inactif </td>';
							  	}
							  	else 
							  	{
							  		echo '<td> Actif </td>';
							  	}     
 
							  	echo '<td class="center">';
							  		echo '<div class="btn btn-success">';
									echo '<a href="#" class="popup-light" data-popup-class="popup-block" data-popup-width="700px">';
										echo '<i class="icon-edit icon-white"></i>';            
									echo '</a>';
									echo '</div>';
									echo '<a class="btn btn-danger" href="#">';
										echo '<i class="icon-trash icon-white"></i>'; 
									echo '</a>';
								echo '</td>';   
								echo '</tr>';
						  	}
						} 
						catch ( Exception $e ) 
						{
						  	echo "Une erreur est survenue lors de la récupération des produits";
						}
 
 
					   	?>
 
				  	</tbody>
				</table>  
 
				<div class="pagination pagination-centered">
				  	<ul>
						<li><a href="#">Prev</a></li>
						<li class="active">
					  		<a href="#">1</a>
						</li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
						<li><a href="#">Next</a></li>
				  	</ul>
				</div>     
			</div>
		</div><!--/span-->
	</div><!--/row-->
 
 	<div class="popup-block"> 
        <div class="row-fluid sortable">
			<div class="box span12">
				<div class="box-header well" data-original-title>
					<h2><i class="icon-edit"></i> Produits</h2>
				</div>
				<div class="box-content">
					<form class="form-horizontal" action="produits.php" method="post" name="form_pdts" onsubmit="return valider()" id="passeJson">
						<fieldset>
							<?php 
							//Traitement popup
							//if( $_POST['popup'] == true)
							//{
								echo 'id : ',json_encode($_POST['popup']),'<br>';
								echo 'id : ',json_encode($_POST['idPopup']),'<br>';
							//}
							?>
 
							<span id="foo" name="id" ></span>
 
						  	<div class="control-group">
								<label class="control-label" for="focusedInput">Code</label>
								<div class="controls">
							  		<input class="input-xlarge focused" id="code" name="code" type="text" value="">
								</div>
						  	</div>
 
						  	<div class="control-group">
								<label class="control-label" for="focusedInput">Nom</label>
								<div class="controls">
							  		<input class="input-xlarge focused" id="nom" name="nom" type="text" value="">
								</div>
						  	</div>
 
						  	<div class="control-group">
							  	<label class="control-label" for="textarea2">Description</label>
							  	<div class="controls">
									<textarea class="cleditor" id="description" name="description" rows="3"></textarea>
							  	</div>
						  	</div>
 
						  	<div class="control-group">	
								<label class="control-label" for="selectError">Statut</label>
								<div class="controls">
							  		<select id="statut" name="statut" data-rel="chosen">
										<option>Actif</option>
										<option>Inactif</option>
							  		</select>
								</div>
					      	</div>	
 
					      	<div class="control-group">
								<label class="control-label" for="focusedInput">Prix de vente</label>
								<div class="controls">
							  		<input class="input-xlarge focused" id="px_vente" name="px_vente" type="text" value="">
								</div>
						  	</div>
 
						  	<div class="form-actions">
								<button type="submit" class="btn btn-primary" >Sauvegarder</button>
								<button class="btn">Annuler</button>
						  	</div>
					    </fieldset>
					</form>
				</div>
			</div><!--/span-->
		</div><!--/row-->
    </div>
 
 
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script>
        $(function(){
            $(".popup-light").click(function() {
                var obj = $(this),
                	popupligne = obj.parent().parents('tr:eq(0)').find('td:eq(0)').text(),
                    popupClass = obj.data("popupClass"),
                    popupWidth = obj.data("popupWidth"),
                    objPopup =  $('.' + popupClass);
 
                objPopup
                    .css("width", popupWidth)
                    .prepend('<img src="http://sohtanaka.developpez.com/tutoriels/javascript/creez-fenetre-modale-avec-css-et-jquery/fichiers/close_pop.png" class="popup-btn-close" title="Close Window" alt="Close" />')
                    .css({
                        // Si l'on regroupe les deux blocs CSS, le popup n'est pas bien positionné
                        // Le popup doit avoir sa taille définitive avant le calcul de outerHeight et de outerWidth
                        "margin-top":  -objPopup.outerHeight(true)/2,
                        "margin-left": -objPopup.outerWidth(true)/2
                    })
                    .fadeIn();
 
                $("<div/>", {
                    "class":"voile-noir",
                    "css":{
                        "filter":"alpha(opacity=80)"
                    }
                }).appendTo("body").fadeIn();
 
                $('#foo').html(popupligne);
 
                return false;
            });
 
            $("body").delegate(".popup-btn-close, .voile-noir", "click", function(){
                $('.voile-noir , .popup-block').fadeOut(function(){
                    $(".popup-btn-close, .voile-noir").remove();
                });
 
                return false;
            });
 
            $("#passeJson").load(function(){
            	id = $(this).find("span[name=id]").val();
                url = $(this).attr("action");
                $.post(url,{idPopup:id,popup:true},function(data){
                	console.log('youpi');},"json");
            });
        });
 
        function valider()
        {
       		elt=document.forms['form_pdts'].elements['code'];
        	if(elt.value = "") 
            {
        		alert("Saisissez un code");
          	  	return false;
        	}
 
        	elt=document.forms['form_pdts'].elements['nom'];
        	if(elt.value = "") 
            {
        		alert("Saisissez un nom de produit");
          	  	return false;
        	}
 
        	return true;
        }
 
 
    </script>
 
 
<?php include('footer.php'); ?>

Merci encore

**SpaceFrog** · 14/01/2014, 08h40

Dans la ligne php mentionné, je vois pas vraiment où ces accolades iraient...

to ajax attend un string json en retour

comme déja précisé un string json c'est :

Code :

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

'{"id":"valeur"}'

si id est un string

Code :

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

'{"id": 50}'

si id est un interger

Ton php ne retournant pas ce format de chaine ...

**drogba72** · 14/01/2014, 09h23

Désolé mais ce n'est toujours pas clair pour moi

Tu me parles de cette partie du code ?

Code javascript :

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

1
2
3
4
5
6
$("#passeJson").load(function(){
            	id = $(this).find("span[name=id]").val();
                url = $(this).attr("action");
                $.post(url,{idPopup:id,popup:true},function(data){
                	console.log('youpi');},"json");
            });

ou de celle ci ?

Code php :

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

echo 'id : ',json_encode($_POST['popup']),'<br>';

S'il s'agit de la seconde partie, pensez vous que le code suivant devrait aller svp ?

Code php :

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

1
2
$id = $_POST['popup']
echo '{"id": $id}';

**SpaceFrog** · 14/01/2014, 09h27

A ton avis ... le retour de l'ajax est généré où ?

**drogba72** · 14/01/2014, 10h08

Comme le but est de récupéré une variable php, j'imagine que le retour se fait en php

Je test cela ce soir et je vous tient au courant.
En espérant pouvoir enfin mettre résolu à ce sujet

Merci pour votre patience.

**drogba72** · 14/01/2014, 19h28

Alors hélas cela ne fonctionne toujours pas ...

Je me demande si la fonction de callback renvoie vraiment quelque chose ...

Comment puis je le vérifier svp ?
Par exemple : je regarde man console web et jamais il ne m'affiche youpi.
Pensez vous cela normal ?

Code :

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

1
2
3
4
5
6
$("#passeJson").load(function(){
            	id = $(this).find("span[name=id]").val();
                url = $(this).attr("action");
                $.post(url,{idPopup:id,popup:true},function(data){
                	console.log('youpi');});
            });

De plus, cmment être sûr que "#passeJson" pointe bien vers l'id de ma balise form ?
Ne serait ce pas là mon vrai problème ?

Merci.

**SpaceFrog** · 15/01/2014, 08h42

c'est quoi cet element ?

Code :

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

$("#passeJson")

**drogba72** · 15/01/2014, 13h00

Il s'agit de l'id de mon formulaire :

Code html :

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

<form class="form-horizontal" action="produits.php" method="post" name="form_pdts" onsubmit="return valider()" id="passeJson">

**SpaceFrog** · 15/01/2014, 16h17

.load() sur un formulaire ???

**drogba72** · 15/01/2014, 16h30

Pour rappel :

Je souhaite charger le détail de l'id (enregistrement sur lequel on a cliqué "modifier" dans le tableau) dans le formulaire se trouvant dans le popin.

Donc en faisant ça, je pensais que cela se ferais au chargement du formulaire, peut être que cela n'est pas bien pensé et qu'il faudrait le faire plutôt au chargement du popin.

Qu'en pensez vous ?
Comment procéderiez vous svp ?

**SpaceFrog** · 15/01/2014, 16h36

load() sert:
- soit d'evenement de fin de chargement pour des images ou le window
- soit a charger du contenu externe à la page element

En l'occurence sur un form il n'y a pas d'evenement load de chargement

Il doit y avoir par contre un callback sur ton popin dans lequel tu pourras lancer ta fonction

**drogba72** · 15/01/2014, 17h07

Envoyé par SpaceFrog

load() sert:
- soit d'evenement de fin de chargement pour des images ou le window
- soit a charger du contenu externe à la page element

En l'occurence sur un form il n'y a pas d'evenement load de chargement

OK message bien reçu

Envoyé par SpaceFrog

Il doit y avoir par contre un callback sur ton popin dans lequel tu pourras lancer ta fonction

Dois je positionner l'appel de la fonction callback dans mon popin ?
Pouvez vous être plus précis svp ?