Comment passer un paramètre dans cette popup ?

Version imprimable

Voir 40 message(s) de cette discussion en une page

15/01/2014, 18h37
drogba72

Où pourrais trouver cette doc mon seigneur svp ?

Je pense ne plus être très loin de la solution, je m'explique :

J'ai retiré la fonction de callback qui se basait sur le load d'un formulaire, j'ai lu que cela ne pouvait pas fonctionner...
De ce fait j'ai rajouté la fonction de callback (en gras ci-dessous) à l'ouverture de mon popin.
Cela à l'air de vraiment mieux fonctionner, la fonction alert me renvoie bien mon id.
Maintenant je suis sûr de passer dans ma fonction de callback, alert s'affiche bien et dans la console web il est écrit que je fais bien une requête POST.
Cependant, impossible de récupérer, une valeur en php ...
j'ai été jusqu'à faire un print_r($_POST); => le tableau est vide ...

Auriez vous une idée ?

Le code actualisé en dessous :

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
<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);
 
               <gras> var id = obj.parent().parents('tr:eq(0)').find('td:eq(0)').text();
 
                var obj = {idPopup:id}
 
                 $.ajax({
                             type: "POST",
                             url: "produits.php",
                             data: obj ,
                             function(data){
                                                alert( "ID : " + id  );
                                                 }
                              });</gras>
 
                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;
            });
        });
 
    </script>

17/01/2014, 08h23
drogba72

Personne n'a d'idée à propos de la fonction de callback svp ?
Est elle bien placée ?
Est elle syntaxiquement bonne ?
Merci

Je n'ai pas repris le fil de la discussion mais je dirais que pour ton appel Ajax il te faudrais faire une appel du type
Code:

1 2 3 4 5 6 7 8 9 10 11 $.ajax({ 'type': 'POST', 'url' : 'produits.php', 'data': { 'idPopup' : id } }) .done(function(data) { alert("ID : " + id); }) .fail(function (xhr) { alert('c\'est ballot! :\n' + xhr.statusText); });
Je ne sais pas si le formulaire est quand même soumis, si c'est le cas, la page est rechargée et le retour pourrait ce faire dans le vide.

Merci pour cette réponse :D

Je l'ai mise en place et effectivement le

Code:

alert("ID : " + id);

fonctionne bien.

Cependant dans mon popin je n'arrive pas à récupérer l'information de cette ID.
J'ai tenté tout ça :

Code:

1
2
3
4
5
6
7
<?php
                                                        
echo 'id : '.json_encode($_POST[idPopup]).'<br>';
echo 'id : '.json_decode($_POST[idPopup]).'<br>';
print_r($_POST).'<br>';
                                                        
?>

Aucun d'eux ne me renvoie une valeur.
Une idée svp ?

18/01/2014, 15h11
NoSmoking

Citation:

Cependant dans mon popin je n'arrive pas à récupérer l'information de cette ID.

pourquoi passer par le serveur dans ton cas?

Je ne saisi pas non plus ce que tu fais coté serveur avec la donnée reçue !?!
18/01/2014, 15h25
drogba72

Je souhaite grâce à cette variable charger le détail de mon enregistrement.
Il faut donc que je récupère cette info côté serveur afin de lancer une requête.

Pour te re situer dans le contexte, ma page principale liste mes produits dans un tableau, et si l'on souhaite modifier l'un d'entre eux on clic sur un lien qui ouvre un popin qui permet de modifier le détail de cet enregistrement.

En espérant que cela soit plus clair maintenant. :D
18/01/2014, 15h36
NoSmoking
Donc j'en conclu que tu as un soucis coté serveur maintenant, récupération des données, lecture de la base, renvoie des données.

Coté client, une fois les données transmises reçues dans la fonction callBack il te suffit de les réattribuer aux champs concernés
Code:

