Récupérer une variable json après une fonction de callback

sdrogba Messages postés 66 Date d'inscription Statut Membre Dernière intervention -
sdrogba Messages postés 66 Date d'inscription Statut Membre Dernière intervention - 16 janv. 2014 à 16:44

Bonjour,

Le but de ma question est de récupérer simplement l'id qui se trouvent dans une colonne d'un tableau via l'action (clic souris) sur le un lien modifier qui se trouve sur chaque ligne.
Je souhaite récupérer cette valeur à l'intérieur d'un popin pour effectuer le chargement de la ligne afin de consulter son détail.

J'ai pour le moment opté vers la solution d'un aller retour sur le serveur sans recharger la page avec un ajax ($.post). Sauf que je ne maîtrise pas du tout et je ne m'en sors pas ...
Je requiert donc votre aide svp

Pour que cela soit plus clair je me permet de mettre quelques bouts de code :

Mon tableau (je retire la partie alimentant mon tableau, elle n'est pas importante dans mon problème et est fonctionnel il faut juste savoir que chaque ligne actions contient un lien permettant d'ouvrir le popin):

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

Le code javascript permettant d'ouvrir le popin :
(le code en gras devrait me permettre de faire un callback, sauf que j'ai l'impression que rien ne s'effectue)

<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="https://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');});
            });
        });

    </script>

Et voici mon formulaire se trouvant dans mon popin qui sert soit à créer une ligne (ca c'est fonctionnel) ou à la modifier (c'est ca qui ne fonctionne pas):
(la variable $_POST[idPopup] ne me renvoie rien alors que la valeur du champ foo récupère bien mon id)

<form class="form-horizontal" action="produits.php" method="post" name="form_pdts" id="passeJson">
	<fieldset>
		<?php 
			echo 'id : ',$_POST[idPopup],'<br>';
		?>
						
		<span id="foo" name="id" ></span>

....

En espérant que quelqu'un me sorte de se guépier, merci par avance.

A voir également:

Récupérer une variable json après une fonction de callback
Fonction si et - Guide
Recuperer message whatsapp supprimé - Guide
Comment recuperer une video sur youtube - Guide
Impossible de récupérer mon compte gmail - Guide
Recuperer le son d'une video - Guide

2 réponses

Réponse 1 / 2

Reivax962 Messages postés 3672 Date d'inscription Statut Membre Dernière intervention 1 011

Bonjour,

id = $(this).find("span[name=id]").val();

Je ne suis pas du tout convaincu que val() renvoie l'ID d'un <span>... Dans la doc, val() n'est censé s'appliquer qu'aux éléments de formulaire, et renvoie la valeur de "value" (je n'ai pas de quoi tester sous la main)

As-tu essayé de mettre

id = $(this).find("span[name=id]").attr('id');
plutôt ?

Xavier

Réponse 2 / 2

sdrogba Messages postés 66 Date d'inscription Statut Membre Dernière intervention

Bonjour Reivax962,

Merci pour votre réponse.
Je viens juste d'essayer votre solution, hélas rien n'a changé. :/

Je me demande si ma fonction de callback est bien placée ... (actuellment en dehors du popin...
Sauriez vous si on peut la placer à l'intérieur et si oui comment svp ?

Merci

Reivax962 Messages postés 3672 Date d'inscription Statut Membre Dernière intervention 1 011

Au temps pour moi.
Essaie ceci :
id = $('#foo').html();

Sachant que, si j'ai bien compris, l'id est rempli de cette façon :
$('#foo').html(popupligne);
avec popupligne qui vaut l'id que tu recherches.

Xavier

sdrogba Messages postés 66 Date d'inscription Statut Membre Dernière intervention

Merci Reivax962 pour ton aide.
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 (comme la suggestion au dessus de votre part, j'ai pensé à l'alimentation de populigne.
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 :

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

Reivax962 Messages postés 3672 Date d'inscription Statut Membre Dernière intervention 1 011

Une autre tentative alors (je ne suis pas un grand adepte de jQuery, alors je tâtonne un peu...)
Au lieu de
var obj = {idPopup:id}
Essaie
var obj = "idPopup=" + id;

Xavier

sdrogba Messages postés 66 Date d'inscription Statut Membre Dernière intervention

Je pense que le code jquery doit s'approcher de la vérité (puisque ma valeur passée à l'air bonne) par contre je dois avoir un soucis en php peut être ou alors cela vient de ma redirection je ne sais pas trop où chercher.

En tout cas selon la doc jquery c'est bien ce format var obj = {idPopup:id}

Discussions similaires

Colis shein terminal fret

Remplir une cellule (texte) en fonction d'une autre (texte).

Colis SHEIN Signe à Paris au terminal fret

Votre réponse

Discussions similaires