Partage
  • Partager sur Facebook
  • Partager sur Twitter

Ajax -Controller php - view

objet ajax dans une vue

    12 août 2018 à 23:47:30

    Bonjour besoin d'aide.Voilà ,

    depuis une req. ajax j'envois l'id  vers un controller.A partir de cet id , je récupère l'objet correspondant depuis la bd , je souhaite retourner cet objet dans une vue .

    -Problème: j'ai une erreur undefined variable.en clair la vue ne reconnait pas la variable. et le var_dump() ne renvoit rien.

     return view('admin.clients',compact('client'));
    

    -Par contre plutôt que de retourner une view(blade) je return une respon json pour lafficher dans le success() de ma req.ajax

    et là le console.log me renvoi bel et bien l'objet que j'ai récupéré en base via l'id

    return response()->json($client);

     Les recherches m'ont conduit vers json_decode() ; mais toujours rien ,aucun changement.

    • Partager sur Facebook
    • Partager sur Twitter
      13 août 2018 à 8:28:57

      Bonjour,

      Le retour de l'action en json vers la vue est la bonne manière de faire.

      Si tu montrais ta fonction ajax ? ;) voir la trace que tu as côté javascript.

      Sinon peut-être cela : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON/parse

      A+

      -
      Edité par monkey3d 13 août 2018 à 17:04:14

      • Partager sur Facebook
      • Partager sur Twitter
        13 août 2018 à 10:16:22

        Bonjour .Je suis d'accord avec toi que l'action en json est ideal, sauf que je voudrai me servir de l'objet récupérer en base, l'envoyer dans un 'formulaire d'edition' de l'objet  dont il est question.

        /////////////////////////////////////////////* edit form Event *///////////////////////////////////
        
        
        $("body").on("click","div.ligne",function(){
        
            var id = $(this).data('id');
        
        
            //alert(id);
            $.ajax({
                dataType: 'json',
                type:'GET',
                url: urlEdit,
                data:{id:id},
                //processData: false
            }).done(function(data){
                alert(data.fullName);
               // alert(JSON.stringify(data)); //renvoi data en tableau detaillé
                console.log(data);
                toastr.warning('Client detecter Successfully.', 'Deleted', {timeOut: 5000});
                
        
            });
        
        
        });



        • Partager sur Facebook
        • Partager sur Twitter
          13 août 2018 à 17:07:54

          Je n'ai peut-être pas bien compris ton problème mais il me semble que quand tu récupères les données json dans le javascript, il suffit de mettre à jour ton formulaire en utilisant les sélecteurs des tags html, non ?

          A+

          • Partager sur Facebook
          • Partager sur Twitter
            13 août 2018 à 18:40:03

            L'objet que je veux renvoyer doit être transmis à la vue ; pour afficher un form-edit avec les champs déjà pré-rempli.

            Mais en renvoyer l'objet json dans le Success; je peux pas le faire.

            L'objectif étant d'apporter des modifications sur l'objet via le formulaire d'édition.

            public function getClient(Request $request)
                {
            
                    $data =$request->all();
            
                    $id= $data['id'];
            
                    $client = Client::findOrFail($id);
                    // $client = json_decode($client, true) ; ne marche pas 
            
                      return view('admin.users.edit', compact('client')); //la vue ne reçoit pas l'objet client
            
                    return response()->json($client); //ceci apparait directement dans le done() de la req. ajax
                    
            
            
                }



            • Partager sur Facebook
            • Partager sur Twitter
              13 août 2018 à 20:29:14

              Bon, je n'ai pas compris alors ce que tu veux faire.

              Bye

              • Partager sur Facebook
              • Partager sur Twitter
                13 août 2018 à 21:35:21

                ok bye.

                Non résolue, pour ceux qui veulent bien.

                • Partager sur Facebook
                • Partager sur Twitter
                  13 août 2018 à 22:20:56

                  En fait je pense qu'il y a deux manières de faire et que tu mélanges les deux.

                  A titre perso j'ai déjà testé deux méthodes différentes.

                  1. Obtenir l'objet depuis le CLIENT sur le SERVEUR puis m'en servir depuis le CLIENT grâce à une fonction JS

                  C'est la méthode que tu utilises actuellement. Ainsi, une fois que tu as les informations qui arrivent dans la variable qui, une fois transformée, te donne un tableau JS exploitable grâce à JSON.stringify(data). Problème, il ne faut pas t'arrêter là avec ton "done".

                  Il faut aussi indiquer dans cette fonction que le "boulot" n'est pas fini, et ajouter juste après les lignes de code JS qui vont envoyer les différentes lignes de ton tableau dans les cases correspondantes du formulaire affiché. Les champs de formulaire sont déjà là (mais vides) et ce sont les commandes appelées par le "done" qui vont pouvoir les remplir au besoin. Et tu arrives à ton résultat, si j'ai bien compris ce que tu cherches à faire.

                  2. Obtenir depuis le CLIENT un "morceau de vue" prêt à l'usage, généré classiquement par le SERVEUR, puis l'afficher via le CLIENT

                  Dans ce cas là l'idée change un petit peu. Tu envoies toujours la même info à ton contrôleur, mais lui te répond différemment. L'idée n'est pas de recevoir du JSON ou du XML ou quelconque donnée structurée, mais plutôt de recevoir un "bloc HTML" prêt à l'emploi. On pourrait imaginer par exemple que tu génères l'ensemble du formulaire comme tu le souhaites.

                  Dans ce cas le traitement de la réponse va être un peu différent. Il suffit par exemple d'enfermer ton formulaire dans une div avec un id donné (par exemple id="leformulaire") et dans ta partie "done", il suffit de remplacer le contenu HTML de cette div par ce qu'aura produit ton contrôleur, c'est à dire si tu as bien fait les choses une "mini vue" qui ne contient que le formulaire et rien d'autre et dont il transmet le code HTML (à la place de déclencher une vue "classique" en sortie).

                  Le framework que j'utilise le plus souvent, CodeIgniter, dispose d'une option très intéressante au niveau des vues pour ce type d'opérations, il permet d'envoyer le contenu d'une vue dans une variable (au lieu de l'afficher). Il y a alors plus qu'à faire un return de cette variable pour ensuite que l'évènement "done" fasse la modification du bloc HTML concerné en remplaçant le contenu actuel par le nouveau issu de la réponse.

                  • Partager sur Facebook
                  • Partager sur Twitter
                  Nicolas - Développeur PHP qui bricole pas mal, utilisant Bootstrap, Materialize, MySQL et quelques astuces piochées par ci par là. Codeigniter a changé ma vie de codeur :D
                    14 août 2018 à 1:12:14

                    Salut Nicolas B .Tes explicactions sont nettes et claires merci :).J'ai eu à tenter aussi la deuxième  solution ; c'est à dire afficher la vue complète(formEdit) via le done de la req. Ajax. Mais il se trouve que ca casse totalement l'animation présente au depart ,à savoir un formulaire (formEdit) coulissant sur la droite dès qu'on clique sur une ligne du tableaux(list des clients).Un Vrai bordel.

                    C'est pourquoi je me suis tourné vers json_decode(); dont le role est de transformer des données json en objet.Mais rien à faire..

                    • Partager sur Facebook
                    • Partager sur Twitter
                      14 août 2018 à 9:13:30

                      Montre ton code actuel js et php si tu as fait des changements.

                      Si tu envoi et reçoit tes données en json tu devrais donc avoir : JS -> Ajax -> PHP -> json_decode() -> traitement -> json_encode() -> callback de ton js -> Si besoin JSON.parse(data).

                      • Partager sur Facebook
                      • Partager sur Twitter
                        15 août 2018 à 12:07:28

                        Bonjour Quenti77 tous le code est dejà présent mes messages précédents : requete ajax et controller. Ta solution m'interesse concernant le js_decode ,mais pourquoi utilisé le js_decode ,ensuite le js_encode alors qu'on voudrai avoir  à partir des données json recu dans le controller, un objet php qu'on voudrai retourner dans une view html ;

                        Pour l'heure j'ai trouvé une solution pas très optimale à mon sens mais ca fonctionne.

                        Destructuring des données recus dans le success ,puis je modifie les attributs 'value' du formulaire edit .

                        En espérant ensuite la validation sans utilisé de js de ce formulaire  rempli via ajax.

                        }).done(function(data){
                        
                             
                                //console.log(data);
                                const { id, fullName = "NR" , email = "NR", phone = "NR", website = "NR", address, city ,country } = data;
                         console.log(id , fullName , email, phone, website , address, city ,country); valueForm(id,fullName, email, phone, website , address, city ,country); editForm.show(); });



                        function valueForm(id,fullName, email, phone, website , address, city ,country) { const form = $('form#fomulaireEdit'); //alert(form.attr("action")); //form.attr("action",''); form.find("h4").text(fullName); form.find("span ").text(country); form.find("input[name='name']").attr('value',fullName); form.find("input[name='email']").attr('value',email); form.find("input[name='phone']").attr('value' ,phone); form.find("input[name='website']").attr('value',website); form.find("input[name='city']").attr('value',city); form.find("input[name='address']").attr('value',address); form.attr("action",urlEdit + '/' + id); //alert(form.attr("action")); }




                        -
                        Edité par YannDeo 16 août 2018 à 1:18:13

                        • Partager sur Facebook
                        • Partager sur Twitter
                          15 août 2018 à 23:29:26

                          Alors de mon point de vue, il y a deux solutions possibles (parmi d'autres, sans doute, en tout cas celles-ci je les ai déjà testées et elles fonctionnent très bien).

                          1. Transférer des données en JSON à l'INTERIEUR du callback .done

                          Tu peux utiliser la fonction $.getJSON() dont la documentation est ici : https://api.jquery.com/jquery.getjson/

                          Tu peux alors interroger ton script PHP en passant en paramètre l'adresse du script, et éventuellement les données à lui fournir

                          Evidemment, il faut que ton script PHP donne une réponse sous la forme d'un JSON, le plus simple étant de transformer un résultat (souvent un Array) en JSON grâce à la fonction dédiée json_encode() dont la documentation est ici : http://php.net/manual/fr/function.json-encode.php

                          Une fois la réponse en JSON reçue par ton script JS, imaginons par exemple à l'intérieur d'un .done(json) { ... tu te retrouves avec des données directement exploitables dans ta fonction "done" de ton script en accédant aux index par des points. Par exemple si le tableau JSON de résultat contient une colonne disons "nomclient" tu pourras utiliser json.nomclient pour en faire ce que tu en veux.

                          Mais, si je ne raconte pas de connerie et si le JS fonctionne bien de manière très proche du PHP, la définition de variable pose des problèmes de portées. Ainsi, si tu te trouves dans le "done" qui te remplit ta variable "json" au moment où le JS reçoit la réponse de ton script PHP, la variable "json" ne sera utilisable qu'à l'intérieur de la fonction de callback, et sera "invisible" à l'extérieur.

                          Donc si tu n'utilises pas les données à l'intérieur de ta fonction .done... c'est le bordel. (Ou a minima en faisant appel dans le done à une fonction qui reçoit en paramètre ton tableau de résultats json, la fonction pouvant ensuite être définie ailleurs).

                          2. Utiliser les données reçues en DEHORS du callback .done

                          Le début de l'histoire est le même que précédemment, sauf qu'on se trouve face à un problème. Si tu veux pouvoir accéder aux données reçues en dehors de ta fonction de callback .done, il faut trouver une astuce pour rendre la variable visible à l'extérieur (pour l'ensemble de ton script JS et pas seulement à l'intérieur de la fonction .done).

                          Pour cela un ami m'a donné une astuce qui fonctionne très bien, il suffit de créer une variable de niveau window, puis de lui affecter la variable contenant les résultats... Par exemple tu peux écrire window.MESREPONSES = json. Tu pourras alors utiliser window.MESREPONSES n'importe où dans ton script pour récupérer tes données (toujours sous la forme d'un tableau JSON).

                          Dernière astuce

                          J'ai souvent pour habitude d'organiser une concordance de noms entre le nom de mes formulaires (et leurs id), et le nom des colonnes dans mes tables de données. Cela permet d'éviter les erreurs et de faciliter le développement. Par exemple, pour un input donnant le code postal d'un client, je vais lui donner le name et l'id "cli_codepostal" ce qui me permettra de récupérer $_POST['cli_codepostal'] dans une requête préparée qui fera référence au champ de base de données cli_codepostal, etc. etc. Côté JS, ça permet de récupérer facilement $('#cli_codepostal').

                          Intérêt d'une telle "concordance", c'est que dans ton tableau JSON de résultats, tu as sans doute en index les titres de colonnes de ta base de données correspondant à chaque donnée. Tu peux alors très facilement utiliser la fonction de parcours d'un tableau $.each(json, function(index, value) ... qui te permet très facilement de demander quelque chose en récupérant pour chaque ligne de résultat l'index (donc le nom de ton champ de formulaire / colonne de table) et la valeur correspondante. Quand tu as plein de champs, tu es très content de pas devoir refaire une ligne de code par champ à peupler...

                          Tu peux ainsi très facilement charger en une seule ligne toutes les valeurs trouvées dans le tableau JSON dans les bons inputs de formulaire qui correspondent.

                          Voilà pour quelques pistes qui, sans doute, ne sont pas très "académiques" mais qui ont l'intérêt de faire le job :)

                          • Partager sur Facebook
                          • Partager sur Twitter
                          Nicolas - Développeur PHP qui bricole pas mal, utilisant Bootstrap, Materialize, MySQL et quelques astuces piochées par ci par là. Codeigniter a changé ma vie de codeur :D

                          Ajax -Controller php - view

                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                          • Editeur
                          • Markdown