1 2 3 4 .done(function(data) { // C'EST ICI que tu traites le retour // mais il me semble que cela a déjà été dit })
Il ne faudra pas manquer de spécifier le type de données que tu reçois pour pouvoir les exploiter au mieux.
18/01/2014, 16h21
drogba72
Je dois être abruti :cry: ...
Citation:
Coté client, une fois les données transmises reçues dans la fonction callBack il te suffit de les réattribuer aux champs concernés

Code:

1 2 3 4 .done(function(data) { // C'EST ICI que tu traites le retour // mais il me semble que cela a déjà été dit })
Dans cette fonction je met du php??
Et si on me l'a déjà dit, désolé je n'avais encore moins compris :aie::oops:
18/01/2014, 18h04
NoSmoking

Citation:

Je dois être abruti :cry: ...

Je pense que tu as trop la tête dans le guidon.

Citation:

Dans cette fonction je met du php??

Coté client, javascript un point c'est tout, donc prend du recul et prend le temps de lire Comprendre les mécanismes d'AJAX

Bonjour,

J'ai pris le temps comme conseillé de lire ce lien (et d'autres présent dans cet article) et j'ai compris un truc :

Je ne ferais jamais carrière dans le développement Web :)

Je ne comprends toujours pas ce qu'il faut mettre dans cette fonction ...

Qu'est ce que je fais de mal ????

Je m'explique :

Je suis parti pour faire des essais pour comprendre et même des essais fonctionne mal ...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var id = obj.parent().parents('tr:eq(0)').find('td:eq(0)').text(); $.getJSON( 'charge.php', {chaine: id}, function(data){ $('#retour').hide(); $('#retour').html('') .append('<b>Id</b> : '+id+'<br/>'); $('#retour').fadeIn(); } );
Partie Html fonctionne très bien avec ma div retour.

Partie php :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <?php // Récupération des paramètres $chaine = ''; if( isset($_GET['chaine']) ){ $chaine = $_GET['chaine']; } // Traitements $retour = array( 'idPopup' => $chaine ); ?>
Par contre quand je veux afficher le tableau php :

Code:

echo json_encode($retour);

Voilà l'affichage :

id : {"idPopup":""}

Pourriez vous m'expliquer svp, je piétine...

20/01/2014, 08h33
SpaceFrog

Tu as encore des soucis avec les bases de javascript ...

Code:

{chaine: id},

chaine = variable ...
sasn doute non définie => coté serveur $_GET['chaine'] n'existe pas ..;
si tu avais fait un

Code:

var_dump($_GET)

tu aurais sans doute vu un $_GET['undefined']Si tu mets en indexe de ton json une chaine

Code:

{"chaine": id},

je pense que ton serveur captera le GET attendu
20/01/2014, 09h11
drogba72

Bonjour,

Je m'étais souvenu de votre remarque concernant ce point l'autre fois il me semble, hier.

J'ai donc testé :

Code:

{'chaine': id},

Et apriori, cela n'avait pas fonctionné non plus.
Je testerais tout de même votre solution ce soir pour l'affirmer.

Merci.
20/01/2014, 09h56
SpaceFrog
Il me semble que la fois précédente ma remarque concernant php et donc la redaction du json coté serveur
Cette fois ci je parle de l'envoi des données au serveur par javascript
et donc en js chaine sans quotes est une variable...

or il te faut un index string dans ton json

il faut surtout tester un var_dump de GET pour voir ce qu'il contient ..

je me demande même si on peut passer des paramètres avec getJSON .
Et a priori je viens de vérifier et mes doutes se confiment !

si tu veux passer des paramètres en GET avec getJSON il faut le faire dans l'url, la methode getJSON ne possède pas un paramètre data !
Code:

1 2 3 4 $.getJSON( 'charge.php?chaine='+encodeURIComponent(id), function(data){
sinon il faudra passer par $.ajax qui lui possède bine un paramètre data

D'accord je vais faire des tests comme ça ce soir.

Au cas où getJSON n'as pas plus de résultat, j'aimerais m'attarder sur $.ajax.

Parce que cette méthode n'a pas l'air de bien fonctionnée (ou alors c'est moi qui ne sait pas l'utiliser :lol:)
En écrivant ça (en admettant bien sûr que id est définit au dessus):
Code:

1 2 3 4 5 6 7 8 9 10 11 $.ajax({ 'type': 'POST', 'url' : 'produits.php', 'data': { 'idPopup' : id } }) .done(function(data) { alert("ID : " + id); }) .fail(function (xhr) { alert('c\'est ballot! :\n' + xhr.statusText); });
Je pense que ce bout de code est correct. Et si j'ai bien compris, le fait d'avoir un argument data, cela permettra via la méthode POST d'envoyer ces paramètres. Hors, rien n'y fait non plus...
L'affichage en php m'affiche toujours du vide. D'où pensez vous que cela pourrait venir ? (Sachant que dans la console une ligne post est bien créée et que les paramètre de cette même ligne sont corrects.

Citation:

Il ne faudra pas manquer de spécifier le type de données que tu reçois pour pouvoir les exploiter au mieux.

donc il manque
Code:

1 2 3 4 5 6 7 8 9 10 11 12 $.ajax({ 'type': 'POST', 'url' : 'produits.php', 'dataType': 'json', // NE PAS OUBLIER 'data': { 'idPopup' : id } // coté serveur il faut récupérer idPopup $_POST['idPopup'] }) .done(function( data) { console.log( data); }) .fail(function( xhr) { alert('c\'est ballot! :\n' + xhr.statusText); });
Citation:

L'affichage en php m'affiche toujours du vide.

commence peut être par vérifier que la valeur est bonne au départ.

Franchement merci les gars pour votre patience :)
Hélas elle n'est pas encore récompensé, mais je pense qu'on va y arriver.

NoSmoking, je pense que tu avais raison :

Citation:

commence peut être par vérifier que la valeur est bonne au départ.

Par compte, je ne m'explique pas ce qu'il se passe (il doit y avoir une subtilité)
Alors ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var id = obj.parent().parents('tr:eq(0)').find('td:eq(0)').text(); $.ajax({ 'type': 'POST', 'url' : 'charge.php', 'dataType': 'json', 'data': { 'idPopup' : id } }) .done(function( data) { console.log( id); console.log( data['id']); }) .fail(function( xhr) { alert('c\'est ballot! :\n' + xhr.statusText); });
Dans la console web :
la ligne console.log( id); renvoie bien l'id de ma ligne, par contre
la ligne console.log( data['id']); renvoie : TypeError: data is null

Comment est ce possible ?
la variable id est passé en paramètre, donc comment peut elle être null ?
Une fois encore, j'ai besion de vos lumières svp. :roll:

21/01/2014, 08h22
SpaceFrog

dans l'onglet xhr de la console regarde le contenu de la reponse du serveur ...
21/01/2014, 08h27
drogba72

Effectivement, dans cet onglet le paramètre est bien chargé...

Que doit je comprendre ?

essaye

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$.ajax({
          'type': 'POST',
          'url' : 'charge.php',
          'dataType': 'json',       
          'assych': true,  
          'data': { 'idPopup' : id },
          'success':function( data) {
                	                 console.log( id);
                                         console.log( data['id']);
                                         },
            'error':function( xhr) {
                                    alert('c\'est ballot! :\n' + xhr.statusText);
                                    }
});

21/01/2014, 19h05
drogba72

Désolé je n'ai pas pu faire d'essais plus tôt...

J'ai effectuée les modifications conseillées :

Donc mon appel ajax vers produits.php et dans mon popin affichage du résultat via un var_dump($_POST);

La fonction ajax passe dans le 'error' et m'affiche : array(0) { }

Ce qui est bizarre, c'est que dans ma console, onglet xhr, le post vers produits.php est bien spécifié et le paramètre est bien le numéro de ma ligne.

C'est tout de même bizarre non ?
21/01/2014, 19h45
NoSmoking

Citation:

Ce qui est bizarre, c'est que dans ma console, onglet xhr, le post vers produits.php est bien spécifié et le paramètre est bien le numéro de ma ligne.

Je dois admettre que je ne sais plus quoi en penser.
Ton problème se situe de toutes évidences coté serveur, essaies un simple echo json_encode($_POST); dans ton fichier produit.php et dis nous ce que tu vois dans l'onglet réponse de l'XHR.
21/01/2014, 20h20
drogba72

Mieux que des mots :

http://imagizer.imageshack.us/v2/800x600q90/33/l0t0.png

Code:

var_dump($_POST);

affiche : array(0) { }

Code:

echo json_encode($_POST);

affiche : []

Code:

echo json_encode($_POST['idPopup']);

affiche : null

Super ton image, mais j'ai la vue défaillante alors....

Je te propose ce fichier de test
page_ajax.html

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ajax minimum</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#btn_json').on('click', function(){
    var data  = {'idProduit' : $("#produit").val()},
        oDest = $("#response");
    $.ajax({
      'type': 'POST',
      'dataType': 'json',
      'url':  'ajax_reponse.php',
      'data': data
      })
      .done( function(retour){
          // écrit le retour dans l'élément
          oDest.html(retour.idProduit);
        })
      .fail(function (xhr, mess){
          console.log( 'c\'est ballot! : [' + xhr.statusText +'] ' +mess);
        }); 
    });
});
</script>
</head>
<body>
<p>
  <input type="text" id="produit" value="produit">
  <button id="btn_json">Requête</button>
</p>
<div id="response"></div>
</body>
</html>

et le fichier
ajax_reponse.php

Code:

1
2
3
<?php
echo json_encode($_POST);
?>

teste et dis nous ce que tu vois.

21/01/2014, 23h13
drogba72

Cela fonctionne parfaitement.

Ce que je tape apparait correctement.

Rectification :

Le code HTML fonctionne bien, je n'ai pas l'impression que dans le code actuel je traite le code php.
Ne devrais je pas faire un require du fichier php pour voir si cela fonctionne bien ?

PS : Je ne sais pas qui avait mis que le post était résolu, mais ce n'était pas le cas... Il faut lire un peu plus que le dernier post :)
22/01/2014, 18h33
drogba72

Je me permet de mettre le résultat en image :

La première ligne en dessous le bouton requête correspond à la div html #response
La seconde correspond au echo de $_POST.

http://imagizer.imageshack.us/v2/102...0/845/l1rz.png

Cela voudrait dire que quelque chose est désactivé chez mon hébergeur ?
23/01/2014, 19h41
NoSmoking

en faisant un echo de $_POST tu t'attends à quoi, il te faudrait reprendre les bases du langage
ou encore
:faq: les tableaux en PHP

Je dois admettre que je ne vois plus où est ton "vrai problème réel" :cry:

Je parlais bien sûr de cette ligne :

Code:

echo json_encode($_POST);

Mon problème reste toujours le même, récupérer cet identifiant!!

Je remet le code des deux pages de tests :

page_ajax.php

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Ajax minimum</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#btn_json').on('click', function(){
    var data  = {'idProduit' : $("#produit").val()},
        oDest = $("#response");
    $.ajax({
      'type': 'POST',
      'dataType': 'json',
      'url':  'ajax_reponse.php',
      'data': data
      })
      .done( function(retour){
          // écrit le retour dans l'élément
          oDest.html(retour.idProduit);
        })
      .fail(function (xhr, mess){
          console.log( 'c\'est ballot! : [' + xhr.statusText +'] ' +mess);
        }); 
    });
});
</script>
</head>
<body>
<p>
  <input type="text" id="produit" value="produit">
  <button id="btn_json">Requête</button>
