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

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