</p>
<div id="response"></div>
 
<?php
require 'ajax_reponse.php';
?>
</body>
</html>

ajax_reponse.php

Code:

1
2
3
<?php
echo json_encode($_POST);
?>

Pour moi ce code est correct mais ne fonctionne pas à 100%

23/01/2014, 22h13
NoSmoking

ce code n'est qu'un EXEMPLE de ce que l'on peut faire et écrire, et il ne présente en soi aucun intérêt sous cette forme coté PHP.

Citation:

Pour moi ce code est correct mais ne fonctionne pas à 100%

Là j'ai l'impression que l'on va avancer avec de telles explications. Il ne fera pas ce que TU veux, c'est à toi de le faire suivant ton besoin.

Citation:

Mon problème reste toujours le même, récupérer cet identifiant!!

- si c'est coté client, l'exemple te le montre
- si c'est du coté serveur relis la discussion la réponse s'y trouve.
23/01/2014, 22h30
drogba72

Bien sûr que les scripts que tu m'as donné représente seulement un exemple.
D'ailleurs je trouve cette idée très logique, cela permettait de faire de manière simple ce que je souhaite dans le principe.

Cependant, quand je dis que cela ne fonctionne pas, c'est parce que le problème reste le même impossible de récupérer la valeur de ma variable js côté serveur.

La ligne echo ... du fichier php n'affiche rien.
Est ce plus clair ?
24/01/2014, 19h44
NoSmoking

Citation:

La ligne echo ... du fichier php n'affiche rien.

cet affichage ce fait coté client et suivant le format retourné par rapport à l'attendu, tu peux effectivement ne pas l'afficher dans ta page aussi il est préférable de regarder ce qui se passe dans la console.

Essaie simplement de retourner ce que tu reçois

Code:

echo $_POST['idProduit'];

Je ne vois pas ce que l'on peut faire de plus pour toi.
24/01/2014, 23h25
drogba72

Mais je me tue à dire que le tableau POST est vide !!!!!

Citation:

Je ne vois pas ce que l'on peut faire de plus pour toi.

Quand j'ai démarré le post, je demandais conseil à propos de mon problème afin de le résoudre, on m'a gentiment répondu que $.ajax était la solution, depuis j'essaie de faire fonctionner cette solution. Donc pour répondre à ta question plus haut citée, m'aider à faire en sorte que la solution proposée soit fonctionnel :)

Il reste peut être un essai à faire qui est le suivant, utilisation de la méthode en GET

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function(){
  $('#btn_json').on('click', function(){
    var data  = {'idProduit' : $("#produit").val()},
        oDest = $("#response");
    $.ajax({
      'type': 'GET',      
      'dataType': 'json',
      'url':  'ajax_reponse.php',
      'data': data
      })
      .done( function(retour){
          // écrit le retour dans l'élément
          oDest.html(retour);
        })
      .fail(function (xhr, mess){
          console.log( 'c\'est ballot! : [' + xhr.statusText +'] ' +mess);
        }); 
    });
});

avec coté serveur

Code:

1
2
3
<?php
var_dump($_GET);
?>

25/01/2014, 10h36
drogba72

Hélas cela ne fonctionne pas mieux ...
Merci en tout cas d'avoir insisté :)

Peut on envisager d'utiliser une autre méthode et admettre que celle ci ne fonctionnera pas dans mon cas (bien qu'inexplicable) ?

Voyez vous d'autres solutions pour mon problème initial ?
Si j'utilise un popup, la manière de passer les variables serait elle différente ?
25/01/2014, 10h47
NoSmoking
et si tu fait directement un
Code:

1 2 3 <?php echo json_encode($_GET); ?>
Il semblerait que tu ais un problème de configuration dans ce cas.
25/01/2014, 11h00
drogba72

L'affichage est toujours vide seulement dans la console il m'affiche :

"c'est ballot! : [OK] parsererror"
25/01/2014, 11h20
NoSmoking

Citation:

"c'est ballot! : [OK] parsererror"

tu es sûr d'avoir mis echo json_encode($_GET);?
25/01/2014, 12h03
drogba72

Autant pour moi, j'avais mi un echo 'toto'; juste avant.

En le retirant plus de message mais le tableau GET est bien toujours vide.

Je pense qu'il va falloir étudier une autre solution :)
25/01/2014, 12h09
NoSmoking

Donc...sauf erreur ou omission...

Citation:

Il semblerait que tu ais un problème de configuration dans ce cas.
25/01/2014, 13h52
drogba72

OK soit ...

Tampis, y'aurait il d'après vous une autre solution a exploité svp ?

Voir 40 message(s) de cette discussion en une page